Use page endpoints' headers if load function isn't present in page

[hdoro]

Describe the problem

Currently, returning a headers value from page endpoints doesn't change the page's HTML response headers. For example, if you want to pass a "Cache-Control" header to cache your pages, you must either:

• use the load function's cache output, which doesn't support s-max-age or stale-while-revalidate and requires adding the load function that wouldn't otherwise be needed. This defeats page endpoints' purpose of removing boilerplate.
• add a handle hook that sets cache headers for all pages based on their URL. This is limited in that headers can't access the props passed by page endpoints to determine truly dynamic header values (such as setting a higher cache duration on long-published content)

Describe the proposed solution

When pages don't have a load function, it'd be ideal if they inherited the headers from their corresponding page endpoint. Perhaps we should make it so even when the load function exists (unless it overwrites headers) as it'd make documentation simpler and more straightforward.

Alternatives considered

Another possible solution is to allow the handle hook to access data from page endpoints in the response value of resolve(event).

Importance

would make my life easier

Additional Information

I'm learning about cache-control headers and am not an expert on HTTP in general (learning about the platform with SvelteKit!), so I may be overlooking something.

I'm a bit frustrated that I thought my website was being cached for the 6 months it's been live, when actually I was only caching the endpoint data, not the full page. And I'm not even sure what's the impact of caching the endpoint data as I don't think they're called by themselves.

In general, this whole data fetching process feels very confusing and I'm afraid page endpoints made it even more so 😔

[kristjanmar]

I agree with this suggestion. I think caching should also have its own chapter in the documentation, it's very hard to find information on it currently.

That said, I have been adding cache-control headers via hooks.js. The headers get added to both the endpoint and the html page.

You can see how I do it here: https://github.com/stockanalysisdev/stock-analysis-sveltekit/blob/main/src/hooks.js

When people navigate client-side then the endpoint gets called directly, so that's why it makes sense to also cache the endpoint.

[Rich-Harris]

Closed via #5778 — +page.server.js and +page.js files can now call setHeaders, and the headers will be added to the page response