Support for SSR caching

[niklaswolf]

This is a open question to everyone and especially the team: what's your take on potentially implementing a SSR-cache?
To be clear: I don't think this should be implemented by default, but rather an option to use it (maybe with a guide in the docs).
I saw that there is a nuxt-module from vuestorefront, which provides ssr-caching functionality as a nuxt-module: https://docs.vuestorefront.io/v2/performance/ssr-cache.html

Do you think this could be used with shopware-pwa, especially for heavy routes like CMS, categories and product-detail pages? What would be the challenges in your point of view?

I'm not quite sure if changes have to be made how the sw-context is handled, because if you'd cache the routes mentioned right now, every client would get the same context, am I right? Beyond that I don't see any obvious obstacles, but I could be wrong of course...

[niklaswolf]

Another idea that came up while discussing the problem with @shyim during SCUC22 is to use and maybe adapt the current varnish implementation for the storefront. You would use the same cache-tags in the PWA that are used in Shopware itself, but that shouldn't be a big problem as they are defined and the list/structure can be provided.
What's not entirely clear to me right now is how to pass the cache-tags in the HTML to Varnish (I assume you could do that via a header) and how to configure Varnish to use them, but that's just me not having experience with Varnish.

https://developer.shopware.com/docs/guides/hosting/infrastructure/reverse-http-cache

EDIT:
Its now clear to me how this is done in the shopware storefront. There is an additional Redis involved which provides basically a mapping from cache tags to urls, so which urls contain which cache tags. If a cache tag gets invalidated, the redis is queried first for the urls to then send a BAN-request to varnish for every url that should be invalidated.

I think there would also another possibilty to do it for the PWA: on every SSR the following could happen

1. Aggregate the cache tags set in the application (the easiest would be to use the same cache-tags as shopware itself)
2. set a HTTP header X-Cache-Tags containing all the cache tags for this url

Varnish config could then look like it's done e.g. in Drupal. The BAN-Request would then be made with a header too containing the cache tags that should be invalidated.
https://www.drupal.org/docs/drupal-apis/cache-api/cache-tags-varnish#update-varnish-vcl
The header could also additionally be removed from the varnish response to save data, because the header could get quite big on urls containing many cache-tags.

[meeshoogendoorn]

I know there is already a module for vue storefront. Maybe u could look into this module and see how it's done there.

VSF Varnish Module