Theo's Typesafe CultTTC
Theo's Typesafe Cult•4y ago
Helge

[next13] dynamic page or function

Hey yall I am having troubles understanding RSC and how next handles regen of pages. Basically I have a simple fetch / async call in my page. This page does NOT get regenerated upon navigation. Only when I hardload the page by hitting cmd+r.

Docs say that all pages are static unless they are dynamic by having something in them that is only known at request time. For example a 
[id]/page.tsx
 is considered dynamic if it contains an async default function. a 
mypage/page.tsx
 is not considered dynamic, even if its exporting an async default function.

So far the only way I have found to regen a page upon navigation to get the latest data is to either access cookies() or headers() from 
next/headers
 which is bonkers.

So what I end up now is like ugly af
import { headers } from 'next/headers';
import { PageProps } from '@/lib/getCategories';

export default async function Page({ params }: PageProps) {
  const head = headers(); // forces page to be revalidated on every request
  const joke = await fetch('https://icanhazdadjoke.com/', {
    headers: {
      Accept: 'application/json',
    },
    cache: 'no-store',
  }).then((res) => {
    return res.json();
  });
  return (
    <div>
      <h1>Dad Jokes</h1>
      <p>{joke.joke}</p>
    </div>
  );
}


What is the normal way to do this?
Was this page helpful?