Helge Posts - Answer Overflow

Helge

Explore posts from servers

•Created by Helge on 5/31/2023 in #questions

Next13 app-router: How to get request headers on client page comp?

All my pages are client components because I want to use page transitions and need to wrap them in a provider from framer-motion. But I also now need request headers on specific pages. How would you do that? Any ideas?

8 replies

TTCTheo's Typesafe Cult

•Created by Helge on 3/10/2023 in #questions

vercel next13 app-router: routing on prod is not clientside

I am having a weird issue. Invoking my local build with vercel dev all my routes in the header are client side navigations as they should be. But when I deploy to vercel the navigation is not clientside anymore and every navigation is a full page refresh. Has anyone some expertise with this issue and can help me out?

2 replies

TTCTheo's Typesafe Cult

•Created by Helge on 11/1/2022 in #questions

[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?

7 replies

Gaming

Programming