Server-Side Rendering (SSR) vs Client-Side Rendering (CSR)
In this lesson, we'll discuss the differences between InertiaJS in a server-side rendered (SSR) and a client-side rendered (CSR) application. We'll then compare when you would want to choose one over the other and the pros and cons of both.
Developer & dog lover. I teach AdonisJS, a full-featured Node.js framework, at Adocasts where I publish weekly lessons. Professionally, I work with JavaScript, .NET, and SQL Server.
Thank you for this great series. Are there any advantages to combining Edge with Inertia versus just using Inertia SSR? Let’s say I want the initial page and maybe the blog to be server-side rendered, while keeping the rest of the app as a SPA?
Hi Tresor! Yeah, there's some benefits to that, but also cons. The benefits are that you can easily ensure those pages where SEO is important have as small of a weight to them as possible. Many times marketing materials have a different look and feel from the internal application as well, so having them completely split between your Edge pages & Inertia app can help define that barrier.
Though Google and other search engines have been getting better about reading JavaScript, you'll also have piece of mind in knowing exactly what markup is being sent when using Edge as well.
The main con is for those instances where there isn't a visual separation between marketing materials and the internal application. For example, say we're using a UI library in the SPA app but we still want that same look on the Edge pages. We'd need to replicate that UI library's CSS for our Edge pages in order for the look and feel to remain the same. Of course, that may not be an issue if your UI library is framework agnostic or uses web components, but if you're using something like ShadCN, Nuxt UI, etc then that can be a real issue.
In those cases, or even if you just prefer to have everything reside within Inertia, you can specify which pages in Inertia should use SSR. The SSR allowlist resides within the config/inertia.ts configuration file and accepts an array of page names or a function that returns a boolean.
Below are two examples from the linked documentation for this.
Oh, thanks, I didn’t know about the SSR allowlist. My main concern was with the UI library since I couldn’t easily replicate the same look on the pages that use Edge. I’ll go with the SSR allowlist for now. Appreciate it!
Join The Discussion! (6 Comments)
Please sign in or sign up for free to join in on the dicussion.
fauzan-habib
This is exactly what I need, did a marathon on this series and I can't wait for the next lessons coming in
Please sign in or sign up for free to reply
tomgobich
Thanks so much, Fauzan!! I'm ecstatic to hear that! 😁
Please sign in or sign up for free to reply
tmuco
@tomgobich
Thank you for this great series. Are there any advantages to combining Edge with Inertia versus just using Inertia SSR? Let’s say I want the initial page and maybe the blog to be server-side rendered, while keeping the rest of the app as a SPA?
Please sign in or sign up for free to reply
tomgobich
Hi Tresor! Yeah, there's some benefits to that, but also cons. The benefits are that you can easily ensure those pages where SEO is important have as small of a weight to them as possible. Many times marketing materials have a different look and feel from the internal application as well, so having them completely split between your Edge pages & Inertia app can help define that barrier.
Though Google and other search engines have been getting better about reading JavaScript, you'll also have piece of mind in knowing exactly what markup is being sent when using Edge as well.
The main con is for those instances where there isn't a visual separation between marketing materials and the internal application. For example, say we're using a UI library in the SPA app but we still want that same look on the Edge pages. We'd need to replicate that UI library's CSS for our Edge pages in order for the look and feel to remain the same. Of course, that may not be an issue if your UI library is framework agnostic or uses web components, but if you're using something like ShadCN, Nuxt UI, etc then that can be a real issue.
In those cases, or even if you just prefer to have everything reside within Inertia, you can specify which pages in Inertia should use SSR. The SSR allowlist resides within the
config/inertia.ts
configuration file and accepts an array of page names or a function that returns a boolean.Below are two examples from the linked documentation for this.
Please sign in or sign up for free to reply
tmuco
Oh, thanks, I didn’t know about the SSR allowlist. My main concern was with the UI library since I couldn’t easily replicate the same look on the pages that use Edge. I’ll go with the SSR allowlist for now. Appreciate it!
Please sign in or sign up for free to reply
tomgobich
Yeah, that can definitely be a major headache depending on the UI library! Anytime!! 😊
Please sign in or sign up for free to reply