cached getServerSideProps on redirect page

[hwookim]

Summary

getServerSideProps on redirect page can't get cached data.

---

I'm using a translator, so forgive me if it's awkward. Thanks.

I have two pages that use getServerSideProps.
Page A doesn't render anything and redirects to Page B by getServerSideProps.

Page B fetches data by getServerSideProps and uses a caching strategy via res.setHeader.

The problem is when page B is accessed through page A.
The path from page A often fails to render the data called from getServerSideProps on page B.
I think the cached data is not accessible from Page A. Because it always works fine when accessing page B.
But why does it happen sometimes and not always?
It's not a problem in my local environment (probably because it doesn't use cache). It's only happening in the deployed environment. I don't even know how to reproduce this to show you.

Actually, I don't think I know exactly what's going on...

Does anyone else have a similar situation or anticipated problems?
What should I be looking for?

For now, I'm using react-query, so prefetching and lengthening the stale-time worked for me, but I don't think it's a good idea.

Additional information

next 13.4.3

Example

Here is the full code for the page A.

import { GetServerSideProps } from "next";

import { URL } from "@/lib/�constants";

export const getServerSideProps: GetServerSideProps = async () => {
  return {
    redirect: {
      destination: URL.MARKETPLACE,
      permanent: true,
    },
  };
};

const HomePage = () => {
  return <></>;
};

export default HomePage;

Here is a portion of the code for Page B.

export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
  res.setHeader(
    "Cache-Control",
    `public, s-maxage=${12 * 60 * 60}, stale-while-revalidate=${0.5 * 60 * 60}`
  );

  const data = await fetchData();

  return {
    props: {
     data: JSON.parse(JSON.stringify(data)),
    },
  };
}

[Vavaste]

Can i ask you a few question to understand the context better?

i think it will be useful to know:

1. Are you starting your project in dev mode in the local environment? (npm/yarn dev)
2. Are you able to build the project without errors on your machine? (npm build)
3. The behaviour between the builded project and the dev mode project are different? (try to build the project in local and start it)
4. Does the B page take any value provided from the A page?

[hwookim]

1. In dev mode, it works fine because it doesn't use the cache(not sure why exactly).
2. Yes. It's built and running through vercel with no issues.
3. I think there is probably a behavioral difference about caching the data we get from getServerSideProps on page B.
4. The page A doesn't do anything except redirect

Here is the full code for the page A.

import { GetServerSideProps } from "next";

import { URL } from "@/lib/�constants";

export const getServerSideProps: GetServerSideProps = async () => {
  return {
    redirect: {
      destination: URL.MARKETPLACE,
      permanent: true,
    },
  };
};

const HomePage = () => {
  return <></>;
};

export default HomePage;

Here is a portion of the code for Page B.

export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
  res.setHeader(
    "Cache-Control",
    `public, s-maxage=${12 * 60 * 60}, stale-while-revalidate=${0.5 * 60 * 60}`
  );

  const data = await fetchData();

  return {
    props: {
     data: JSON.parse(JSON.stringify(data)),
    },
  };
}

[icyJoseph]

Is the problem happening when you navigate to page A, from another page, for example C? Or is it happening when you load A directly? Or maybe not, just random?

Are you using next-pwa or other kind of Service Worker tech?

[hwookim]

Both situations were happening.

After adding the �below code to Page A, it stopped happening when navigating directly to A, but the previous issue still occurred when navigating to Page A from another page, or when running router.push("/A") on Page A.

import { getServerSideProps as getBServerSideProps } from './PageB';

export const getServerSideProps: GetServerSideProps = async (context) => {
  const bProps = await getBServerSideProps(context);

  return {
    ...bProps,
    redirect: {
      destination: URL.MARKETPLACE,
      permanent: true,
  },
};
};

I am using next-pwa.
Is it possible that this is contributing to the issue in the desktop environment?

[icyJoseph]

Yeah, next-pwa, by default has something called stale-while-revalidate, https://developer.chrome.com/docs/workbox/modules/workbox-strategies/#stale-while-revalidate, which for GSSP, is a problem.

You need to use https://developer.chrome.com/docs/workbox/modules/workbox-strategies/#network-first-network-falling-back-to-cache:

I have answered to this before: #42405 (comment)

If that helps, please report back and don't forget to mark as answered.

Reposting for visiblity:

/** @type {import('next').NextConfig} */
const runtimeCaching = require("next-pwa/cache");

const nextDataIndex = runtimeCaching.findIndex(
  (entry) => entry.options.cacheName === "next-data"
);

if (nextDataIndex !== -1) {
  runtimeCaching[nextDataIndex].handler = "NetworkFirst";
} else {
  throw new Error("Failed to find next-data object in runtime caching");
}

const withPWA = require("next-pwa")({
  dest: "public",
  runtimeCaching,
  register: true,
  skipWaiting: true,
  buildExcludes: [/middleware-manifest.json$/],
  disable: process.env.NODE_ENV === 'development'
})

module.exports = withPWA({
  reactStrictMode: false
});

[icyJoseph]

Also make sure to wipe your cache clean, the redirect permanent is a bit annoying when debugging.