🚀 After months of development, I am thrilled to announce that @inertiajs SSR (server-side rendering) is now available in *early access* to our sponsors!— Jonathan Reinink (@reinink) June 2, 2021
🔥 It already works in Vue 2, Vue 3 and React, and we’re working on Svelte support.https://t.co/zZSl3iESiS pic.twitter.com/2DEY39KMGv
Until now, Inertia.js apps were rendered on the client-side using frameworks like Vue, React or Svelte. Now, with SSR support, you can have your pages rendered server-side on the first-page load. Here’s how server-side rendering works in Inertia, explained by Jonathan Reinink:
1. A request comes into your server-side framework
Your requests and responses are still fully managed by your server-side framework of choice. Your routes, middleware, and controllers prepare the Inertia response, just like a normal Inertia app.
2. Inertia makes a request to a local Node SSR server
Right before your app sends the full page response to the browser, Inertia takes the page object for that response and sends it via HTTP to a local Node SSR server.
3. The Node SSR server renders the page component as HTML
Using the page object that was provided, the Node server knows what Vue/React/Svelte page component to render, and which props to pass it. It then returns the rendered HTML back to your app.
4. Your app inserts the pre-rendered HTML in the response
Now that your app has the pre-rendered HTML for the page, it can include it in the HTML response sent to the browser. When the client-side framework boots, it is able to “hydrate” the server-side rendered HTML, instead of re-rendering the whole page.
For more informations check Inertia’s website, the SSR section: https://inertiajs.com/server-side-rendering
If you want to give it a try you can check out the demo app Jonathan put together or if you want to try it on your machine, you should be a sponsor. Here are more details:
I think it’s worth sponsoring Jonathan’s work not only to get access to the Inertia SSR but in this way you support his efforts of making your development experience a pleasant one.Spread the word!