How to show a dynamic user profile in the header while keeping a statically generated page in Next with Auth.js (without PPR)

Explanation: Server side auth check - "await auth()" opts the entire page into a dynamic rendering. Most of the time it's fine, as you likely use some user specific content on the page, so it will be dynamic anyway. However, sometimes you might want to combine the dynamic user profile in the header with a static page (example: landing page). The simplest way to do this right now, is to use the client version of auth. In case of Auth.js it's useSession hook. By using this hook you tell the component to send a request to "api/auth/session" on the client to get user data. This way we can keep the underlying page static. P.S. You can use server side auth - "await auth()" with static page using PPR. Just wrap the dynamic part with Suspense and Next will statically generate entire page and dynamically stream in the Suspense bit. But PPR is still experimental.

Discover Add secure, embedded signing to your WordPress site in seconds. Try now!

How do you get that static route notification at the bottom left?

must admit that it took me a while to understand that passing a server component as a prop/child to a client component is a trick to avoid moving the client boundary.

What page type you get after building next app? In my case I’m also using the same logic. Root layout has session provider component that wraps all children. Even static pages under that layout are built as dynamic (with f flag instead of cycle)

What’s the difference between

Between what and what?

It’s a must-have. I’ve seen someone raise an issue about it.

hey a quick question why does it matter if the page is statically or dynamically generated?

Static pages are faster and cheaper. Next, pre-generate HTML (during the build time) that can be served via CDN close to your users. Plus, it reduces the server load/hosting costs, as you don't need to re-render a page on the server on every request.