Docs: Next 13 static/dynamic without fetch() API

What is the improvement or update you wish to see?

I would like the docs to explain a bit more about static/dynamic rendering without using the fetch() API. Eg. when using API clients like @upstash/redis.

Is there any context that might help us understand?

I’m migrating an ISR Next 12 pages/mypage/[id].tsx to Next 13 app/mypage/[id]/page.tsx and I couldn’t find how to configure static/dynamic when I’m not using the fetch() API. The docs seem to be written around the expectation that the user will either use the fetch() API or the dynamic functions. I’m using @upstash/redis client and want to configure the page to be server rendered only once and be statically served from the global cache for subsequent requests. I even want to be able to use On-Demand Revalidation so I could server render the page when the id is created so users will only ever read the page from the global cache. How would I go about it in Next 13?

Does the docs page already exist? Please link to it.

https://beta.nextjs.org/docs/rendering/static-and-dynamic-rendering#static-data-fetching-default

[icyJoseph]

I have a page which shows data from a cookie, but the data is only fresh upon hard loading of the page. SPA transitions into it do not trigger a server fetch, though I am using export const dynamic = "force-dynamic" I’ve also tried with a config object with a dynamic property, still nada.

Anyone got any pointers?

Here’s a repo, https://github.com/icyJoseph/next-js-react-gbg/tree/next-13-css-modules, this branch has app/collections/page.tsx which works exclusively with cookies. I cannot get it to behave like GSSP, in spite of various attempts. This is the file: https://github.com/icyJoseph/next-js-react-gbg/blob/next-13-css-modules/demo-app/app/collection/page.tsx

Here’s a live version, with still major broken stuff (can’t see Pokémon), https://next-js-react-gsh7kasta-icyjoseph.vercel.app/, go to capture, click on the Pokéball, and independently of the result, go to collection, the pages version of this website shows the encounter, the app version needs a hard refresh. https://next-js-react-gbg.vercel.app/

[timneutkens]

I have a page which shows data from a cookie, but the data is only fresh upon hard loading of the page. SPA transitions into it do not trigger a server fetch, though I am using export const dynamic = “force-dynamic” I’ve also tried with a config object with a dynamic property, still nada.

You’re likely seeing https://beta.nextjs.org/docs/routing/linking-and-navigating#soft-navigation, in this case you might want to router.refresh() on the page itself if it always needs fresh data. Soft navigation is set up to integrate with the upcoming mutations implementation.

Looks like Segment Config is what I want.

The default is to do a static render pass during next build for all routes, only if you opt-out of static using headers, cookies, the segment config (force-dynamic) or fetch with cache: 'no-store' does it end up rendering on-demand. In the case where you’re not using fetch (e.g. redis, prisma, etc) you can use the segment-level config to get the same result as what fetch() allows.

Static rendered routes support on-demand revalidate.