getServerSideProps with next-pwa runs multiple times on server

[kruzliak-juraj]

Summary

I have a very simple /pages structure:

/pages
  index.tsx
  [...complexPostSlug].tsx
  /category
    [slug].tsx

When using withPWA alongside getServerSideProps or getInitialProps on all of these pages, simple console.log at the beginning of getServerSideProps reveals that the function inside gets executed twice for the page I am navigated at.

This causes issues because if I have API calls in there, they get executed twice.

None of these happen without next-pwa implemented. Tested also on a fresh install of nextjs, latest 13.0.3 and also on a clean install of the latest version of next v12.

Versions

• next-pwa: 5.6.0
• next: latest

[kruzliak-juraj]

So I found what causes this issue and how to currently prevent it but it will disable some functionality of PWA caching.

Cause of the problem

The issue is caused by two settings of next-pwa - cacheStartUrl and dynamicStartUrl - both of which are by default set to true

cacheStartUrl guarantees that the 'home' html - what is set as basePath - is always cached, no matter which /page user visits. Similarly dynamicStartUrl does something very similar but for any urls set to cache.

The problem happens when caching html that is returned by NextJs this way. When service worker makes to call to get data for example https://nextjs.example.com/ in order to save it to cache, it will make a new call for the url, which will trigger NextJs getServerSideProps because it thinks that some user is requesting the page. Because getServerSideProps gets triggered, all api calls and any functions inside it will get triggered as well, causing duplicate API call on visit. This is even more amplified with dynamicStartUrl.

Quick solution

With both cacheStartUrl and dynamicStartUrl set to false, the issue is not present.

The flow of the issue:

• user visits / - homepage
• request on server is made to return index page
• getServerSideProps gets triggered
• page loads
• service worker registers
• service worker wants to:
  • cache start url - homepage / - because cacheStartUrl is default true
  • cache any dynamic url because dynamicStartUrl is defuatl true - in this case of default settings, this is again homepage /
• service worker sends request for homepage / twice, once for cacheStartUrl and once for dynamicStartUrl
• both of these request arrive to the server, which thinks that user is making request for index page
• getServerSideProps gets triggered twice, again

Possible solutions

@shadowwalker I am not sure if this is possible to fix on side of your library or if this is for nextJs Team or if it is even fixable.

Ideally, in a case when user visits homepage /, service worker would not request the index from server again, but used the one that came with the original request. This might cause some issues with users that do not have SW registered yet thou...

The least thing I would like this library to do is add some information about this to README. Something like "usage with getServerSideProps and description underneath.

[rodrigonzalz]

Had to revert back to NextJS 12 because of this issue.

It is causing issues with next-18next where application loses translation when navigating between pages (or just refreshing on same page). I had to chose between disabling PWA entirely or revert NextJS.

Tried setting cacheStartUrl and dynamicStartUrl as false like @kruzliak-juraj suggested, but that didn't work in my case.

[bernatvadell]

Had to revert back to NextJS 12 because of this issue.

It is causing issues with next-18next where application loses translation when navigating between pages (or just refreshing on same page). I had to chose between disabling PWA entirely or revert NextJS.

Tried setting cacheStartUrl and dynamicStartUrl as false like @kruzliak-juraj suggested, but that didn't work in my case.

Did you find any alternative solution? i have the same problem with next-i18next