Server-side rendering (SSR) an Inertia app can improve search engine optimization (SEO), and can also reduce the time to first contentful paint (FCP). To this point, Inertia has not offered server-side rendering. However, official support is coming! This feature will be made available to our sponsors first. Please consider supporting this project! 💜
Vue, React and Svelte all offer SSR tooling, which Inertia can take advantage of. Here's how it works:
What's awesome here is that, because of Inertia's architecture, the
page object sent to the Node SSR server always includes all the necessary data (props) needed for the page component to render.
Meaning, you don't run into any asynchronous data loading issues when doing server-side rendering with Inertia. It's very fast. Our tests show that it takes between
2ms-50ms to render a page, depending on its complexity.
Also, keep in mind that Inertia only needs to do server-side rendering for the first page load. From that point on, you're in "SPA mode", and you just get normal Inertia XHR responses back.
Okay, what are the gotchas? There are a few technical requirements to be aware of.
First, since we're using Node to do the server-side rendering, you'll need Node installed on your server. Fortunately, since Node is often used for build steps, it's very common for it to be installed.
Second, you need to run a small background Node process. If you're using a modern hosting platform like Heroku or Laravel Forge, it's quite straightforward to setup. (Technically you could avoid running the background Node process, and just shell out to Node directly. However, since Node takes about
250ms to boot up, this approach comes at a pretty significant performance penalty.)
Third, you are now building an app that must be able to run in both the browser and in Node. These are sometimes called "universal" or "isomorphic" apps. Generally speaking this is quite manageable. You just need to be aware of this when reaching for
document, as these don't exist in Node.
Wondering what a server-side rendered Inertia app feels like? We've setup the Ping CRM demo app in "SSR mode" so you can find out.
You can find it at ssr-demo.inertiajs.com.
This demo app is running on a small Digital Ocean droplet, managed by Laravel Forge.