search

netlify / next-runtime

The Next.js Runtime allows Next.js to run on Netlify with zero configuration
https://www.npmjs.com/package/@netlify/plugin-nextjs
641 stars 85 forks source link

[Bug]: ISR not working when my web app deployed #1035

Closed nwleedev closed 2 years ago

nwleedev commented 2 years ago

Summary

Description

Link

This web application is built in Next.js version 12, @netlify/plugin-nextjs version 4.1.0, and next-pwa. The package next-pwa is being used to generate Progressive Web Application. The service worker is registered when my Next.js app being built or deployed in Netlify.

In the function, getStaticSiteProps, The data is fetched from the json files in AWS S3, Cloudfront is now applied, then the api url is like, https://xxxxxxxxxxxxxxx.cloudfront.net/api/data.json

So I set the revalidate time to 10 minutes, but the page doesn't change the content after more than 10 minutes.

However, when i build this app in my local machine with commands "next build & next start", the updated contents is displayed normally.

I have thought the ISR is fully supported. does the service worker cause this problem?

The Code

next.config.js

const withPWA = require('next-pwa');
const runtimeCaching = require('next-pwa/cache');
/** @type {import('next').NextConfig} */

module.exports = withPWA({
  reactStrictMode: true,
  pwa: {
    dest: 'public',
    register: true,
    skipWaiting: true,
    runtimeCaching,
    buildExcludes: [/middleware-manifest.json$/],
  },
});

Dependencies package.json

{
  "dependencies": {
    "axios": "^0.24.0",
    "next": "12.0.4",
    "next-pwa": "^5.4.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@netlify/plugin-nextjs": "^4.1.0",
    "@types/node": "16.11.10",
    "@types/react": "17.0.37",
    "autoprefixer": "^10.4.0",
    "eslint": "7",
    "eslint-config-next": "12.0.4",
    "postcss": "^8.4.3",
    "tailwindcss": "^2.2.19",
    "typescript": "4.5.2"
  }
}

Steps to reproduce

In Summary

A link to a reproduction repository

https://github.com/quavious/too-much-news

Plugin version

4.1.0

More information about your build

What OS are you using?

Windows

Your netlify.toml file

`netlify.toml` ```toml [build] command = "npm run build" publish = ".next" [[plugins]] package = "@netlify/plugin-nextjs" ```

Your public/_redirects file

`_redirects` ```toml # Paste content of your `_redirects` file here ```

Your next.config.js file

`next.config.js` ```Javascript const withPWA = require('next-pwa'); const runtimeCaching = require('next-pwa/cache'); /** @type {import('next').NextConfig} */ module.exports = withPWA({ reactStrictMode: true, pwa: { dest: 'public', register: true, skipWaiting: true, runtimeCaching, buildExcludes: [/middleware-manifest.json$/], }, }); ```

Builds logs (or link to your logs)

Build logs ``` 10:38:35 PM: ──────────────────────────────────────────────────────────────── 10:38:35 PM: Netlify Build 10:38:35 PM: ──────────────────────────────────────────────────────────────── 10:38:35 PM: ​ 10:38:35 PM: ❯ Version 10:38:35 PM: @netlify/build 25.0.3 10:38:35 PM: ​ 10:38:35 PM: ❯ Flags 10:38:35 PM: baseRelDir: true 10:38:35 PM: buildId: 61bde4367f2fcf000840a76e 10:38:35 PM: deployId: 61bde4367f2fcf000840a770 10:38:35 PM: ​ 10:38:35 PM: ❯ Current directory 10:38:35 PM: /opt/build/repo 10:38:35 PM: ​ 10:38:35 PM: ❯ Config file 10:38:35 PM: /opt/build/repo/netlify.toml 10:38:35 PM: ​ 10:38:35 PM: ❯ Context 10:38:35 PM: production 10:38:35 PM: ​ 10:38:35 PM: ❯ Loading plugins 10:38:35 PM: - @netlify/plugin-nextjs@4.1.0 from netlify.toml and package.json 10:38:36 PM: ​ 10:38:36 PM: ──────────────────────────────────────────────────────────────── 10:38:36 PM: 1. @netlify/plugin-nextjs (onPreBuild event) 10:38:36 PM: ──────────────────────────────────────────────────────────────── 10:38:36 PM: ​ 10:38:37 PM: Next.js cache restored. 10:38:37 PM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed. 10:38:37 PM: ​ 10:38:37 PM: (@netlify/plugin-nextjs onPreBuild completed in 109ms) 10:38:37 PM: ​ 10:38:37 PM: ──────────────────────────────────────────────────────────────── 10:38:37 PM: 2. build.command from netlify.toml 10:38:37 PM: ──────────────────────────────────────────────────────────────── 10:38:37 PM: ​ 10:38:37 PM: $ npm run build 10:38:37 PM: > build 10:38:37 PM: > next build 10:38:38 PM: info - Checking validity of types... 10:38:43 PM: info - Creating an optimized production build... 10:38:43 PM: > [PWA] Compile client (static) 10:38:43 PM: > [PWA] Auto register service worker with: /opt/build/repo/node_modules/next-pwa/register.js 10:38:43 PM: > [PWA] Service worker: /opt/build/repo/public/sw.js 10:38:43 PM: > [PWA] url: /sw.js 10:38:43 PM: > [PWA] scope: / 10:38:43 PM: > [PWA] Compile server 10:39:03 PM: info - Compiled successfully 10:39:03 PM: info - Collecting page data... 10:39:06 PM: info - Generating static pages (0/3) 10:39:07 PM: info - Generating static pages (3/3) 10:39:07 PM: info - Finalizing page optimization... 10:39:07 PM: Page Size First Load JS 10:39:07 PM: ┌ ● / (ISR: 600 Seconds) 779 B 74.8 kB 10:39:07 PM: ├ /_app 0 B 74 kB 10:39:07 PM: └ ○ /404 194 B 74.2 kB 10:39:07 PM: + First Load JS shared by all 74 kB 10:39:07 PM: ├ chunks/framework-91d7f78b5b4003c8.js 42 kB 10:39:07 PM: ├ chunks/main-2915869b229d55c9.js 30.1 kB 10:39:07 PM: ├ chunks/pages/_app-0d237a0c5952e57c.js 1.06 kB 10:39:07 PM: ├ chunks/webpack-514908bffb652963.js 770 B 10:39:07 PM: └ css/06bb7e4ab300185c.css 1.61 kB 10:39:07 PM: ○ (Static) automatically rendered as static HTML (uses no initial props) 10:39:07 PM: ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps) 10:39:07 PM: (ISR) incremental static regeneration (uses revalidate in getStaticProps) 10:39:07 PM: ​ 10:39:07 PM: (build.command completed in 30.3s) 10:39:07 PM: ​ 10:39:07 PM: ──────────────────────────────────────────────────────────────── 10:39:07 PM: 3. @netlify/plugin-nextjs (onBuild event) 10:39:07 PM: ──────────────────────────────────────────────────────────────── 10:39:07 PM: ​ 10:39:07 PM: Moving static page files to serve from CDN... 10:39:07 PM: Moved 0 files 10:39:07 PM: Netlify configuration property "redirects" value changed to [ 10:39:07 PM: { from: '/_next/static/*', to: '/static/:splat', status: 200 }, 10:39:07 PM: { 10:39:07 PM: from: '/_next/image*', 10:39:07 PM: query: { url: ':url', w: ':width', q: ':quality' }, 10:39:07 PM: to: '/_ipx/w_:width,q_:quality/:url', 10:39:07 PM: status: 301 10:39:07 PM: }, 10:39:07 PM: { from: '/_ipx/*', to: '/.netlify/builders/_ipx', status: 200 }, 10:39:07 PM: { from: '/cache/*', to: '/404.html', status: 404, force: true }, 10:39:07 PM: { from: '/server/*', to: '/404.html', status: 404, force: true }, 10:39:07 PM: { from: '/serverless/*', to: '/404.html', status: 404, force: true }, 10:39:07 PM: { from: '/traces', to: '/404.html', status: 404, force: true }, 10:39:07 PM: { 10:39:07 PM: from: '/routes-manifest.json', 10:39:07 PM: to: '/404.html', 10:39:07 PM: status: 404, 10:39:07 PM: force: true 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/build-manifest.json', 10:39:07 PM: to: '/404.html', 10:39:07 PM: status: 404, 10:39:07 PM: force: true 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/prerender-manifest.json', 10:39:07 PM: to: '/404.html', 10:39:07 PM: status: 404, 10:39:07 PM: force: true 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/react-loadable-manifest.json', 10:39:07 PM: to: '/404.html', 10:39:07 PM: status: 404, 10:39:07 PM: force: true 10:39:07 PM: }, 10:39:07 PM: { from: '/BUILD_ID', to: '/404.html', status: 404, force: true }, 10:39:07 PM: { 10:39:07 PM: from: '/api', 10:39:07 PM: to: '/.netlify/functions/___netlify-handler', 10:39:07 PM: status: 200 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/api/*', 10:39:07 PM: to: '/.netlify/functions/___netlify-handler', 10:39:07 PM: status: 200 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/favicon.ico', 10:39:07 PM: to: '/favicon.ico', 10:39:07 PM: conditions: { Cookie: [Array] }, 10:39:07 PM: status: 200 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/icon.png', 10:39:07 PM: to: '/icon.png', 10:39:07 PM: conditions: { Cookie: [Array] }, 10:39:07 PM: status: 200 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/manifest.json', 10:39:07 PM: to: '/manifest.json', 10:39:07 PM: conditions: { Cookie: [Array] }, 10:39:07 PM: status: 200 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/on_error.png', 10:39:07 PM: to: '/on_error.png', 10:39:07 PM: conditions: { Cookie: [Array] }, 10:39:07 PM: status: 200 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/sw.js', 10:39:07 PM: to: '/sw.js', 10:39:07 PM: conditions: { Cookie: [Array] }, 10:39:07 PM: status: 200 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/workbox-22294e6b.js', 10:39:07 PM: to: '/workbox-22294e6b.js', 10:39:07 PM: conditions: { Cookie: [Array] }, 10:39:07 PM: status: 200 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/icons/icon-128x128.png', 10:39:07 PM: to: '/icons/icon-128x128.png', 10:39:07 PM: conditions: { Cookie: [Array] }, 10:39:07 PM: status: 200 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/icons/icon-144x144.png', 10:39:07 PM: to: '/icons/icon-144x144.png', 10:39:07 PM: conditions: { Cookie: [Array] }, 10:39:07 PM: status: 200 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/icons/icon-152x152.png', 10:39:07 PM: to: '/icons/icon-152x152.png', 10:39:07 PM: conditions: { Cookie: [Array] }, 10:39:07 PM: status: 200 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/icons/icon-16x16.png', 10:39:07 PM: to: '/icons/icon-16x16.png', 10:39:07 PM: conditions: { Cookie: [Array] }, 10:39:07 PM: status: 200 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/icons/icon-180x180.png', 10:39:07 PM: to: '/icons/icon-180x180.png', 10:39:07 PM: conditions: { Cookie: [Array] }, 10:39:07 PM: status: 200 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/icons/icon-192x192.png', 10:39:07 PM: to: '/icons/icon-192x192.png', 10:39:07 PM: conditions: { Cookie: [Array] }, 10:39:07 PM: status: 200 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/icons/icon-256x256.png', 10:39:07 PM: to: '/icons/icon-256x256.png', 10:39:07 PM: conditions: { Cookie: [Array] }, 10:39:07 PM: status: 200 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/icons/icon-32x32.png', 10:39:07 PM: to: '/icons/icon-32x32.png', 10:39:07 PM: conditions: { Cookie: [Array] }, 10:39:07 PM: status: 200 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/icons/icon-384x384.png', 10:39:07 PM: to: '/icons/icon-384x384.png', 10:39:07 PM: conditions: { Cookie: [Array] }, 10:39:07 PM: status: 200 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/icons/icon-512x512.png', 10:39:07 PM: to: '/icons/icon-512x512.png', 10:39:07 PM: conditions: { Cookie: [Array] }, 10:39:07 PM: status: 200 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/icons/icon-72x72.png', 10:39:07 PM: to: '/icons/icon-72x72.png', 10:39:07 PM: conditions: { Cookie: [Array] }, 10:39:07 PM: status: 200 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/icons/icon-96x96.png', 10:39:07 PM: to: '/icons/icon-96x96.png', 10:39:07 PM: conditions: { Cookie: [Array] }, 10:39:07 PM: status: 200 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/*', 10:39:07 PM: to: '/.netlify/functions/___netlify-handler', 10:39:07 PM: status: 200, 10:39:07 PM: conditions: { Cookie: [Array] }, 10:39:07 PM: force: true 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/_next/data/Qj5hDoLm6SONVv_50ql70/index.json', 10:39:07 PM: to: '/.netlify/builders/___netlify-odb-handler', 10:39:07 PM: status: 200, 10:39:07 PM: force: true 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/', 10:39:07 PM: to: '/.netlify/builders/___netlify-odb-handler', 10:39:07 PM: status: 200, 10:39:07 PM: force: true 10:39:07 PM: }, 10:39:07 PM: { 10:39:07 PM: from: '/*', 10:39:07 PM: to: '/.netlify/functions/___netlify-handler', 10:39:07 PM: status: 200 10:39:07 PM: } 10:39:07 PM: ]. 10:39:07 PM: ​ 10:39:07 PM: (@netlify/plugin-nextjs onBuild completed in 60ms) 10:39:07 PM: ​ 10:39:07 PM: ──────────────────────────────────────────────────────────────── 10:39:07 PM: 4. Functions bundling 10:39:07 PM: ──────────────────────────────────────────────────────────────── 10:39:07 PM: ​ 10:39:07 PM: Packaging Functions from .netlify/functions-internal directory: 10:39:07 PM: - ___netlify-handler/___netlify-handler.js 10:39:07 PM: - ___netlify-odb-handler/___netlify-odb-handler.js 10:39:07 PM: - _ipx/_ipx.js 10:39:07 PM: ​ 10:39:28 PM: ​ 10:39:28 PM: (Functions bundling completed in 21.1s) 10:39:28 PM: ​ 10:39:28 PM: ──────────────────────────────────────────────────────────────── 10:39:28 PM: 5. @netlify/plugin-nextjs (onPostBuild event) 10:39:28 PM: ──────────────────────────────────────────────────────────────── 10:39:28 PM: ​ 10:39:28 PM: Next.js cache saved. 10:39:28 PM: ​ 10:39:28 PM: (@netlify/plugin-nextjs onPostBuild completed in 56ms) 10:39:28 PM: ​ 10:39:28 PM: ──────────────────────────────────────────────────────────────── 10:39:28 PM: 6. Deploy site 10:39:28 PM: ──────────────────────────────────────────────────────────────── 10:39:28 PM: ​ 10:39:28 PM: Starting to deploy site from '.next' 10:39:28 PM: Creating deploy tree 10:39:28 PM: Creating deploy upload records 10:39:29 PM: 22 new files to upload 10:39:29 PM: 3 new functions to upload 10:39:37 PM: Site deploy was successfully initiated 10:39:37 PM: ​ 10:39:37 PM: (Deploy site completed in 8.5s) 10:39:37 PM: Starting post processing 10:39:37 PM: ​ 10:39:37 PM: ──────────────────────────────────────────────────────────────── 10:39:37 PM: Netlify Build Complete 10:39:37 PM: ──────────────────────────────────────────────────────────────── 10:39:37 PM: ​ 10:39:37 PM: (Netlify Build completed in 1m 2.2s) 10:39:37 PM: Post processing - HTML 10:39:37 PM: Caching artifacts 10:39:37 PM: Started saving node modules 10:39:37 PM: Finished saving node modules 10:39:37 PM: Started saving build plugins 10:39:37 PM: Finished saving build plugins 10:39:37 PM: Started saving yarn cache 10:39:37 PM: Post processing - header rules 10:39:37 PM: Post processing - redirect rules 10:39:38 PM: Post processing done 10:39:38 PM: Site is live ✨ 10:39:41 PM: Finished saving yarn cache 10:39:41 PM: Started saving pip cache 10:39:41 PM: Finished saving pip cache 10:39:41 PM: Started saving emacs cask dependencies 10:39:41 PM: Finished saving emacs cask dependencies 10:39:41 PM: Started saving maven dependencies 10:39:41 PM: Finished saving maven dependencies 10:39:41 PM: Started saving boot dependencies 10:39:41 PM: Finished saving boot dependencies 10:39:41 PM: Started saving rust rustup cache 10:39:41 PM: Finished saving rust rustup cache 10:39:41 PM: Started saving go dependencies 10:39:41 PM: Finished saving go dependencies 10:39:41 PM: Build script success 10:40:57 PM: Finished processing build request in 2m57.84385971s ```

Function logs

Function logs ``` # Paste logs here ```

.next JSON files

generated .next JSON files ``` # Paste file contents here. Please check there isn't any private info in them # You can either build locally, or download the deploy from Netlify by clicking the arrow next to the deploy time. ```
ascorbic commented 2 years ago

Hi. Thanks for the report. I believe this is the same bug as #1028. There will be a fix out today, but in the meantime can you try rebuilding with the env var EXPERIMENTAL_ODB_TTL set to 1?

nwleedev commented 2 years ago

@ascorbic
Yes, I have confirmed increment site regeneration is working correctly. Actually, I had already removed all service workers in my app to prevent unexpected caching data, or intercepting http requests. Thank you for your services.