How can I get "store" value used in SSR into CSR?

[myyrakle]

In order to implement a fast and beautiful page, the page was implemented as follows.

// +page.ts
export const csr = true;
export const ssr = true;

// +page.server.ts
import type { RequestEvent } from '@sveltejs/kit';
import { getUserInfo } from '../lib/api/user/get-user-info';
import { accessToken, isLogin, myUserInfo } from '../lib/store';

export async function load(page: RequestEvent) {
	const access_token = page.cookies.get('access_token');

	if (access_token) {
		accessToken.set(access_token);

		try {
			const userInfoResponse = await getUserInfo(access_token);
			myUserInfo.set({ ...userInfoResponse });
			isLogin.set(true);
		} catch (error) {
			console.error(error);
		}
	}

	console.log(page);

	return {
		props: {
			access_token
		}
	};
}

// store/index.ts
import { writable, type Writable } from 'svelte/store';
import type { User } from '../types/User';

export let isLoading: Writable<boolean> = writable(true);

export let accessToken: Writable<string | null> = writable(null);

export let myUserInfo: Writable<User | null> = writable(null);

export let isLogin: Writable<boolean> = writable(false);

The SSR itself runs perfectly, but there is a problem that the data at the time of the SSR disappears as the CSR runs.

1. If CSR is removed, browser interaction becomes impossible,
2. When data fetching is done again in CSR, "blinking" occurs in between.

The ideal solution, I think, is to use a method called "hydrating" to import the store created in the SSR into the CSR.

What do you think would be a good way to solve this?

[teemingc]

This page might be a helpful read https://kit.svelte.dev/docs/state-management#no-side-effects-in-load

[myyrakle]

Oh thank you!
I solved the problem thanks to you.

I removed the store and used the method to get $page.data.