The project, i'm corrently working on, uses Next.js. Pages are generating using SSG with revalidation. Users often experience long loading times for pages with a lot of content. As i understand, Next.js, by default, updates the cache if the revalidation interval has expired and then, based on new cached data (fetched by getStaticProps from api, for example), returns new generated page, because of this, the loading time is long for particularly large pages.
How we can see on screenshot from Next.js docs, request to obtain a page always comes down to a preliminary synchronous cache update, and only then to returning page. Official Next.js docs: Caching
The question is, is it possible to return a page with old, previously cached content, and only then change the new cache, for example, in the background, or in some other way?
A potential solution of problem that I'm currently thinking about would be to add a Service Worker as another caching layer that would intercept the receipt of an expired page, return the page with data from the old cache, and in the background update the cache so, the next page request will be with data from updated cache. In this case, the user will not have to wait for a long time to update the cache and generate a new page. Instead, it will receive the version that is available and then update the cache in the background.