cache: "no-store" option to make page SSR causes error on build

[TomRoberto]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:39:35 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T8103
    Binaries:
      Node: 18.12.1
      npm: 8.19.2
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.2.4-canary.1
      eslint-config-next: 13.1.6
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Data fetching (gS(S)P, getInitialProps)

Link to the code that reproduces this issue

https://github.com/TomRoberto/test-cache-nostore

To Reproduce

Run yarn build comand, you should have this error :
DynamicServerError: Dynamic server usage: no-store fetch https://pokeapi.co/api/v2/pokemon /page

Describe the Bug

Hi !
I am trying Next 13 new features.
In my /src/app/page.js file, I want to do a SSR page which list pokemons names.
As far as I understood, next 13 pages in app directory are, by default, SSG.
I followed the next 13 beta documentation and added { cache: "no-store", } to my code, to make my page SSR :

const fetchData = async () => {
  try {
    const response = await fetch("https://pokeapi.co/api/v2/pokemon", {
      cache: "no-store",
    });
    return response.json();
  } catch (error) {
    console.log(error);
  }
};

export default async function Home() {
  const data = await fetchData();
  return (
    <main>
      {data.results.map((item) => {
        return <p key={item.id}>{item.name}</p>;
      })}
    </main>
  );
}

When i try to build my app with yarn build, i have the error : DynamicServerError: Dynamic server usage: no-store fetch https://pokeapi.co/api/v2/pokemon /page

If i add export const dynamic = "force-dynamic"; in my file and build my app, it works and my page is SSR. But it doesn't need the { cache: "no-store", } option to work.

I think that the error come from the fact that next tries by default to build a SSG page and then realizes that mine is dynamic but I am not sure.

Did I miss something ? Am I suposed to use export const dynamic = "force-dynamic"; each time I want to do an SSR page ? If so, of what use is the { cache: "no-store", } option ?

Thank you very much for reading :)

Expected Behavior

When doing the yarn build command, my app should build and my page should be SSR.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[ratheo]

Looks like it happens when fetch is wrapped in a try catch block.

[TomRoberto]

indeed, thank you very much !

Does anyone know why ?

[zartinn]

For me this error is happening in development only every second time I route to the page using this fetch AND I don't have a try/catch block. For me it is I am making two requests at the same time. One can be done at build time and is not dynamic. The other one is dynamic. I have used the following code where this error is happinging:

const [staticData, dynamicData] = await Promise.all([getStaticData(slug, lang), getDynamicData()]);

Edit: I just tried to don't use promise all and just having two await after each other -> same problem. So it might have indeed something to do that some data is static and some dynamic? could it be?

[jamesvclements]

Getting the same thing using @vercel/kv:

It only happens when I navigate from a static page to a dynamic page (e.g. home → project/(slug))

[TrustyTechSG]

Getting the same thing using @vercel/kv:

It only happens when I navigate from a static page to a dynamic page (e.g. home → project/(slug))

Im also getting this exact same error with vercel KV, Im using the KV to save page data which will be used in server component during SSG only, don't understand why having this error.

[lnikell]

I'm getting "Dynamic server usage: no-store fetch" error too. If I use a fetch with no-store on a server component level(page.tsx) it starts throw an error on client side navigation using next/link. If I use { next: { revalidate: 0 }, } everything works fine, but I don't understand what's the point in that case of no-store if it breaks the projects.

[Vasyl-Pavlenko]

Same trouble with no-cache.
With { next: { revalidate: 0 }, all works.

But i have one more problem. My styles loading. but start to work only after reload the page.

[ioRekz]

Did you manage to solve it @TrustyTechSG @jamesvclements? I'm also using KV store and would like nextjs to cache the page entirely but it seems that vercel KV is forcing the no-store

[jamesvclements]

@ioRekz I think I switched to calling the endpoint directly:

[ph1lb4]

A more generic (pun intended) workaround building on @jamesvclements

"server-only";

export async function kvGet<T>(key: string): Promise<T> {
  const response = await fetch(`${process.env.KV_REST_API_URL}/get/${key}`, {
    headers: {
      Authorization: `Bearer ${process.env.KV_REST_API_TOKEN}`,
    },
  });
  const data = await response.json();
  return JSON.parse(data.result) as T;
}

[hux2]

indeed, thank you very much !

Does anyone know why ?

According to Next docs, Next needs to catch DynamicServerError to render SSR pages.

And your Try-Catch phrase may block this process.

Take a look the docs below:
https://nextjs.org/docs/messages/dynamic-server-error

[marco910]

I removed the Try-Catch block from my fetch function (fetching data from an API using fetch), but now I get the this error when requesting a route in production:

[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
  digest: 'DYNAMIC_SERVER_USAGE'
}

[ratigumashvili]

Removing try catch block also works for me. Any proper workaround?

[ceyhun-yildiz]

Same issue here, looking for a workaround. I'll post it when I find one

[evgeniyPP]

If you catch errors using try-catch, let errors with error.digest === 'DYNAMIC_SERVER_USAGE' pass through unhandled, then everything will work without problems:

if (error instanceof Error && 'digest' in error && error.digest === 'DYNAMIC_SERVER_USAGE') {
  throw error;
}