Caching on CDN (CloudFlare) for guests visitors

jaigupta

Hello,

We are already using Cloudflare and it is working great. We wanted to cache all pages for guests as well on edge with a low TTL (say one hour).

We gave it a try. LCP was redcuded from 1.1s to 0.5s. However, we encountered issues while users were trying to login. It appears there is some issue with csrf tokens or cookies. Any thoughts?

luceos

jaigupta yeah that doesn't work because the cache layer cannot distinguish between guests and members. You'd have to write an extension that injects information in the header to work with that information.

Braden

luceos wow you also aware of that luceos! I thought you didn't know. I am happy! Yes the lcp can go way down for better results but login is a problem. Any expectations of this extension being created? 😉

clarkwinkelmann

@rafaucau already did the work for his Litespeed cache extension https://discuss.flarum.org/d/29475-litespeed-cache-for-flarum

That extension is probably a very good starting point if someone wants to implement cache with a different system. Maybe the extension can even be used without change if the alternate system can read litespeed headers.

But yeah the two biggest challenges are probably finding a way to distinguish connected vs non-connected requests, as well as having a way to load the CSRF token when attempting any dynamic action from a cached page.

Flarum doesn't have built-in mechanism for either of those, and it's not really planned to change it at the moment. One reason we probably can't implement this fully in Flarum itself is extensions, because some extensions will depend on data that is preloaded but not cached, and it's super complicated to deal with this in a way that will work for all use cases. Extensions might also offer guest dynamic actions that aren't dependent on the user being logged in.

rafaucau

clarkwinkelmann Maybe the extension can even be used without change if the alternate system can read litespeed headers.

This extension also sets the flarum_lscache_vary cookie if the user is logged in.
This would allow this solution to be used: https://community.cloudflare.com/t/how-to-disable-cache-for-logged-in-users-on-dynamic-wordpress-site/142361/2

The CF Worker code could be something like this:

async function noCacheOnCookie(request) {
  // Determine which group this request is in.
  const cookie = request.headers.get('Cookie')
  const cacheSeconds = 604800
  if (cookie && (cookie.includes(`flarum_lscache_vary` || cookie.includes(`flarum_remember`))) {
    const bustedRequest = new Request(request, { cf: { cacheTtl: -1 } })
    const response = await fetch(bustedRequest)

    return new Response(response.body, {
      status: response.status,
      statusText: response.statusText,
      headers: response.headers
    })
  } else {
    // Edge Cache for 7 days
    return fetch(new Request(request, { cf: { cacheTtl: cacheSeconds } }))
  }
}