6 replies

[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

[id]/page.tsx

is considered dynamic if it contains an async default function. a

mypage/page.tsx

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

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?

[next13] dynamic page or function

[id]/page.tsx

[id]/page.tsx

is considered dynamic if it contains an async default function. a

mypage/page.tsx

mypage/page.tsx

next/headers

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?

[next13] dynamic page or function

Similar Threads

[next13] dynamic page or function

Similar Threads

Similar Threads

Similar Threads