Next-pwa / Nextjs calling getServerSideProps twice

[Jeltjo]

Summary

NextJS with next-pwa is calling the getServerSideProps twice for fetching page content. When I set the config dynamicStartUrl: false, then it does not happen. But then I have certain state problems when logged in.

Versions

• next-pwa: 5.2.21
• next: 10.2.0

How To Reproduce

Steps to reproduce the behavior:

https://github.com/Jeltjo/next-pwa-double-fetching

Build and start. If you go to the homepage, you will see two console.log of fetch page

Expected Behaviors

I would expect it only to be called once.

[kennethstarkrl]

+1 to this. With moderate sized apps this bug takes a rather large performance hit.

[jin-xu-thirdbridge]

Same issue here. I'm using both the latest version of next and next-pwa for currently. And the interesting thing is that I check it with the old versions of those libraries (from one existing working project), this issue no longer exist:

• next: ^10.1.3
• next-pwa: 5.2.5

I wonder if this behavior is a feature or bug? Any one can help?

[PlopTheReal]

Bump.

[Jeltjo]

Any update on this issue? Still occurs with version 5.5.4

[wuriyanto48]

we face the same issue, is there a solution for this problem? thank you

[pieterdnz]

Would be nice to see a fix for this issue

[dariusrosendahl]

+1. This might become a real performance issue.

[steef17]

After some digging, it turned out I have the same problem. Could be an issue.

[pret77]

Also have this issue, hope it will be fixed in a future version.

[shibuime]

Same here

[harteros]

I had the same issue. After some digging, I found that the cause of the issue was with the runtimeCaching variable in the next-pwa config options.

My solution works for the following versions:

next: 13.0.0 next-pwa: 5.6.0 next-auth: 4.15.0

In order to stop the double request as well as to avoid authentication problems (which are caused due to caching pages), I modified the next.config.js file as follows:

//next.config.js

const cache = require('./cache')
const withPWA = require("next-pwa")({
    dest: "public",
    register: true,
    skipWaiting: true,
    runtimeCaching: cache,
    cacheStartUrl: false,
    dynamicStartUrl: false,
});

const nextConfig = withPWA({
    reactStrictMode: true,
    swcMinify: true,
});


module.exports = nextConfig

The cache file required const cache = require('./cache') is the cache.js file from the repo which I copied inside my app and changed the following cache entry:

 {
        urlPattern: /\/_next\/data\/.+\/.+\.json$/i,
        handler: 'NetworkFirst', //changed from 'StaleWhileRevalidate'
        options: {
            cacheName: 'next-data',
            expiration: {
                maxEntries: 32,
                maxAgeSeconds: 24 * 60 * 60 // 24 hours
            }
        }
    }