How to cache nextjs pages using cloudflare for non logged in users only using cookie set or not
is it possible serve cache pages from cloudflare if a cookie is set or not? I am trying to serve pages from cache if user is not logged in. We add a cookie if not logged in and another cookie if logged in. Problem is, after caching once, it always serve from the cache and it doesn't respect other request.
5 Replies
A Cache Rule (and most other rules) can also match on any request Cookie. Contains/Does Not Contain, and then cache or bypass cache.
https://developers.cloudflare.com/cache/how-to/cache-rules/settings/
Cloudflare Docs
Available settings | Cloudflare Cache (CDN) docs
These are the settings that you can configure when creating a cache rule.
Here is the reply I got from the AI Chat Assistant at hy-rag.com
To cache Next.js pages for non-logged-in users using Cloudflare, you can utilize cookies to determine whether a user is logged in or not. Here's a general approach:
1. Set a Cookie for Logged-in Users: Ensure that when a user logs in, a specific cookie is set (e.g.,
loggedIn=true).
2. Cloudflare Workers for Cookie Parsing: Use Cloudflare Workers to parse cookies and determine if the loggedIn cookie is present. If the cookie is absent, the user is considered not logged in, and the page can be cached.
3. Cache Configuration: Configure your caching strategy in Cloudflare to cache pages only when the loggedIn cookie is not present. This can be done by setting cache rules in your Cloudflare Worker script.
4. Next.js Caching: By default, Next.js with Cloudflare Pages caches all fetch() subrequests. You can manage this caching behavior using Cloudflare's Cache API or Workers KV for more advanced scenarios.
For more detailed guidance on caching with Cloudflare and Next.js, you can refer to the following resources:
- Caching and data revalidation in your Next.js app
- Cookie parsing with Cloudflare Workers
These documents will help you set up the caching logic and manage cookies effectively.Cloudflare Docs
Caching | Cloudflare Pages docs
@cloudflare/next-on-pages ↗ supports caching ↗ and revalidating ↗ data returned by subrequests you make in your app by calling fetch().
Cloudflare Docs
Cookie parsing | Cloudflare Workers docs
Given the cookie name, get the value of a cookie. You can also use cookies for A/B testing.
Doesn't work. Issue is once a page or url is cached, cloudflare use that response and header and never check for new response and header. Actually to get a new cookie it needs to hit the origin but since cloudflare will always serve from cache so next requests will never reach to origin and thus cookie also never gets set. So technically its impossible to render logically
Which of the above replies doesn't work?
>Actually to get a new cookie it needs to hit the origin
The login process should never be cached, and that's what should set the cookie.
What kind of "hit the origin" do you need in order to set the login cookie?