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.

Published
Aug 15, 24
Duration
6m 6s

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.

Adocasts

Burlington, KY

Get the Code

Download or explore the source code for this lesson on GitHub

Repository

⏳ Chapters

00:00 - Introduction
00:35 - Comparing the Project Structures
01:40 - Comparing the Initial Document Render
04:20 - Pros/Cons

Join The Discussion! (6 Comments)

Please sign in or sign up for free to join in on the dicussion.

  1. Commented 11 months ago

    This is exactly what I need, did a marathon on this series and I can't wait for the next lessons coming in

    1

    Please sign in or sign up for free to reply

    1. Commented 11 months ago

      Thanks so much, Fauzan!! I'm ecstatic to hear that! 😁

      0

      Please sign in or sign up for free to reply

  2. Commented 1 month ago

    @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?

    1

    Please sign in or sign up for free to reply

    1. Commented 30 days ago

      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.

      import { defineConfig } from '@adonisjs/inertia'
      
      export default defineConfig({
        ssr: {
          enabled: true,
          pages: ['home']
        }
      })
      Copied!
      import { defineConfig } from '@adonisjs/inertia'
      
      export default defineConfig({
        ssr: {
          enabled: true,
          pages: (ctx, page) => !page.startsWith('admin')
        }
      })
      Copied!
      1

      Please sign in or sign up for free to reply

      1. Commented 30 days ago

        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!

        1

        Please sign in or sign up for free to reply

        1. Commented 29 days ago

          Yeah, that can definitely be a major headache depending on the UI library! Anytime!! 😊

          1

          Please sign in or sign up for free to reply