Server-Side Rendering (SSR) vs Client-Side Rendering (CSR)

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

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!