Server-Side Rendering

Setup

Server-side rendering is configured and ready for use out of the box. Simply build the client & server side bundles with the following script:

npm run build:ssr

Then start the Node-based Inertia SSR server:

php artisan inertia:start-ssr

With the server running, you should be able to access your app within the browser with server-side rendering enabled. You can reference Inertia's SSR Documentation for further information.

Disable SSR / SPA Only Mode

If your application is not public facing and does not require server-side rendering (internal administrative application, dashboard, etc.) then you can remove the SSR related configurations to have the site operate as a traditional SPA, without server-rendered markup and client-side hydration.

Use the following steps to disable SSR:

1. Delete resources/js/ssr.ts

2. Front-end code changes

   resources/js/app.ts

   import { createSSRApp, DefineComponent, h } from 'vue'
   import { createApp, DefineComponent, h } from 'vue'
   
   // ...
   
   createSSRApp({
   createApp({
       setup: () => {
           // Inertia router events for Error toast handling, flash data, etc.
           useInertiaRouterEvents()
       },
       render: () => h('div', [
           // Root template with global toast component
           h(App, props),
           h(Toast, { position: 'bottom-right' })
       ])
   })

   resources/js/layouts/app/SidebarLayout.vue

   import { useSsrStorage } from '@/composables/useSsrStorage'
   import { useStorage } from '@vueuse/core'
   
   // ...
   
   const sidebarOpen = useSsrStorage('desktop-sidebar-open', true)
   const sidebarOpen = useStorage('desktop-sidebar-open', true)

   package.json

   "scripts": {
       "dev": "vite",
       "build": "vite build",
       "build:ssr": "vite build && vite build --ssr",
       "lint": "eslint . --fix"
   }

   vite.config.ts

   plugins: [
       laravel({
           input: 'resources/js/app.ts',
           ssr: 'resources/js/ssr.ts',
           refresh: true,
       }),
       // ...
   ]

3. Back-end code changes

   .env

   INERTIA_SSR_ENABLED=false