Caching for server components

[west sedge]

Hello, I'm still trying to figure out caching and server component

I have a dynamic (server-rendered on demand) page that runs a fetch to an external API

├ ƒ /application/[applicationId]/life-assured-information

When I move to the following page (using the next button of the browser), and then do some change externally (using postman), and then come back to the original page (by clicking browser back button) the old information is still displayed.

Only after refreshing I get the latest version of the data

I thought that
1- fetch are by defailt no-store
2- exporting dynamc = "force-dynamic" would make it fully dynamic...every time you visit the page the fetch is requested.

Is this correct?
Does this has to do with the back/next button of the browser?

My page is pretty basic

const LifeAssuredInformationPage = async ({
  params,
}: {
  params: Promise<ApplicationIdParam>;
}) => {
  const { applicationId } = await params;
  const application = await fetchApplication(applicationId);
  const livesMetadata = await fetchLivesMetadata();

  return (
    <PageContainer header={<PageTitle title="Life Assured Information" />}>
      <BasicDetailsForm
        lives={application?.lives || []}
        livesMetadata={
          livesMetadata ?? {
            lifeAgeRangeMin: 18,
            lifeAgeRangeMax: 75,
            lifeQuestionData: [],
          }
        }
      />
    </PageContainer>
  );
};

[twilit beacon]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[regal eagle]

When I move to the following page (using the next button of the browser), and then do some change externally (using postman), and then come back to the original page (by clicking browser back button) the old information is still displayed.
In next.js, pages are cached locally.
you need to call the revalidation functions to dismiss local cache and potentially, server cache.

when you use postman to change data externally, ideally you also hit a next.js endpoint that would invalidate /application/[applicationId]/life-assured-information.

it kinda doesn't matter if fetch are default no-store or dynamic as there is many layers of caching and hard to configure and bad for DX to configure everything by options of fetch alone.

The ideal way to do this (in my opinion, open for discussion) is to just use fetch like usuall, dont force anything via route segments, and add tags to your fetch or revalidate page using revalidatePath or revalidateTags to invalidate individual pages.