Support SSR in Vite dev mode

packages/core/build.js

@@ -30,6 +30,7 @@ const builds = [
   { entryPoints: ['src/index.ts'], format: 'cjs', outfile: 'dist/index.js', platform: 'browser' },
   { entryPoints: ['src/server.ts'], format: 'esm', outfile: 'dist/server.esm.js', platform: 'node' },
   { entryPoints: ['src/server.ts'], format: 'cjs', outfile: 'dist/server.js', platform: 'node' },
+  { entryPoints: ['src/vite.ts'], format: 'esm', outfile: 'dist/vite.js', platform: 'node' },
 ]
 
 builds.forEach(async (build) => {

packages/core/package.json

@@ -34,6 +34,10 @@
       "types": "./types/server.d.ts",
       "import": "./dist/server.esm.js",
       "require": "./dist/server.js"
+    },
+    "./vite": {
+      "types": "./types/vite.d.ts",
+      "default": "./dist/vite.js"
     }
   },
   "typesVersions": {
@@ -54,13 +58,22 @@
     "es-toolkit": "^1.34.1",
     "qs": "^6.9.0"
   },
+  "peerDependencies": {
+    "vite": "^6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/deepmerge": "^2.2.0",
     "@types/node": "^18.4",
     "@types/nprogress": "^0.2.0",
     "@types/qs": "^6.9.0",
     "esbuild": "^0.25.0",
     "esbuild-node-externals": "^1.6.0",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.4",
+    "vite": "^5.4.8"
   }
 }

packages/core/src/server.ts

@@ -2,24 +2,18 @@ import { createServer, IncomingMessage } from 'http'
 import cluster from 'node:cluster'
 import { availableParallelism } from 'node:os'
 import * as process from 'process'
-import { InertiaAppResponse, Page } from './types'
+import { readableToString } from './serverUtils'
+import type { InertiaAppResponse, Page } from './types'
+
+export type AppCallback = (page: Page) => InertiaAppResponse
 
-type AppCallback = (page: Page) => InertiaAppResponse
 type RouteHandler = (request: IncomingMessage) => Promise<unknown>
 type ServerOptions = {
   port?: number
   cluster?: boolean
 }
 type Port = number
 
-const readableToString: (readable: IncomingMessage) => Promise<string> = (readable) =>
-  new Promise((resolve, reject) => {
-    let data = ''
-    readable.on('data', (chunk) => (data += chunk))
-    readable.on('end', () => resolve(data))
-    readable.on('error', (err) => reject(err))
-  })
-
 export default (render: AppCallback, options?: Port | ServerOptions): void => {
   const _port = typeof options === 'number' ? options : (options?.port ?? 13714)
   const _useCluster = typeof options === 'object' && options?.cluster !== undefined ? options.cluster : false

packages/core/src/serverUtils.ts

@@ -0,0 +1,9 @@
+import type { IncomingMessage } from 'http'
+
+export const readableToString: (readable: IncomingMessage) => Promise<string> = (readable) =>
+  new Promise((resolve, reject) => {
+    let data = ''
+    readable.on('data', (chunk) => (data += chunk))
+    readable.on('end', () => resolve(data))
+    readable.on('error', (err) => reject(err))
+  })

packages/core/src/vite.ts

@@ -0,0 +1,43 @@
+import type { Plugin } from 'vite'
+import { readableToString } from './serverUtils'
+
+interface PluginConfig {
+  renderer: string
+}
+
+export default function inertia(config: string | PluginConfig): Plugin {
+  const resolvedConfig = resolveConfig(config)
+
+  return {
+    name: '@inertiajs/core/vite',
+    async configureServer(server) {
+      return () =>
+        server.middlewares.use(async (req, res, next) => {
+          if (req.url !== '/render') {
+            next()
+          }
+
+          const { default: render } = await server.ssrLoadModule(resolvedConfig.renderer)
+          const response = await render(JSON.parse(await readableToString(req)))
+          res.writeHead(200, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify(response))
+        })
+    },
+  }
+}
+
+function resolveConfig(config: string | PluginConfig) {
+  if (typeof config === 'undefined') {
+    throw new Error('@inertiajs/core/vite: missing configuration.')
+  }
+
+  if (typeof config === 'string') {
+    return { renderer: config }
+  }
+
+  if (typeof config.renderer === 'undefined') {
+    throw new Error('@inertiajs/core/vite: missing configuration for "renderer".')
+  }
+
+  return config
+}

packages/react/src/server.ts

@@ -1 +1,2 @@
+export * from '@inertiajs/core/server'
 export { default as default } from '@inertiajs/core/server'

packages/svelte/src/server.ts

@@ -1 +1,2 @@
+export * from '@inertiajs/core/server'
 export { default as default } from '@inertiajs/core/server'

packages/vue3/src/server.ts

@@ -1 +1,2 @@
+export * from '@inertiajs/core/server'
 export { default as default } from '@inertiajs/core/server'

playgrounds/react/resources/js/viteSsr.tsx

@@ -0,0 +1,14 @@
+import { createInertiaApp } from '@inertiajs/react'
+import type { AppCallback } from '@inertiajs/react/server'
+import * as ReactDOMServer from 'react-dom/server'
+
+const render: AppCallback = (page) =>
+  createInertiaApp({
+    page,
+    render: ReactDOMServer.renderToString,
+    title: (title) => `${title} - React Playground`,
+    resolve: (name) => import(`./Pages/${name}.tsx`),
+    setup: ({ App, props }) => <App {...props} />,
+  })
+
+export default render

playgrounds/react/vite.config.ts

@@ -1,3 +1,4 @@
+import inertia from '@inertiajs/core/vite'
 import tailwindcss from '@tailwindcss/vite'
 import react from '@vitejs/plugin-react'
 import laravel from 'laravel-vite-plugin'
@@ -13,6 +14,7 @@ export default defineConfig({
       ssr: 'resources/js/ssr.tsx',
       refresh: true,
     }),
+    inertia('resources/js/viteSsr.tsx'),
     react(),
     tailwindcss(),
   ],

playgrounds/svelte4/resources/js/viteSsr.ts

@@ -0,0 +1,10 @@
+import { createInertiaApp } from '@inertiajs/svelte'
+import type { AppCallback } from '@inertiajs/svelte/server'
+
+const render: AppCallback = (page) =>
+  createInertiaApp({
+    page,
+    resolve: (name) => import(`./Pages/${name}.svelte`),
+  })
+
+export default render

playgrounds/svelte4/vite.config.js

@@ -1,3 +1,4 @@
+import inertia from '@inertiajs/core/vite'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
 import tailwindcss from '@tailwindcss/vite'
 import laravel from 'laravel-vite-plugin'
@@ -13,6 +14,7 @@ export default defineConfig({
       ssr: 'resources/js/ssr.ts',
       refresh: true,
     }),
+    inertia('resources/js/viteSsr.ts'),
     svelte({
       compilerOptions: {
         hydratable: true,

playgrounds/svelte5/resources/js/viteSsr.ts

@@ -0,0 +1,10 @@
+import { createInertiaApp } from '@inertiajs/svelte'
+import type { AppCallback } from '@inertiajs/svelte/server'
+
+const render: AppCallback = (page) =>
+  createInertiaApp({
+    page,
+    resolve: (name) => import(`./Pages/${name}.svelte`),
+  })
+
+export default render

playgrounds/svelte5/vite.config.js

@@ -1,3 +1,4 @@
+import inertia from '@inertiajs/core/vite'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
 import tailwindcss from '@tailwindcss/vite'
 import laravel from 'laravel-vite-plugin'
@@ -13,6 +14,7 @@ export default defineConfig({
       ssr: 'resources/js/ssr.ts',
       refresh: true,
     }),
+    inertia('resources/js/viteSsr.ts'),
     svelte(),
     tailwindcss(),
   ],

playgrounds/vue3/resources/js/viteSsr.ts

@@ -0,0 +1,19 @@
+import { createInertiaApp } from '@inertiajs/vue3'
+import type { AppCallback } from '@inertiajs/vue3/server'
+import { renderToString } from '@vue/server-renderer'
+import { createSSRApp, h } from 'vue'
+
+const render: AppCallback = (page) =>
+  createInertiaApp({
+    page,
+    render: renderToString,
+    title: (title) => `${title} - Vue 3 Playground`,
+    resolve: (name) => import(`./Pages/${name}.vue`),
+    setup({ App, props, plugin }) {
+      return createSSRApp({
+        render: () => h(App, props),
+      }).use(plugin)
+    },
+  })
+
+export default render

playgrounds/vue3/vite.config.ts

@@ -1,3 +1,4 @@
+import inertia from '@inertiajs/core/vite'
 import tailwindcss from '@tailwindcss/vite'
 import vue from '@vitejs/plugin-vue'
 import laravel from 'laravel-vite-plugin'
@@ -13,6 +14,7 @@ export default defineConfig({
       ssr: 'resources/js/ssr.ts',
       refresh: true,
     }),
+    inertia('resources/js/viteSsr.ts'),
     vue({
       template: {
         transformAssetUrls: {