Next.js Static Route Issue with Async Child Component in Navigation Bar

Unanswered

Little yellow ant posted this in #help-forum

Little yellow antOP

2023-07-31T05:45:07.000Z

In my root layout, I have a navigation bar. The Navigation bar is static but it has a child that uses the async function so it is a react server component. But the problem is when I am building the project all the pages are marked as react Î» (Server) components. Even though the routes are static HTML elements. I am using the next 13.4.4 and the app router. If I removed the navigation bar from the layout and build all routes are marked as static. (the navigation bar in separate folder :))

15 Replies

Rafael Almeida

2023-07-31T05:48:03.000Z

are you using any of the dynamic functions in the navigation bar component? like reading headers or cookies, or making fetch calls without cache? these would change the rendering method of the page to be dynamic

here is the list of all dynamic functions: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering#dynamic-functions

@Rafael Almeida are you using any of the dynamic functions in the navigation bar component? like reading headers or cookies, or making fetch calls without cache? these would change the rendering method of the page to be dynamic

Little yellow antOP

2023-07-31T05:51:57.000Z

No I am just using a next-auth getServerSession function inside a child component of the navigation bar.

Rafael Almeida

2023-07-31T05:53:10.000Z

I am pretty sure this makes use of dynamic functions, you can't read user data in static pages because well they are static. so it makes sense to change the rendering to dynamic

you can check their code to confirm

if you want the pages to be static you need to change the user fetch strategy to happen only on the client (probably with an useEffect) but that means you will have a small flash with no user state

Little yellow antOP

2023-07-31T05:55:19.000Z

import { NavUserSection } from "./NavUserAvatar";
import { HomeButton } from "./HomeButton";
import NavBarButton from "./NavButton";

function NavigationBar() {
  return (
    <header className="bg-white dark:bg-slate-900">
      <div className="max-w-screen-xl px-4 mx-auto sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center gap-6">
            <HomeButton />
          </div>

          <div className="hidden md:block">
            <nav aria-label="Global">
              <ul className="flex items-center gap-6 text-sm">
                <li>
                  <NavBarButton href="/course" text="Course" />
                </li>

                <li>
                  <NavBarButton href="/blog" text="Blog" />
                </li>
              </ul>
            </nav>
          </div>

          <NavUserSection />
        </div>
      </div>
    </header>
  );
}

export default NavigationBar;

the HomeButton and the NavUserSection is react server component

@Rafael Almeida I am pretty sure this makes use of dynamic functions, you can't read user data in static pages because well they are static. so it makes sense to change the rendering to dynamic

Little yellow antOP

2023-07-31T05:56:07.000Z

import { getAuthSession } from '@/lib/auth';
import { HomeButtonMotion } from './HomeButtonMotion';

export async function HomeButton() {
  const session = await getAuthSession();
  const isAuth = !!session?.user;

  return <HomeButtonMotion isAuth={isAuth} />;
}