Next.js 13 App Directory Hard Reload on navigation

When using app directory in Next.js 13, hard reload occurs on navigation between pages. No partial rendering or anything other. No hard reloads with next dev server locally tho.
I experience the same problem as here, but merged mentioned PR (and released in plugin-nextjs: v4.30.1) didn’t do anything for me or other person in comments 3 days ago.

I also tried different versions of plugins (4.33.0, 4.30.1, appdir) but the result is the same.

Hi @stopper :wave:t6:,

What does the network tab in your browsers developer tool say? Are there any requests being made during the hard reload? You can also try disabling any plugins or custom configs that you’ve added to your app.

Hi!

When opening /, Next.js also makes requests to links on this page with header RSC: 1 and receives some data (it’s even cached for me). As I understand RSC files are used to make redirects without hard reloads or something.
When clicking on a link to /buy, it first makes the same request again, then makes request to /buy, but now without RSC: 1 so it receives HTML. Then requests are almost the same as on / but for /buy now.

On next js dev server requests go this way:
When opening /, no requests are made with RSC header, only if I hover over a link.
When clicking a link it makes request to /buy with RSC, then to page.js (http://localhost:3000/_next/static/chunks/app/buy/page.js) and that’s all (excluding TRPC request, but that is not related to navigation)

By the way, it also didn’t work on Vercel, but that was because I didn’t remove i18n from my next config. After that, there was no hard reloads on Vercel but on Netlify nothing changed.

Here is branch deploys with appDir, if you want to test it out yourself:

The link I’m testing with is the green button on the right, and to return you can use FPMulti link in header.

Can you try disabling the RSC header and see if that changes the behavior. You can do this by setting resourceHints to false in your Next.js config.

Where in Next.js config should I put it? I cannot find that parameter in beta docs or really anywhere.
I put it in root of config for now, waiting for deploy.

Hi, it would be in your project’s root directory. Are you still experiencing this problem?

Hey, App Router is now stable!
Anyway, looks like there is no resourceHints parameter in next.config.js:

4:01:42 PM:   2. Build command from Netlify app                             
4:01:42 PM: ────────────────────────────────────────────────────────────────
4:01:42 PM: ​
4:01:42 PM: $ pnpm build
4:01:42 PM: > fpmulti@0.1.0 build /opt/build/repo
4:01:42 PM: > next build
4:01:42 PM: warn  - Invalid next.config.mjs options detected:
4:01:42 PM: warn  -     The root value has an unexpected property, resourceHints, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, configOrigin, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, modularizeImports, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, skipMiddlewareUrlNormalize, skipTrailingSlashRedirect, staticPageGenerationTimeout, swcMinify, target, trailingSlash, transpilePackages, typescript, useFileSystemPublicRoutes, webpack).
4:01:42 PM: warn  - See more info here: https://nextjs.org/docs/messages/invalid-next-config

The problem still persists on latest Next.js version (13.4.1) and I deployed example on Vercel and Netlify:
Vercel - https://adt.vercel.app/ (no hard reloads on navigation)
Netlify - https://famous-fox-e34d2e.netlify.app/ (hard reloads on navigation)
(Link now is “Link” text in top-right corner)

Should I maybe create a issue on Next.js Netlify Plugin GitHub? Looks like everyone forgot about feedback page Using the Next 13 `app` directory on Netlify · netlify/next-runtime · Discussion #1724 · GitHub

Hi yes that would be awesome. Please submit an issue on our github.

Ok, I created an issue on Github! [Bug]: App Directory: Navigation between pages is always hard reload · Issue #2089 · netlify/next-runtime · GitHub