Repeated calls to the NextJS middleware while accessing an Incremental Static Regeneration (ISR)

Question

Repeated calls to the NextJS middleware while accessing an Incremental Static Regeneration (ISR)

I am currently working on a NextJS application that includes an ISR page fetching data from Supabase. There is a middleware in place to record a page visit before the page is rendered.

export async function middleware(
  request: NextRequest,
  fetchEvent: NextFetchEvent
) {
  console.log('request.nextUrl.pathname', request.nextUrl.pathname);
  if (request.nextUrl.pathname.split('/').length === 2) {
    return linkVisitMiddleware(request, fetchEvent);
  }
}

However, I've noticed that the middleware gets called 2 or 3 times (the numbers seem to fluctuate for some unknown reason).

Whenever this happens, the following entries are logged on the server:

request.nextUrl.pathname /slug
request.nextUrl.pathname /slug
request.nextUrl.pathname /slug

Interestingly, this behavior only occurs in the production environment when using the command next start. When running the application locally with next serve, it only runs once as expected.

I have read about the reactStrictMode but implementing it did not resolve the issue.

Noteworthy mentioning, I have tested this on NextJS versions 13.1.1, 13.1.6 & 13.3.0

typescript next.js middleware

Answer 1

Answer №1

Finally, after hours of troubleshooting, I uncovered the source of the issue.

The ISR page was set to use the fallback strategy {fallback: true}, which led to it attempting to request the HTML page first. If the HTML page was not available, it would then revisit the same route to retrieve the data.

To address this issue, I discovered that NextJS utilizes headers to distinguish between different types of requests. Here is the solution I implemented:

import { linksMiddleware } from 'middleware/links';
import { NextFetchEvent, NextRequest, NextResponse } from 'next/server';

export async function middleware(
  request: NextRequest,
  fetchEvent: NextFetchEvent
) {
  // These methods are used when accessing locale routes, so we discard them
  if (request.method === 'OPTIONS' || request.method === 'HEAD') {
    return NextResponse.next();
  }

  //Capture URL locale (if any) and id. For example: /ar/random-id or /random-id
  const pathParams = request.nextUrl.pathname.split('/');

  if (pathParams.length === 2 && isDataRequest(request)) {
    // This means that we are accessing the entity homepage
    return linksMiddleware(request, fetchEvent, 'entity');
  }

  return NextResponse.next();
}

export const config = {
  matcher: [
    // This is to prevent the middleware from running on the API routes and during development
    '/((?!api|_next/static|_next/image|favicon.ico|favicon.svg).*)',
  ],
};

/**
 * Check if the request is a data request for cases of fallback pages
 * This header is absent in the initial request
 */
const isDataRequest = (request: NextRequest): boolean =>
  request.headers.get('x-nextjs-data') === '1' ||
  // The header is absent in development mode since there's no fallback logic (SSR-like)
  process.env.NODE_ENV === 'development';

Additionally, I included a check for the HTTP method to handle cases of locale routing excluding OPTIONS and HEAD.

Answer 2

Finally, after hours of troubleshooting, I uncovered the source of the issue.

The ISR page was set to use the fallback strategy {fallback: true}, which led to it attempting to request the HTML page first. If the HTML page was not available, it would then revisit the same route to retrieve the data.

To address this issue, I discovered that NextJS utilizes headers to distinguish between different types of requests. Here is the solution I implemented:

import { linksMiddleware } from 'middleware/links';
import { NextFetchEvent, NextRequest, NextResponse } from 'next/server';

export async function middleware(
  request: NextRequest,
  fetchEvent: NextFetchEvent
) {
  // These methods are used when accessing locale routes, so we discard them
  if (request.method === 'OPTIONS' || request.method === 'HEAD') {
    return NextResponse.next();
  }

  //Capture URL locale (if any) and id. For example: /ar/random-id or /random-id
  const pathParams = request.nextUrl.pathname.split('/');

  if (pathParams.length === 2 && isDataRequest(request)) {
    // This means that we are accessing the entity homepage
    return linksMiddleware(request, fetchEvent, 'entity');
  }

  return NextResponse.next();
}

export const config = {
  matcher: [
    // This is to prevent the middleware from running on the API routes and during development
    '/((?!api|_next/static|_next/image|favicon.ico|favicon.svg).*)',
  ],
};

/**
 * Check if the request is a data request for cases of fallback pages
 * This header is absent in the initial request
 */
const isDataRequest = (request: NextRequest): boolean =>
  request.headers.get('x-nextjs-data') === '1' ||
  // The header is absent in development mode since there's no fallback logic (SSR-like)
  process.env.NODE_ENV === 'development';

Additionally, I included a check for the HTTP method to handle cases of locale routing excluding OPTIONS and HEAD.

Repeated calls to the NextJS middleware while accessing an Incremental Static Regeneration (ISR)

Answer №1

Similar questions

Angular is programmed to detect any alterations

The type is lacking the property onAuxClickCapture and onAuxClick

Currently in the process of creating a carousel displaying images, I have encountered an issue stating: "An optional property access cannot be on the left-hand side of an assignment expression."

Issue TS2339: The object does not have a property named 'includes'

Resetting the timer of an observable in Angular 2

Transforming the data type of a variable

Changing the fill color of externally imported SVGs from a CDN: A simple guide

Can you explain the distinction between the server component and client component in Nextjs 14?

"Adjusting the position of an Ionic Menu on-the-fly

Next-Auth: Access Session in _app.js Directly Without Using getServerSideProps

Securing Angular 2 routes with Firebase authentication using AuthGuard

Is it possible to use both MUI makeStyles and Theming in the _app.js file?

The httpClient post request does not successfully trigger in an angular event when the windows.unload event is activated

Utilize useState in a versatile modal component for enhanced functionality

Angular 2 forms, popping the chosen item in the `<select>` element

Encountering an error with the Angular 2 SimpleChanges Object during the initial npm start process

Managing onChange in a ReactJs project

Access Denied - NextJS and Azure: "Unauthorized access to this directory or page."

Leveraging Next.js for "client-side rendering" in React Encapsulations

Attempting to retrieve a URL using Angular/Typescript is generating an Unknown Error instead of the expected successful response