[Bug?]: using ag-grid need to disable ssr, but then I cannot build static website with ag-grid #988
Comments
|
Yeah, because static sites are server-rendered. You render all the pages on the server and then load them as you navigate to it. A client-rendered SPA is technically a static site in a sense that you don't need a server for it, but it isn't the same. A SPA will serve a single index.html that is basically blank and do everything in the client. A "static" site involves pre-rendering all the pages on the server. If you want Static site generation with something like this we need to have it be skipped on server rendering generation and to only render that part in the client. We need to lazy load the component and trigger it to show in an effect on the client as effects don't run on the server. |
Thank you for the quick reply. It would be wonderful to have something like you mentioned, though I don't know how hard it will be for the implementation. |
|
Hey this might help. I haven't confirmed whether it covers the case but if it does it is a pretty strong argument for this component: I believe the code is: import { createSignal, sharedConfig, createComponent, onMount, lazy, type Component } from "solid-js"
export function clientOnly<T extends Component<any>>(
fn: () => Promise<{ default: T }>
): T {
const Lazy = lazy(fn);
return ((props: any) => {
if (sharedConfig.context) {
const [flag, setFlag] = createSignal(false);
onMount(() => {
setFlag(true);
});
return createMemo(() => {
if (flag()) {
return createComponent(Lazy, props);
}
return undefined;
});
}
return createComponent(Lazy, props);
}) as unknown as T;
}And then the usage is: const MyComp = clientOnly(() => import("./path/to/ag-grid/component.tsx")) |
Do you mean by adding this snippet and enable Again, I'm not very familiar with the ssr thing, so the issue might be stupid. But I'm willing to help. |
|
Got it to build by externalizing ag-grid-solid. vite.config.js ssr: {
external: ['ag-grid-solid']
},
plugins: [
unocss(),
...schedule.jsx const AgGridSolid = clientOnly(() => import("ag-grid-solid"));
return (
<>
...
<div dark class="ag-theme-material ag-grid">
<AgGridSolid
gridOptions = {gridOptions}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
rowSelection={'single'}
rowData={rowData()} />
</div>
... |
|
OK. Now it works. Thank you for the help. So to summarize a bit for others who come to this post, to enable both ag-grid and ssr, I should:
Hopefully, the solid-start team will make this process a bit easier and cleaner in the future. |
|
In setting up for SolidStart's next Beta Phase built on Nitro and Vinxi we are closing all PRs/Issues that will not be merged due to the system changing. If you feel your issue was closed by mistake. Feel free to re-open it after updating/testing against 0.4.x release. Thank you for your patience. See #1139 for more details. |
Duplicates
Latest version
Current behavior 😯
I made the issue here:
solidjs/solid#1839
But it seems to be more related to
solid-startrather thansoliditself.The question is simple:
If I use
ag-grid, I need to disablessr. Then when building static website withsolid-start-static, it gives:Is there a proper solution for such a issue?
Expected behavior 🤔
I can build a static website with ag-grid enabled.
Steps to reproduce 🕹
Steps:
solid-start-staticContext 🔦
No response
Your environment 🌎
The text was updated successfully, but these errors were encountered: