Theo's Typesafe Cult•2y ago

[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>
  );
}

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?

6 Replies

Neto•2y ago

export const revalidate = 60; // revalidate this page every 60 seconds

Neto•2y ago

https://beta.nextjs.org/docs/data-fetching/caching

Data Fetching: Caching | Next.js

Learn about caching and revalidating data in Next.js.

Helge•2y ago

I tried that but the page is not getting refetched upon navigation. I tried setting it to 0 and 1 but again the content only refreshes when I do a hard refresh

Neto•2y ago

next 13 baby

Helge•2y ago

Doing a noop with headers() also works but man why

Neto•2y ago

next 13 baby

Gaming

Programming

[next13] dynamic page or function