Server-side Rendering for Inertia.js
Published on by Paul Redmond
The Inertia team announced the release of server-side rendering (SSR) for Inertia.js:
🚀 It's finally here. Server-side Rendering for Inertia.js!https://t.co/aaj7umnA12
— Inertia.js (@inertiajs) January 7, 2022
As always, this means there's a ton of new releases:
✨ server@0.1.0
✅ inertia@0.11.0
✅ inertia-vue@0.8.0
✅ inertia-vue3@0.6.0
✅ inertia-react@0.8.0
✅ inertia-laravel@0.5.1 pic.twitter.com/Jbf8OO4uwr
Inertia.js applications written in Laravel or Rails now have the added benefit of pre-rendering the initial page load on the server and sending the HTML to the browser. SSR enables users to interact with the page faster and helps search engines crawl pages more quickly.
What I find significant about this work is that typically, SSR means that your server-side is written in Node.js and that something written in PHP or Ruby is out of the question. The beauty of SSR in Inertia.js is that you can write the server-side application in Laravel or Rails, but under-the-hood Inertia.js renders the HTML via a separate Node.js process:
When Inertia detects that it's running in a Node.js environment, it will automatically render the provided page object to HTML and return it.
However, because most Inertia applications are built in languages such as PHP or Ruby, we'll need to hand the request over to a separate Node.js service so that it can render the page for us and return the generated HTML to the browser when it's done.
SSR is available for Vue, Vue 3, and React adapters at the release announcement—with the Svelte adapter in the works. Today, you can get started with Server-side rendering by checking out the documentation and setup guide.