setup ssr

.gitignore

@@ -1,3 +1,4 @@
+/bootstrap/ssr
 /node_modules
 /public/build
 /public/hot

eslint.config.js

@@ -23,6 +23,7 @@ export default [
 	},
 	{
 		ignores: [
+			'bootstrap/ssr',
 			'public',
 			'resources/js/helpers/ziggy.*',
 		],

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite dev",
-    "build": "vite build",
+    "build": "vite build && vite build --ssr",
     "check": "php artisan ziggy:generate --types-only && svelte-check --tsconfig ./tsconfig.json --fail-on-warnings",
     "check:watch": "php artisan ziggy:generate --types-only && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "eslint . --max-warnings 0",

resources/js/Components/Images/ResponsiveImage.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { tick, onMount } from 'svelte';
+	import { BROWSER } from 'esm-env';
 	import resizedImageUrl from '@/helpers/resizedImageUrl';
 
 	let {
@@ -23,7 +24,7 @@
 	let element: HTMLImageElement;
 	let mountedAt: number;
 
-	let isHidden = $state(true);
+	let isHidden = $state(BROWSER);
 	let transitionClass = $state(false);
 
 	onMount(() => {

resources/js/browser.ts

@@ -1,4 +1,4 @@
-import { mount } from 'svelte';
+import { mount, hydrate } from 'svelte';
 import { createInertiaApp } from '@inertiajs/svelte';
 import { resolve } from './common';
 
@@ -8,8 +8,13 @@ document.startViewTransition ??= (cb: () => void) => cb();
 createInertiaApp({
 	resolve,
 	setup({ el, App, props }) {
-		// @ts-expect-error
-		mount(App, { target: el, props });
+		if (document.querySelector('[data-server-rendered]')) {
+			// @ts-expect-error
+			hydrate(App, { target: el, props });
+		} else {
+			// @ts-expect-error
+			mount(App, { target: el, props });
+		}
 	},
 	progress: {
 		color: '#ffcc00',

resources/js/ssr.ts

@@ -0,0 +1,5 @@
+import { createInertiaApp } from '@inertiajs/svelte';
+import createServer from '@inertiajs/svelte/server';
+import { resolve } from './common';
+
+createServer((page) => createInertiaApp({ page, resolve }));

vite.config.ts

@@ -7,6 +7,7 @@ export default defineConfig({
 	plugins: [
 		laravel({
 			input: ['resources/js/browser.ts', 'resources/css/style.css'],
+			ssr: 'resources/js/ssr.ts',
 			refresh: true,
 		}),
 		svelte({