bug-report-sveltekit-ssr-csr's Introduction

Bug with `adapter-static` and `+page.server.ts` / `+layout.server.ts`

The goal of this demo is to obtain a cookie named locale, either in the server or the client, and pass it to the page while supporting both @sveltejs/adapter-node and @sveltejs/adapter-static.

+page.server.ts

import type { PageServerLoad } from './$types';

export const load = (async ({ cookies }) => {
	const locale = cookies.get('locale');
	return { locale };
}) satisfies PageServerLoad;

+page.ts

import { browser } from '$app/environment';
import cookie from 'cookie';
import type { PageLoad } from './$types';

export const load = (({ data }) => {
	if (browser)
		return {
			locale: cookie.parse(document.cookie)['locale'],
			from: 'browser'
		};

	return {
		locale: data.locale,
		from: 'server'
	};
}) satisfies PageLoad;

+page.svelte

<script lang="ts">
	import cookie from 'cookie';
	import type { PageData } from './$types';

	export let data: PageData;
</script>

<p><code>locale</code> cookie: <code>{data.locale}</code></p>

<p><code>locale</code> obtained from: <strong>{data.from}</strong></p>

Run the demo

git clone https://github.com/NatoBoram/bug-report-sveltekit-ssr-csr.git
cd bug-report-sveltekit-ssr-csr
pnpm i

# SSR - It works
pnpm dev

# PWA - It doesn't work
pnpm build
pnpx http-server ./build

# PWA - How it should work
find src/routes -name '+*.server.*' -delete
pnpm build
http-server ./build
git checkout -- 'src/routes/+*.server.*'

Recommend Projects