ISR and next/link Prefetch Cause RSC Page Return Content in self.__next_f.push Function With App Dir on Next.js 14.0.3

Support
1

When ISR is enabled and a next/link component with href of the current page (e.g. homepage) URL exists, ISR will be run twice when refreshing the page. The ISR log shows two ISR records of the page at about the same time. I guess it’s because ISR will be triggered by the prefetch of the next/link component and the page load.

This sometimes/frequently causes the page content returned to be the code in self.__next_f.push functions in the script tag at the end of the body tag, rather than the actual page content.

Whenever the issue happens, I notice the ISR log shows the ISR record just once.

The test website can be found https://thunderous-kelpie-daaa98.netlify.app/

Screenshot 2023-12-04 at 11.36.12 am
Screenshot 2023-12-04 at 11.36.12 am1920×839 350 KB

Expected Result

Whenever refreshing the page with ISR and next/link component, it returns the page content stably.

Actual Result

Refreshing the page, sometimes it returns the code in self.__next_f.push functions in the script tag at the end of the body tag.

Steps to reproduce

  1. Install a fresh new copy of next.js with npx create-next-app@latest with app dir.
  2. Add a next/link component with href of homepage on app/page.tsx, e.g. <Link href={‘/’}>Test.
  3. Add export const revalidate = 1; in app/layout.tsx to enable ISR.
  4. Deploy to Netlify.
  5. Try refresh the homepage every minute.

Next Runtime version

4.41.2

Is your issue related to the app directory?

  • Yes, I am using the app directory

Builds logs (or link to your logs)

11:30:15 AM: build-image version: 3ffff9df3d5419545acc1b673a54de348174406d (focal)
11:30:15 AM: buildbot version: 234adcfe967f1d318bfad465ff22f561d657197d
11:30:15 AM: Fetching cached dependencies
11:30:15 AM: Starting to download cache of 216.4MB
11:30:18 AM: Finished downloading cache in 2.61s
11:30:18 AM: Starting to extract cache
11:30:20 AM: Finished extracting cache in 1.886s
11:30:20 AM: Finished fetching cache in 4.556s
11:30:20 AM: Starting to prepare the repo for build
11:30:20 AM: Preparing Git Reference refs/heads/main
11:30:22 AM: Starting to install dependencies
11:30:22 AM: Python version set to 3.8
11:30:22 AM: Attempting Ruby version 2.7.2, read from environment
11:30:22 AM: Using Ruby version 2.7.2
11:30:23 AM: Started restoring cached go cache
11:30:23 AM: Finished restoring cached go cache
11:30:24 AM: go version go1.19.13 linux/amd64
11:30:25 AM: Using PHP version 8.0
11:30:26 AM: Started restoring cached Node.js version
11:30:27 AM: Finished restoring cached Node.js version
11:30:27 AM: v18.19.0 is already installed.
11:30:27 AM: Now using node v18.19.0 (npm v10.2.3)
11:30:27 AM: Enabling Node.js Corepack
11:30:27 AM: Started restoring cached build plugins
11:30:27 AM: Finished restoring cached build plugins
11:30:27 AM: Started restoring cached corepack dependencies
11:30:27 AM: Finished restoring cached corepack dependencies
11:30:27 AM: No pnpm workspaces detected
11:30:27 AM: Started restoring cached node modules
11:30:27 AM: Finished restoring cached node modules
11:30:28 AM: Installing npm packages using pnpm version 8.7.6
11:30:29 AM: Lockfile is up to date, resolution step is skipped
11:30:29 AM: Already up to date
11:30:29 AM: Done in 622ms
11:30:29 AM: npm packages installed using pnpm
11:30:30 AM: Successfully installed dependencies
11:30:30 AM: Starting build script
11:30:30 AM: Detected 1 framework(s)
11:30:30 AM: "next" at version "14.0.3"
11:30:30 AM: Section completed: initializing
11:30:32 AM: ​
11:30:32 AM: Netlify Build
11:30:32 AM: ────────────────────────────────────────────────────────────────
11:30:32 AM: ​
11:30:32 AM: ❯ Version
11:30:32 AM: @netlify/build 29.29.4
11:30:32 AM: ​
11:30:32 AM: ❯ Flags
11:30:32 AM: baseRelDir: true
11:30:32 AM: buildId: 656d1d960f64400008c2abfe
11:30:32 AM: deployId: 656d1d960f64400008c2ac00
11:30:32 AM: ​
11:30:32 AM: ❯ Current directory
11:30:32 AM: /opt/build/repo
11:30:32 AM: ​
11:30:32 AM: ❯ Config file
11:30:32 AM: No config file was defined: using default values.
11:30:32 AM: ​
11:30:32 AM: ❯ Context
11:30:32 AM: production
11:30:32 AM: ​
11:30:32 AM: ❯ Using Next.js Runtime - v4.41.2
11:30:33 AM: ​
11:30:33 AM: @netlify/plugin-nextjs (onPreBuild event)
11:30:33 AM: ────────────────────────────────────────────────────────────────
11:30:33 AM: ​
11:30:33 AM: Next.js cache restored.
11:30:33 AM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.
11:30:34 AM: ​
11:30:34 AM: (@netlify/plugin-nextjs onPreBuild completed in 90ms)
11:30:34 AM: ​
11:30:34 AM: Build command from Netlify app
11:30:34 AM: ────────────────────────────────────────────────────────────────
11:30:34 AM: ​
11:30:34 AM: $ pnpm run build
11:30:34 AM: > test@0.1.0 build /opt/build/repo
11:30:34 AM: > next build
11:30:34 AM: ▲ Next.js 14.0.3
11:30:34 AM: Creating an optimized production build ...
11:30:37 AM: ✓ Compiled successfully
11:30:37 AM: Linting and checking validity of types ...
11:30:39 AM: Collecting page data ...
11:30:40 AM: Generating static pages (0/5) ...
11:30:40 AM: Generating static pages (1/5)
11:30:40 AM: Generating static pages (2/5)
11:30:40 AM: Generating static pages (3/5)
11:30:41 AM: ✓ Generating static pages (5/5)
11:30:41 AM: Finalizing page optimization ...
11:30:41 AM: Collecting build traces ...
11:30:46 AM: Route (app) Size First Load JS
11:30:46 AM: ┌ ○ / 11.3 kB 95.2 kB
11:30:46 AM: └ ○ /_not-found 872 B 84.8 kB
11:30:46 AM: + First Load JS shared by all 83.9 kB
11:30:46 AM: ├ chunks/569-6961324a6798b7a2.js 28.8 kB
11:30:46 AM: ├ chunks/c141e8ea-9e027de7199c3c94.js 53.3 kB
11:30:46 AM: ├ chunks/main-app-88cfcfb950789b9a.js 219 B
11:30:46 AM: └ chunks/webpack-031ca56bc5e2f967.js 1.65 kB
11:30:46 AM: ○ (Static) prerendered as static content
11:30:46 AM: ​
11:30:46 AM: (build.command completed in 12.5s)
11:30:46 AM: ​
11:30:46 AM: @netlify/plugin-nextjs (onBuild event)
11:30:46 AM: ────────────────────────────────────────────────────────────────
11:30:46 AM: ​
11:30:46 AM: Moving static page files to serve from CDN...
11:30:46 AM: Moved 4 files to CDN
11:30:46 AM: The following routes use "revalidate" values of under 60 seconds, which is not supported.
11:30:46 AM: They will use a revalidate time of 60 seconds instead.
11:30:46 AM: ┌─────────┬───────┬────────────┐
11:30:46 AM: │ (index) │ Route │ Revalidate │
11:30:46 AM: ├─────────┼───────┼────────────┤
11:30:46 AM: │ 0 │ "/" │ 1 │
11:30:46 AM: └─────────┴───────┴────────────┘
11:30:46 AM: You are not using Netlify Edge Functions for image format detection. Set env var "NEXT_FORCE_EDGE_IMAGES=true" to enable.
11:30:46 AM: Netlify configuration property "redirects" value changed to [
11:30:46 AM: { from: "/next/static/", to: "/static/:splat", status: 200 },
11:30:46 AM: {
11:30:46 AM: from: "/_next/image",
11:30:46 AM: query: { url: ":url", w: ":width", q: ":quality" },
11:30:46 AM: to: "/ipx/w:width,q:quality/:url",
11:30:46 AM: status: 301
11:30:46 AM: },
11:30:46 AM: { from: "/_ipx/", to: "/.netlify/builders/_ipx", status: 200 },
11:30:46 AM: {
11:30:46 AM: from: "/api/",
11:30:46 AM: to: "/.netlify/functions/___netlify-handler",
11:30:46 AM: status: 200
11:30:46 AM: },
11:30:46 AM: {
11:30:46 AM: from: "/next.svg",
11:30:46 AM: to: "/next.svg",
11:30:46 AM: conditions: { Cookie: [Array] },
11:30:46 AM: status: 200
11:30:46 AM: },
11:30:46 AM: {
11:30:46 AM: from: "/vercel.svg",
11:30:46 AM: to: "/vercel.svg",
11:30:46 AM: conditions: { Cookie: [Array] },
11:30:46 AM: status: 200
11:30:46 AM: },
11:30:46 AM: {
11:30:46 AM: from: "/",
11:30:46 AM: to: "/.netlify/functions/___netlify-handler",
11:30:46 AM: status: 200,
11:30:46 AM: conditions: { Cookie: [Array] },
11:30:46 AM: force: true
11:30:46 AM: },
11:30:46 AM: {
11:30:46 AM: from: "/index.rsc",
11:30:46 AM: to: "/.netlify/builders/___netlify-odb-handler",
11:30:46 AM: status: 200,
11:30:46 AM: force: true
11:30:46 AM: },
11:30:46 AM: {
11:30:46 AM: from: "/",
11:30:46 AM: to: "/.netlify/builders/___netlify-odb-handler",
11:30:46 AM: status: 200,
11:30:46 AM: force: true
11:30:46 AM: },
11:30:46 AM: {
11:30:46 AM: from: "/_next/data/_fuzAKWjN3of8LPdDJcwC/_not-found.json",
11:30:46 AM: to: "/.netlify/functions/___netlify-handler",
11:30:46 AM: status: 200,
11:30:46 AM: force: false
11:30:46 AM: },
11:30:46 AM: {
11:30:46 AM: from: "/_not-found",
11:30:46 AM: to: "/.netlify/functions/___netlify-handler",
11:30:46 AM: status: 200,
11:30:46 AM: force: false
11:30:46 AM: },
11:30:46 AM: {
11:30:46 AM: from: "/",
11:30:46 AM: to: "/.netlify/functions/___netlify-handler",
11:30:46 AM: status: 200
11:30:46 AM: }
11:30:46 AM: ].
11:30:46 AM: ​
11:30:46 AM: (@netlify/plugin-nextjs onBuild completed in 126ms)
11:30:46 AM: ​
11:30:46 AM: Functions bundling
11:30:46 AM: ────────────────────────────────────────────────────────────────
11:30:46 AM: ​
11:30:46 AM: Packaging Functions from .netlify/functions-internal directory:
11:30:46 AM: - ___netlify-handler/___netlify-handler.js
11:30:46 AM: - ___netlify-odb-handler/___netlify-odb-handler.js
11:30:46 AM: - _ipx/_ipx.js
11:30:46 AM: ​
11:31:20 AM: ​
11:31:20 AM: (Functions bundling completed in 33.7s)
11:31:20 AM: ​
11:31:20 AM: Edge Functions bundling
11:31:20 AM: ────────────────────────────────────────────────────────────────
11:31:20 AM: ​
11:31:20 AM: Packaging Edge Functions from .netlify/edge-functions directory:
11:31:20 AM: - rsc-data
11:31:20 AM: ​
11:31:20 AM: (Edge Functions bundling completed in 370ms)
11:31:20 AM: ​
11:31:20 AM: @netlify/plugin-nextjs (onPostBuild event)
11:31:20 AM: ────────────────────────────────────────────────────────────────
11:31:20 AM: ​
11:31:20 AM: Next.js cache saved.
11:31:20 AM: ​
11:31:20 AM: (@netlify/plugin-nextjs onPostBuild completed in 92ms)
11:31:20 AM: ​
11:31:20 AM: Deploy site
11:31:20 AM: ────────────────────────────────────────────────────────────────
11:31:20 AM: ​
11:31:20 AM: Starting to deploy site from ".next"
11:31:20 AM: Calculating files to upload
11:31:21 AM: 6 new files to upload
11:31:21 AM: 2 new functions to upload
11:31:28 AM: Skipping form detection
11:31:28 AM: Post processing - header rules
11:31:28 AM: Post processing - redirect rules
11:31:28 AM: Starting post processing
11:31:28 AM: Post processing done
11:31:28 AM: Section completed: postprocessing
11:31:28 AM: Section completed: deploying
11:31:28 AM: Site deploy was successfully initiated
11:31:28 AM: ​
11:31:28 AM: (Deploy site completed in 7.5s)
11:31:28 AM: ​
11:31:28 AM: Netlify Build Complete
11:31:28 AM: ────────────────────────────────────────────────────────────────
11:31:28 AM: ​
11:31:28 AM: (Netlify Build completed in 55.9s)
11:31:29 AM: Site is live ✨
11:31:29 AM: Caching artifacts
11:31:29 AM: Started saving node modules
11:31:29 AM: Finished saving node modules
11:31:29 AM: Started saving build plugins
11:31:29 AM: Finished saving build plugins
11:31:29 AM: Started saving corepack cache
11:31:29 AM: Finished saving corepack cache
11:31:29 AM: Started saving pip cache
11:31:29 AM: Finished saving pip cache
11:31:29 AM: Started saving emacs cask dependencies
11:31:29 AM: Finished saving emacs cask dependencies
11:31:29 AM: Started saving maven dependencies
11:31:29 AM: Finished saving maven dependencies
11:31:29 AM: Started saving boot dependencies
11:31:29 AM: Finished saving boot dependencies
11:31:29 AM: Started saving rust rustup cache
11:31:29 AM: Finished saving rust rustup cache
11:31:29 AM: Started saving go dependencies
11:31:29 AM: Finished saving go dependencies
11:31:29 AM: Build script success
11:31:29 AM: Section completed: building
11:31:30 AM: Uploading Cache of size 216.4MB
11:31:32 AM: Section completed: cleanup
11:31:32 AM: Finished processing build request in 1m16.564s

Function logs

ISR Function logs

Dec 4, 11:32:35 AM: fa5f950b INFO [GET] / (ODB TTL=60)
Dec 4, 11:32:35 AM: fa5f950b Duration: 173.76 ms Memory Usage: 97 MB
Dec 4, 11:33:40 AM: 81a63f74 INFO [GET] / (ODB TTL=60)
Dec 4, 11:33:40 AM: 81a63f74 Duration: 99.08 ms Memory Usage: 97 MB
Dec 4, 11:33:41 AM: a8e9b947 INFO [GET] / (ODB TTL=60)
Dec 4, 11:33:41 AM: a8e9b947 Duration: 43.42 ms Memory Usage: 97 MB
Dec 4, 11:34:44 AM: 6053f657 INFO [GET] / (ODB TTL=60)
Dec 4, 11:34:44 AM: 6053f657 Duration: 103.31 ms Memory Usage: 97 MB
2

Next.js 14 currently doesn’t work well on Netlify.

3

Thanks for your reply.

I’ve tested this on Next.js 13.5 versions and the latest 13.4 versions, and it’s still not working.

4

We experienced this issue on a production site (celebrated-granita-c9edb3) and was scratching our heads.

I understand that with all the breaking changes Next.js 13 brings things get hectic. Is there a workaround for this?

We ideally want the data to refresh at an interval.

5

We’re trying to release a beta in a few weeks that could possibly solve these (and many more) errors. But till then, this would remain broken, I’m afraid.

1 Like