[✨] How to load dynamic configuration and settings for both server-side and client-side?

[hosseinitabar]

[✨] How to load dynamic configuration and settings for both server-side and client-side?

[wmertens]

You can make this as follows. It would be great if you contribute a cookbook entry that explains this in a way that others at your company and elsewhere understand it easily.

The idea is that during SSR, you store certain data that never changes at the root level, and since root never rerenders, it will never need to be loaded again on the client.

• Define a getClient() function that reads the data from disk
• Make something like this

export const clientCtx = createContextId<Signal<ClientConfig>>('c')

export const useClientProvider = () => {
	const loc = useLocation()
	const clientS = useSignal<ClientConfig>({theme: {}} as ClientConfig)
	useContextProvider(clientCtx, clientS)

	useTask$(async () => {
		console.log('get client')
		clientS.value = await getClient(loc.url.hostname)
		console.log('got client')
	})
}
const o = c => console.log(c) || c
// Note, this removes reactivity but the value is static so it's fine
export const useClient = () => o(useContext(clientCtx).value)

• In your root layout, add useClientProvider()
• Anywhere you need the data, add const client = useClient()

If you need to use the client info in some server function, use the getClient function. You can also cache the result in module scope.