How to cache and serve different data to different users using Blitz?

Question

What strategy should I take when I want to serve different data to different users with (Blitz) cache? Logged in users get one set of prices (that can vary depending on their price group memberships), users that are not logged in don't see prices at all.

I read and implemented a test of Dynamic Content as described in the Blitz Cache documentation, and the result looks promising. Lighthouse says between 97-99 on performance with a 0,6s Fist Contentful Paint, serving gzipped caches from Blitz Storage on the Hyperlane VPS (I will test Cloudflare too).

The question is rather about the potential user experience of having the prices ajaxed into the body of the html document. I've never seen any site do it this way before. Have a look at the result. Pay attention to how the prices appear and the related network events on the right:

https://vimeo.com/507996281/0d16df559d

(I realize that the defaultPrice is passed as a parameter to the productPrice template, and therefore the price is exposed - I've later replaced it with an encrypted string using the free plugin Cryptographer)

Answer 1

It looks like your approach is working rather well, so I'll assume you are simply asking for an alternative approach.

To make 1 AJAX request rather than the 80 or so that the page is currently making, I would use Blitz's dynamic content feature to load all of the products in one single template. In that template you can check whether the user is logged in, and hence whether to the display the prices or not, as you are already doing.

An alternative alternative would be to use Sprig, see the dynamic content recipe. Sprig gives you more control over how things are dynamically loaded. You could even tweak the way products are loaded to create a smoother user experience. For example, cache the products without the prices (the default for non-logged in users) and on page load, use Sprig to re-render the component with or without the prices (based on the user type).