Simple ssr data restoring in SvelteKit #3391

0x221A · 2023-09-27T05:08:50Z

0x221A
Sep 27, 2023

This is an approach I'm using to restore the data from the server. By using this approach you don't need to pass initial data to every query store in your page or layout route.

// lib/urql.ts

import { ssrExchange, Client, fetchExchange } from '@urql/svelte'

import { browser } from '$app/environment'

export const ssr = ssrExchange({ isClient: browser, initialState: browser ? window._urql_data : undefined })

export const createClient = (fetch: WindowOrWorkerGlobalScope['fetch']) => 
	new Client({ fetch, url: '...', exchanges: [ssr, fetchExchange] })

// hooks.server.ts

import serialize from 'serialize-javascript'

import { ssr, createClient } from '$lib/urql'

export const handle = (({ event, resolve }) => {
	event.locals.urql = createClient(event.fetch)
	return resolve(event, {
		transformPageChunk: ({ html }) => {
			const data = serialize(ssr.extractData())
			return html.replace('%urql.data%', `<script>window._urql_data=window._urql_data||{};window._urql_data=${data}</script>`)
		}
	})
}) satisfies Handle

<!-- app.html -->

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
		<meta name="viewport" content="width=device-width" />
		%sveltekit.head%
	</head>
	<body>
		<div style="display: contents">%sveltekit.body% %urql.data%</div>
	</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Simple ssr data restoring in SvelteKit #3391

{{title}}

Replies: 0 comments

Select a reply

Simple ssr data restoring in SvelteKit #3391

0x221A Sep 27, 2023

Replies: 0 comments

0x221A
Sep 27, 2023