Best practices on caching Frontity

🙋Get Help
1

Here’s a question for the Frontity/React experts and/or DevOps in the community:

What are the best practices for caching your Frontity website?

As a PHP and WordPress developer I’m well aware of proper caching, both on the server and client, and I know how to set it up. And one of my favorite server stacks is:

  • Nginx
  • Varnish
  • Apache
  • PHP-FPM
  • Opcache
  • Memcached
  • Redis

And in combination with browser cache (setting cache headers), a CDN (either through Nginx or externally) and external tools like Cloudflare the client will have a lightning fast website.

However Frontity works completely different than WordPress or PHP, and since a lot of logic is handled on the client it’s not possible to handle the cache on the server (other than the REST requests to WordPress). And since none of tools above (other than Nginx) are suitable for caching static files (like the Javascripts which Frontity/React generates) I am wondering if their are other methods available to increase the speed of Frontity projects for the visitors. Not to mention that Frontity itself does not have any internal caching or packages which implement it (yet?).

I can imagine that for example implementing Redis into Frontity to cache the fetch results could be done, but I’m sure there are other, less technical, solutions.

2

Hi @Johan

There’s this documentation section that tries to answer that question (Best practices on caching Frontity)

Also, depending on the Frontity mode used, the caching strategy should be faced diferently:

Hope this helps!

3

Thanks @juanma for the link.

I did read it before but unfortunately it only talks about client-side caching (cache headers and CDN), and of course caching WordPress.

However Frontity uses SSR, meaning the server is handling a lot of logic before sending it to the client. And this is the part which I’m wondering about.
So Memcache(d) or Redis would be viable solution to speed this, or a more simpler memory cache when none available.

In short; when a request comes in it will reach beforeSSR, check cache, and if it hits go directly to afterSSR without rendering.
See: 6. Actions - Frontity Docs

1 Like