Dynamic header on a static page #51187

nedak96 · 2023-06-12T17:40:26Z

nedak96
Jun 12, 2023

Hello! I'm curious if there is any guidance on how to go about having some dynamic content based on auth state, but otherwise having static content. Here is a basic example

layout.tsx

import { cookies } from 'next/headers';

const Header = () => {
  const isLoggedIn = cookies().get('access-token');

  return (
    <header>
      {isLoggedIn ? <button>Logout</button> : <button>Login</button>}
    </header>
  );
};

const Layout = ({ children }) => {
  return (
    <htm>
      <body>
        <Header />
        <main>{children}</main>
      </body>
    </html>
  );
};

export default Layout;

page.tsx

(I want to statically generate this content)

import { prisma } from 'lib/prisma';

const Home = async () => {
  const items = await prisma.items.findMany();

  return (
    <ul>
      {items.map((item) => <li>{item.name}</li>}
    </ul>
  );
};

return default Home;

When I build this page, I get the message warn Entire page / deopted into client-side rendering and the page refetches the data on every load and SSR the HTML. I know the dynamic header would need to be SSR'd, but I'm less worried about that.

One solution that seems to work is separating these into two pages and using middleware to rewrite based on auth state

middleware.ts

const middleware = async (req) => {
  const isLoggedIn = !!req.cookies.get('access-token')?.value;
  if (req.nextUrl.pathname === '/' && isLoggedIn) {
    const url = req.nextUrl.clone();
    url.pathname = '/protected';
    return NextResponse.rewrite(url);
  }
  if (req.nextUrl.pathname === '/items' && !isLoggedIn) {
    const url = req.nextUrl.clone();
    url.pathname = '/';
    return NextResponse.redirect(url);
  }
  return NextResponse.next();
}

return default middleware;

layout.tsx

const Layout = ({ children }) => {
  return (
    <htm>
      <body>
        {children}
      </body>
    </html>
  );
};

export default Layout;

(authenticatedRoutes)/layout.tsx

const AuthenticatedLayout = ({ children }) => {
  return (
    <>
      <header>
        <button>Logout</button>
      </header>
      <main>{children}</main>
    </>
  );
};

export default AuthenticatedLayout;

(authenticatedRoutes)/protected/page.tsx

import { prisma } from 'lib/prisma';

const Home = async () => {
  const items = await prisma.items.findMany();

  return (
    <ul>
      {items.map((item) => <li>{item.name}</li>}
    </ul>
  );
};

return default Home;

(unauthenticatedRoutes)/layout.tsx

const UnauthenticatedLayout = ({ children }) => {
  return (
    <>
      <header>
        <button>Login</button>
      </header>
      <main>{children}</main>
    </>
  );
};

export default UnauthenticatedLayout;

(unauthenticatedRoutes)/page.tsx

import { prisma } from 'lib/prisma';

const Home = async () => {
  const items = await prisma.items.findMany();

  return (
    <ul>
      {items.map((item) => <li>{item.name}</li>}
    </ul>
  );
};

return default Home;

This seems to work, but there is much more code than I'd like there to be. Does anyone have guidance on the best way to do this? Maybe just caching the db response is enough, or maybe even conditional parallel routes. Thanks in advance!

mxhold · 2024-07-13T18:15:41Z

mxhold
Jul 13, 2024

Partial Prerendering might help you out with this though it is currently experimental.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Dynamic header on a static page #51187

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Dynamic header on a static page #51187

Uh oh!

nedak96 Jun 12, 2023

layout.tsx

page.tsx

middleware.ts

layout.tsx

(authenticatedRoutes)/layout.tsx

(authenticatedRoutes)/protected/page.tsx

(unauthenticatedRoutes)/layout.tsx

(unauthenticatedRoutes)/page.tsx

Replies: 1 comment

Uh oh!

mxhold Jul 13, 2024

nedak96
Jun 12, 2023

mxhold
Jul 13, 2024