How to configure Next.js' SSR-Caching to work with Nginx? - reactjs

Question

Good day, everyone!
There is an "official" Next.js example demonstrating a possible implementation of SSR-Caching.
upd: I should've been more precise. I scrolled through the commit history of the example - it turned out the technique had been drastically different up until a recent commit by #leerob. Take a look at the current version and compare it with what it used to be before the recent commit. Apparently, the older version was meant to work with a custom node.js server, whereas the current one takes advantage of the inbuilt Next.js methods. In this question I refer specifically to the version by #leerob.
Here's the "raison d'etre", as it's stated in one of its commits:
React Server Side rendering is very costly and takes a lot of server's CPU power for that. One of the best solutions for this problem is cache already rendered pages.
How exactly is it supposed to be used? Does it work in conjunction with CDN, does it also work with proxy-caching, like Nginx?
My question is this:
Is there a right way to configure the SSR-Caching technique to work with Nginx's caching?
I'd come up with a somewhat workable solution, but later realized that it doesn't behave as I expected.
Here's the deal:
When there is a CACHE HIT, that is to say, Nginx sent previously rendered page from its cache to the client, the app gets reloaded at the client side. There's a couple of problems with that:
it breaks 'the flow' of SPA (it seems to lack the continuity in rendering pages because of the page's reloading);
it makes the client to load unnecessary data with each request;
the reloading part causes the app to lose its state.
N.B.: you never get this behavior when using SSR (getServerSideProps) only (no proxy-caching).
Here is a schematic example of my current workflow:
The client asks for a resource.
Is it Cached?
YES: Nginx returns a cached page along with accompanying scripts (for that purpose you
have to proxy_pass to '/_next/static')
NO: Nginx proxies the request down to the Next.js, then the page is rendered, cached at the Nginx level and finally reaches the client
Example of Nginx config:
location /products {
### these lines are crucial
proxy_pass http://next:3000;
proxy_cache my_cache;
###
proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
proxy_cache_lock on;
proxy_cache_background_update on;
proxy_ignore_headers "Set-Cookie";
add_header X-Cache-Status $upstream_cache_status;
proxy_hide_header X-Powered-By;
}
###static assets
location /_next/static {
proxy_pass http://next:3000;
}
The caching itself works, but how do you make it work properly, without reloading the page?
Are there any workarounds? Or is the described behavior inevitable?
Any help would be much appreciated