next.jsnext.js13

Next's page.tsx export force-dynamic does not render dynamically

I have a page that I want to render dynamically and not statically. Unfortunately the universal answer of simply doing:

export const dynamic = "force-dynamic";

does not work. I've also tried

export const revalidate = 0;

and I've tried many combinations of those.

I know that it's being rendered statically because the client is not making any request to the server for 5 minutes after the page is visited, as is normal for statically rendered pages.

Another weird aspect is that I am using the cookie to do a fetch. No cache argument is specified for the fetch.

The page's path is /reports/income-statement, so it is not using slugs. Does that mean I can't force it to be dynamic? I'm also not using any searchParams (though it does accept searchParams).

Version: Tried with both Next 13.4.5 and 13.4.3

Solution

  • I believe I've found the answer to my problem: The Next 13 docs are wrong, or at least VERY misleading.

    When it comes to the Router Cache, you cannot configure a Page to be dynamic or not. Declarations like export const dynamic = 'force-dynamic' or export const dynamic = 'auto' are not respected for Pages. Likewise, the cache options for your fetch requests do not matter.

    Source: https://github.com/vercel/next.js/discussions/54075

    The only ways to affect the Router Cache are to use Server Actions OR to use router.refresh().