Next-pwa: Page caching issue

Created on 3 Jun 2020 · 11Comments · Source: shadowwalker/next-pwa

Hello there,
I have the same issue as https://github.com/shadowwalker/next-pwa/issues/26

Here's the scenario.
I have a home page that uses getServerSideProps to call my API, fetch new posts, and render them. however, when data is changed it still shows the cached version of that page.
Another thing is I parse the request cookies inside getServerSideProps and then render the page based on some cookies. those also have this issue

Still not enough information, is it under dev or prod mode? How do you call your API, do you need > to refresh or call the API again to fetch the latest data?
@shadowwalker

Tested on production when https is present. And when https is not present it works just fine.

Here is my configuration

const path = require("path");
const withPWA = require("next-pwa");

module.exports = withPWA({
  pwa: {
    dest: "public",
    runtimeCaching: [
      {
        urlPattern: /^https:\/\/fonts\.(?:googleapis|gstatic)\.com\/.*/i,
        handler: "CacheFirst",
        options: {
          cacheName: "google-fonts",
          expiration: {
            maxEntries: 4,
            maxAgeSeconds: 365 * 24 * 60 * 60, // 365 days
          },
        },
      },
      {
        urlPattern: /^https:\/\/use\.fontawesome\.com\/releases\/.*/i,
        handler: "CacheFirst",
        options: {
          cacheName: "font-awesome",
          expiration: {
            maxEntries: 1,
            maxAgeSeconds: 365 * 24 * 60 * 60, // 365 days
          },
        },
      },
      {
        urlPattern: /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
        handler: "StaleWhileRevalidate",
        options: {
          cacheName: "static-font-assets",
          expiration: {
            maxEntries: 4,
            maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
          },
        },
      },
      {
        urlPattern: /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
        handler: "StaleWhileRevalidate",
        options: {
          cacheName: "static-image-assets",
          expiration: {
            maxEntries: 64,
            maxAgeSeconds: 24 * 60 * 60, // 24 hours
          },
        },
      },
      {
        urlPattern: /\.(?:js)$/i,
        handler: "NetworkFirst",
        options: {
          cacheName: "static-js-assets",
          expiration: {
            maxEntries: 16,
            maxAgeSeconds: 24 * 60 * 60, // 24 hours
          },
        },
      },
      {
        urlPattern: /\.(?:css|less)$/i,
        handler: "StaleWhileRevalidate",
        options: {
          cacheName: "static-style-assets",
          expiration: {
            maxEntries: 16,
            maxAgeSeconds: 24 * 60 * 60, // 24 hours
          },
        },
      },
      {
        urlPattern: /\.(?:json|xml|csv)$/i,
        handler: "NetworkFirst",
        options: {
          cacheName: "static-data-assets",
          expiration: {
            maxEntries: 16,
            maxAgeSeconds: 24 * 60 * 60, // 24 hours
          },
        },
      },
      {
        urlPattern: /.*/i,
        handler: "NetworkFirst",
        options: {
          cacheName: "others",
          expiration: {
            maxEntries: 16,
            maxAgeSeconds: 24 * 60 * 60, // 24 hours
          },
        },
      },
    ],
  },
  webpack(config) {
    config.resolve.alias["#"] = path.resolve(__dirname, "src");
    return config;
  }
});

done

Source

nikandlv

All 11 comments

The temporary solution that I found working was to completely remove the js matches like so
Which is not ideal imo

const path = require("path");
const withPWA = require("next-pwa");

module.exports = withPWA({
  pwa: {
    dest: "public",
    runtimeCaching: [
      {
        urlPattern: /^https:\/\/fonts\.(?:googleapis|gstatic)\.com\/.*/i,
        handler: "CacheFirst",
        options: {
          cacheName: "google-fonts",
          expiration: {
            maxEntries: 4,
            maxAgeSeconds: 365 * 24 * 60 * 60, // 365 days
          },
        },
      },
      {
        urlPattern: /^https:\/\/use\.fontawesome\.com\/releases\/.*/i,
        handler: "CacheFirst",
        options: {
          cacheName: "font-awesome",
          expiration: {
            maxEntries: 1,
            maxAgeSeconds: 365 * 24 * 60 * 60, // 365 days
          },
        },
      },
      {
        urlPattern: /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
        handler: "StaleWhileRevalidate",
        options: {
          cacheName: "static-font-assets",
          expiration: {
            maxEntries: 4,
            maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
          },
        },
      },
      {
        urlPattern: /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
        handler: "StaleWhileRevalidate",
        options: {
          cacheName: "static-image-assets",
          expiration: {
            maxEntries: 64,
            maxAgeSeconds: 24 * 60 * 60, // 24 hours
          },
        },
      },
      {
        urlPattern: /\.(?:css|less)$/i,
        handler: "StaleWhileRevalidate",
        options: {
          cacheName: "static-style-assets",
          expiration: {
            maxEntries: 16,
            maxAgeSeconds: 24 * 60 * 60, // 24 hours
          },
        },
      },
      {
        urlPattern: /\.(?:json|xml|csv)$/i,
        handler: "NetworkFirst",
        options: {
          cacheName: "static-data-assets",
          expiration: {
            maxEntries: 16,
            maxAgeSeconds: 24 * 60 * 60, // 24 hours
          },
        },
      },
    ],
  },
  webpack(config) {
    config.resolve.alias["#"] = path.resolve(__dirname, "src");
    return config;
  }
});

nikandlv on 3 Jun 2020

Same here, thanks @nikandlv for the temporary fix!
I didnt tested with http, but I have the same case passing a cookie to getServerSideProps and then render page,
@shadowwalker thanks for this awesome lib !!

danibram on 11 Jun 2020

👍1

@danibram
The issue still persisted for me.
Adding

    exclude: [/\.js$/],

Finally fixed the issue for me

nikandlv on 12 Jun 2020

👍1

I make some tests, and also putting js files as NetworkFirst I have the issue. Finally I put the exclude from @nikandlv comment and the issue gone. Maybe its not a module issue, Im newie using PWA and cache...
Thanks @nikandlv again!
I havent much time, but we can create a basic repository with the problem, will help us to understand if its module issue or cache misconfiguration

danibram on 18 Jun 2020

🎉1

It would be nice if someone could help to create a simple error reproduce repository.

shadowwalker on 20 Jun 2020

This may very well be related to #66 .

kdelmonte on 20 Jun 2020

Of course, it is related to the workbox and that's why exclude fixes the issue. the thing is, it is automatically caching those js files in _next directory even when caching js files is not present

nikandlv on 20 Jun 2020

Hey @nikandlv , maybe you could take a look in this comment https://github.com/shadowwalker/next-pwa/issues/69#issuecomment-646834580

Basically, you could try to use the additionalManifestEntries property to the next-pwa configuratio, and try to exclude the files inside the _next directory.