Make Cookies available on SSR.

Describe the problem

While coding on the server part of the project, you have access to an object of type Cookies in the RequestEvent. However, when coding on the SSR part, this object does not exist plus you can’t access the document object in the browser.

Describe the proposed solution

I believe while the request is being SSR, there should still be access to the request’s headers so, my proposal is to also allow the Cookies object to exist in the load functions.

Obviosuly this will break the load functions when they are CSR so the solution should be some sort of polyfill that transparently integrates with either the request’s headers or the document.cookie in the browser.

Alternatives considered

I’m afraid I can’t think of an alternative at this moment as in the SSR zone, there is no access to neither the Cookies object nor the document object.

Perhaps the only “solution” would be to not use cookies and return the data directly instead? But this would require the client code to manually send it back on every request.

Importance

would make my life easier

Additional Information

No response

[carlosV2]

Oh! That’s very interesting! I didn’t know I could force the run of the layouts by using url.pathname. From the documentation, I though that could only be accomplished with depends and invalidate.

I will revert from using a cookie and I’ll use a variable passed from the server.

Imho, I still think allowing for some degree of cookie access at SSR would be beneficial (it could just be allowing to access the request headers, for example) but, for my case, it is no longer required.

Thanks so much for your help @dummdidumm!

[dummdidumm]

I’m not sure I follow - so your problem is not actually the cookie, but using the cookie to achieve something specific? Poking-in-the-dark-suggestions:

• you can attach something to locals in hooks.server.ts which all +layout/page.server.ts files can access
• you can add a dependency on url in your root +layout.server.ts so it runs on every page change: export function load ({ url }) { url.pathname; ... }