Jonathan Reinink, has announced that Inertia.js – SSR (Server Side Rendering) is in early access and has support for Vue 2, Vue 3, and React.

If some were sceptics when it comes to Inertia.js for SEO reasons, now, with SSR capabilities + the inertia head component that was recently announced, all of those problems are solved.

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:

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:

This feature is currently in early access, and is only available to our sponsors. To gain access to this feature now, please support this project financially by becoming a sponsor. 🧑

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!

Leave a Reply

Your email address will not be published. Required fields are marked *