Setting page caching for SSR #181

matthewp · 2022-04-26T20:32:10Z

matthewp
Apr 26, 2022
Maintainer

Motivation

Cache headers are notoriously difficult to understand. While we should provide low-level access to modify response headers, it would also be nice for a higher-level API for setting cache headers.

Comparison

SvelteKit provides a cache object that can be returned from the load function that looks like this:

cache: {
  "maxage": 300,
  "private": false
}

Next.js provides a revalidate option to set the number of seconds until the document should be refreshed.

Proposal

A Astro.cache() method that can be used in frontmatter to set cache strategies for the current page. The function would be available on page and non-page components, enabling you to set caching in a higher-order component (such as in a layout component).

The following common strategies will be supported. You can use more than on at a time (which is common).

stale-while-revalidate

Use the stale-while-revalidate strategy which serves a cached version for a number of seconds, while revalidating in the background.

---
Astro.cache({
  revalidate: 200
});
---
<html>
  ...
<html>

maxAge

Set the max-age cache-control setting, signifying the number of seconds to cache.

---
Astro.cache({
  maxAge: 200
});
---
<html>
  ...
<html>

public / private

Signifies where a public or private cache should be used. Private caches is for logged in user data.

---
Astro.cache({
  private: true
});
---
<html>
  ...
<html>

immutable

---
Astro.cache({
  immutable: true
});
---
<html>
  ...
<html>

Alternatives

The API Astro.cache could also be named:

Astro.setCache
Astro.setCacheStrategies

Additionally, we could forgo this API entirely and have people set headers manually:

---
Astro.response.headers.set('Cache-Control', 'max-age=604800');
---
<html>
  ...
<html>

MedLeon · 2022-04-28T23:57:27Z

MedLeon
Apr 28, 2022

At first glance I thought this would be be a Cache abstraction on the server. Astro.cache() lead me towards the wrong direction while skimming the page.

Personally I don't think that a higher-level API is needed. But if implemented I personally would recommend going with:
Astro.response.headers.setCache({maxAge: 200, ...})

This would make it 100% clear, that this is a SSR thing and you are only changing the response header and no caching is performed on the server. There even could be an easy error output if no Adapter is mentioned.

3 replies

readonlychild May 2, 2022
Collaborator

I also had a mental idea that Astro SSR would do server-side caching until I read the last piece involving headers.

mental idea: Oh, Astro will run this logic and I can tell it to return the same thing for the next 20 minutes without hitting the database again...

matthewp May 2, 2022
Maintainer Author

If you have a CDN in front of SSR, most of those respect cache headers and indeed would not call your origin server/function for 20 minutes (or whatever you set).

bholmesdev May 3, 2022
Maintainer

I don't think we should augment the web-standard headers object with a setCache function. The goal is the keep request and response 100% stock, with helpers going on the Astro global only. I personally don't see a problem with Astro.setCache(...) over Astro.response.headers.setCache(...) but it could come down to preference!

dearcodes · 2022-05-02T12:57:49Z

dearcodes
May 2, 2022

I don't think this abstraction is needed. Exposing Astro.response.headers being an instance of Headers should give enough flexibility to support all Cache-Control strategies.

5 replies

jamesarosen Feb 25, 2023

How would you set the headers on generated .css and .js files? There aren't routes for those, so I don't know where I would put code to modify Astro.response.headers.

MedLeon Feb 26, 2023

The hosting platform you are building on (Cloudflare, Vercel, Netlify, Node, Deno) most likely has an API for that. (For example in cloudflare you can deploy a _headers file that defines them).
There isn't any abstraction in Astro yet as far as i know.

jamesarosen Feb 26, 2023

They sure do! Proposals like #174 would add some standardization to the Astro community.

jamesarosen Jul 16, 2023

The hosting platform you are building on (Cloudflare, Vercel, Netlify, Node, Deno) most likely has an API for that.

Following up on this: the Node adapter doesn't have any built-in way to do this. The best option there is probably to use it in middleware mode and add a custom Fastify / Hono / Express server around it.

mtimbs Jun 4, 2024

It's also a blunt instrument. Eg the _headers file for cloudflare is a static file. I can't dynamically determine at render time whether to set cache control headers. Just exposing some way to return arbitrary headers with an Astro page would allow me to cache a particular page on a per route basis.

eighty4 · 2023-08-31T18:07:55Z

eighty4
Aug 31, 2023

Is there a cache abstraction for SSR? Curious if it's possible to have a page rendered only once and reserved from the cache + having an eTAG resolved without re-rendering.

4 replies

oemer-aran May 5, 2024

Personally, this is one of the few things missing for me to really ditch Next.js. Revalidation would be such a huge improvement too, as many CMS have API request limits.

bholmesdev May 6, 2024
Maintainer

Hey @eighty4 and @oemer-aran, can you say more about expectations for a cache abstraction? I see there were a few upvoted comments that felt Astro.response.headers offered enough control, which steered us away from implementing this feature.

oemer-aran May 6, 2024

@bholmesdev You are right. An abstraction might not be neccessary. Maybe a dedicated part for ISR and On-Demand Revalidation (independently of Vercel) is what I was actually searching for. Maybe a bit unrelated here.

I saw there were already some efforts to add documentation here withastro/docs#3527, but the PR was closed. ISR + On-Demand Revalidation would be really helpful to serve live data from a CMS that have a API request limit, like Sanity.

eighty4 May 6, 2024

Caching on the server was what I asked about, where cache control headers is specifying how to control the client's browser cache of the web resources.

Web caching with cache control headers work great when you have a page that won't change or change frequently and can be cached on a client for an extended amount of time. eTAGs work for requesting a resource and knowing whether or not the client needs updated HTML based on the eTAG sent to the server. The caching I had in mind was for an SSR build that could be sent to any number of clients, so even if the client hasn't requested the page yet, and doesn't have it cached, when requesting the page, the HTML/CSS/JS is already built and sitting in memory.

oemer-aran · 2024-05-05T21:43:51Z

oemer-aran
May 5, 2024

Is there any progress on this topic? This would be awesome!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Setting page caching for SSR #181

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments 12 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Setting page caching for SSR #181

matthewp Apr 26, 2022 Maintainer

Motivation

Comparison

Proposal

stale-while-revalidate

maxAge

public / private

immutable

Alternatives

Replies: 4 comments · 12 replies

readonlychild May 2, 2022 Collaborator

matthewp May 2, 2022 Maintainer Author

bholmesdev May 3, 2022 Maintainer

bholmesdev May 6, 2024 Maintainer

matthewp
Apr 26, 2022
Maintainer

Replies: 4 comments 12 replies

readonlychild May 2, 2022
Collaborator

matthewp May 2, 2022
Maintainer Author

bholmesdev May 3, 2022
Maintainer

bholmesdev May 6, 2024
Maintainer