1

We're building a NextJS app using JSS 20.

Next's prefetching behavior differs from local development: On production environments any links on a page are prefetched (for performance reasons), on local development Next will fetch an URL whenever you browse to it.

Is there a way to make Sitecore JSS NextJS behave like that on production environments as well? We don't want to prefetch all pages, we want Next to fetch the target page whenever we click a link, just like it does in next:dev mode.

I'm quite sure I've seen Sitecore JSS NextJS sites behave like this on production mode, but can't figure out how. Neither Sitecore or NextJS seems to have any decent documentation about it.

We're running our NextJS app on Azure Container Apps using Docker. The docker command is RUN npm run build and cmd npm start.

1 Answer 1

0

In your Dockerfile, you can set the NODE_ENV environment variable like this


ENV NODE_ENV=production

Next step is to disable prefetch in production. Modify next.config.js file:

module.exports = (phase, { defaultConfig }) => {
  const isDev = phase === "development";

  const config = {
    // Add your default config here
    ...defaultConfig,
    // Disable prefetching on production
    productionBrowserSourceMaps: false,
    experimental: {
      prefetch: false,
    },
  };

  if (isDev) {
    // Enable prefetching in development
    config.experimental.prefetch = true;
    config.productionBrowserSourceMaps = true;
  }

  return config;
};


6
  • That doesn't seem to have any effect. The experimental prefetch flag also doesn't exist in NextJS 12 or 13 (we're using 12.2.4).
    – Rob
    Apr 14, 2023 at 10:25
  • config.plugins.push(new (require("webpack")).PrefetchPlugin(false)); Apr 14, 2023 at 10:48
  • Try this code config.plugins.push(new (require("webpack")).PrefetchPlugin(false)); Apr 14, 2023 at 11:57
  • Also not working. Are you actually using this in a production environment, or just dropping random code snippets?
    – Rob
    Apr 17, 2023 at 8:14
  • I previously worked on this in a development environment a year ago, which is why I wanted to offer my help, even though we're not currently utilizing it. Apr 17, 2023 at 21:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.