Access cookies in Svelte files while server-side rendering

[vekunz]

Hi, in our web app, we have layout elements, e.g., a sidebar, where, for example, the width can be changed by the user. We have to save these settings in the browser of the user. A central user-settings-backend is not possible at the moment (and wouldn't solve our current problem either).
These layout elements are created by a central team and are used by several other teams. Currently, we save the user settings in the localStorage, but this doesn't work with server-side rendering. Therefore, if the user changes the default settings, the UI flickers right after the page loads.
The only solution for our current problem is to save the settings in a cookie. We can set the cookie in the browser and read it in the backend for server-side rendering. But for this to work, the teams that implement the layout elements have to manually read the cookie in the +layout.server.ts file and funnel it through to the Svelte files of the layout elements.

Our idea was to see if it is possible that SvelteKit provides the cookies directly within the Svelte files. In this case, we wouldn't need to funnel the cookies from the server files into the Svelte files. It would be much easier for the central team and the consuming teams, as they don't need any special code for the layout elements to work properly.

[brunnerh]

If you set the data as a context in the root layout, you should not need to add much else and be able to read the data from said context in any other component.

[vekunz]

This wouldn't solve our case. How does the root layout get the data while server-side rendering? It would still be necessary to involve some backend code, what we are trying to avoid.

[brunnerh]

There is no way to not invoke backend code. During SSR, the cookie has to come from the request, anything involving it is by definition backend code.

[vekunz]

Yes, that was my intention with this discussion. Currently, it is not possible, but maybe it can be added to SvelteKit.

[filiabel]

You could to this with a remote function, like in this example: https://svelte.dev/docs/kit/remote-functions#Using-getRequestEvent
They are amazing, but be aware that they still are experimental, as mentioned in the first paragraph.

import { getRequestEvent, query } from '$app/server';

// this query could be called from multiple places, but
// the function will only run once per request
const getLayoutElementSetting = query(() => {
	const { cookies } = getRequestEvent();

	return cookies.get('layout_element_setting');
});

[vekunz]

This would still involve using some backend code. But this is exactly what we are trying to avoid.

[filiabel]

Ah, I thought this was more about avoiding prop drilling 👍

[vekunz]

If the SvelteKit maintainers don't want an "access cookies from Svelte files" solution for SSR, then we would need a backend solution. Maybe a remote function could be a good solution for this.