Server Side Rendering
So I started learning solidjs/solidstart around 3 months ago and instantly after 1-2 weeks I basically started building a project thinking I would learn more which actually is an easier way to learn for me. I've written some code but I don't really know if it is Server Side Rendered or not I want it to be SSR I am going to include some code here
// I have some imports up as well didn't want to include it
const user = createAsync(() => get_xelosani(props.params.id))
// - Some javascript here -
<MetaProvider>
<Title>{user()?.firstname + " " + user()?.lastname}</Title>
// more code down here
This is my config file
export default defineConfig({
optimizeDeps: {
exclude: ['js-big-decimal']
},
vite({ router }) {
if (router === "server") {
return {
server: {
port: 3000,
},
};
} else if (router === "client") {
} else if (router === "server-function") {
}
return { plugins: [] };
},
ssr: true
});
So based on these if anyone could guide me I would be thankful. Also if you guys have some article, video or book links about SSR with solid or without solid please link it to me.3 Replies
const user = createAsync(() => get_xelosani(props.params.id), {deferStream: true})
adding deferstream works so for now how I understand the ssr in solid/solidstart is when user comes to the page createAsync makes request to the server then gathers everything it needs then it inserts these data based on jsx that we have and the it hydrates it. Is this correct flow of how it works? also does createAsync run on server? for now I think it should be running on server right?
You can check if a component/ page is rendered on the server or client by placing a console log in the component.
If the log appears in the terminal it’s server rendered, if it’s in the browser console it’s client rendered.
There’s also the
isServer helper you can import.
Solid-Start will be in SSR mode by default or you can like you did set SSR to true.
The app will then render on the server whenever a url is directly hit or when the browser is refreshed.
Once the app is hydrated on the client/browser solid will switch to client side routing and rendering.
Regarding createAsync and meta tags. Browsers don’t pick up when the title is changed, so using deferStream and you can also wrap the title in a Show (I’m not sure if Suspense does also work for meta tags ) component to make sure it will only be rendered once the async resource has resolved is correct. Because solid will start to stream chunk of the page to the client which are ready.Thanks a lot.