Add isNextDataRequest to req in getServerSideProps

[vekinox]

Goals

1. Provide a way to distinguish between initial page loads/reloads and client-side _next/data requests in getServerSideProps.
2. Simplify global data-fetching strategies for applications that need optimized handling of translations, tags, or other shared data.
3. Facilitate the migration of legacy projects still using the Pages Router and getInitialProps by offering a standard mechanism to differentiate request types.

Non-Goals

1. This feature does not propose changes to how client-side navigations fetch _next/data payloads.
2. It does not aim to replace or alter other lifecycle methods like getStaticProps or getInitialProps.
3. It does not affect how data fetching works in the App Router or React Server Components.

Background

Currently, there is no built-in way to determine whether a getServerSideProps call is triggered by an initial page load/reload or a client-side navigation fetching _next/data. This distinction is crucial for optimizing global data-fetching strategies, such as translations or tags.

Developers often resort to inspecting req.url for _next/data requests as a workaround:

export const isNextDataRequest = (req) => {
  return req?.url?.includes('_next/data');
};

While effective, this approach relies on internal implementation details that may change, making it brittle and harder to maintain.

Why This Feature is Needed:

• It addresses a common pain point for developers managing global data across pages.
• It optimizes server load and payload size by avoiding redundant fetching during client navigations.
• It bridges the gap for developers migrating from getInitialProps to getServerSideProps.

Alternatives:

• Continue relying on req.url inspection, which is fragile and not future-proof.
• Use cookies or session storage to track state between client and server, but this adds complexity and is prone to edge cases.

Proposal

Introduce a req.isNextDataRequest property in getServerSideProps to indicate whether the request is part of a client-side navigation fetching _next/data. This property would eliminate the need for brittle URL-based workarounds.

Proposed API:

export const getServerSideProps = async ({ req }) => {
  if (req.isNextDataRequest) {
    // Skip fetching global data during client-side navigation
    return { props: {} };
  }

  // Fetch global and page-specific data
  const globalData = await fetchGlobalData();
  return { props: { globalData } };
};

Implementation Details:

• The property should be true for _next/data requests and false for initial SSR requests.
• It would leverage Next.js’ existing knowledge of whether the request is fetching JSON payloads for client navigation.

Are You Interested in Contributing?
Yes, I would be happy to collaborate on the implementation or testing if needed.