Laravel + Vue + Vite + Inertia.js環境にSSRを導入する

はじめに

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

1. SSRに必要な追加の依存関係をインストールする必要がある。

   npm install @vue/server-renderer
   

   composer require inertiajs/inertia-laravel
   

2. 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)
   		},
   	}),
   )
   

3. viteの設定を更新

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

1. npmスクリプトを更新する

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

1. Build

npm run build

1. SSRサーバーの実行

php artisan inertia:start-ssr