はじめに

下記記事でDockerで作成した開発環境の中でSSRを導入する。
前提条件は一緒

SSRに必要な追加の依存関係をインストールする必要がある。
```
npm install @vue/server-renderer
```
```
composer require inertiajs/inertia-laravel
```

SSRエントリポイントとして機能するファイルを作成する。(resource/js/ssr.js)

import { createInertiaApp } from '@inertiajs/vue3'
import createServer from '@inertiajs/vue3/server'
import { renderToString } from '@vue/server-renderer'
import { createSSRApp, h } from 'vue' 

createServer(page =>
	createInertiaApp({
		page,
		render: renderToString,
		resolve: name => {
			const pages = import.meta.glob('./Pages/**/*.vue', { eager: true }) 
			return pages[`./Pages/${name}.vue`]
		},
		setup({ App, props, plugin }) { 
			return createSSRApp({
				render: () => h(App, props),
			}).use(plugin)
		},
	}),
)

viteの設定を更新

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

npmスクリプトを更新する

"scripts": { 
	"dev": "vite",
	"build": "vite build && vite build --ssr"
},

Build

npm run build

SSRサーバーの実行

php artisan inertia:start-ssr