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.

Reference the following steps to disable SSR:

1. Delete resources/js/ssr.ts

2. Front-end changes

   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 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(),
       ],
       // ...
   ];