Server-Side Rendering

Setup

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

npm run build

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.

Reference the following steps to disable SSR:

1. Delete resources/js/ssr.js

2. Front-end changes

   package.json

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

   resources/js/app.js

   import { createSSRApp, h } from 'vue';
   import { createApp, h } from 'vue';
   
   // ...
   
   const app = createSSRApp(Root)
   const app = createApp(Root)

   vite.config.js

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

3. Back-end changes

   app/Http/Middleware/HandleInertiaRequests.php

   use Tighten\Ziggy\Ziggy;
   
   // ...
   
   return [
       ...parent::share($request),
       'colorScheme' => fn () => $request->cookie('colorScheme', 'auto'),
       'ziggy' => fn () => [
           ...(new Ziggy())->toArray(),
           'location' => $request->url(),
       ],
       // ...
   ];