Static rendering with conditional auth
I'm a relatively new front end guy. I understand pretty much all the basics to build a front end but not neccessarialy all the best ways to do it. My day job is backend so I'm just trying to design a UI that is good enough to run the backend stuff I'm trying to do. The stack I've chosen is Next.js and Clerk.
I've basically run in to https://github.com/orgs/clerk/discussions/1764 where I have a home page that I want to be static rendered but since I have a nav bar with a conditional component (Basically just an avatar if they are logged in else a login button if they aren't) it in that relies on auth (cookies) the page gets rendered as dynamic.
I don't particularly see a way around it with how clerk requires you to wrap the entire root HTML element with it's provider (Moving it further down the tree doesn't really change anything as it just encountered the same problem I'll describe further down).
My nav bar component is in my
layout.tsx and I could move it to lower in my tree and render a different nav bar for the homepage but then I have two different behaviors where the homepage doesn't have a functional avatar but then they login and navigate to auth protected pages they do and when they navigate back home it disappears. It's not great.
So I'm wondering if anyone has any design patterns on how they handle rendering conditional items with static rendering based on weather or not the user is logged in?GitHub
ClerkProvider Should Not Force All Children to Render Dynamically ·...
Preliminary Checks I have reviewed the documentation: https://clerk.com/docs I have searched for existing issues: https://github.com/clerkinc/javascript/issues This issue is not a question, general...
Solution:Jump to solution
wrap the user avatar in a Suspense where the fallback is a generic user icon/avatar and the actual avatar component uses cookies or whatnot (a session from Clerk) to do it's thing, making sure that the Clerk thing is Suspense-enabled (or that you use cookies, headers or noStore)
2 Replies
Solution
wrap the user avatar in a Suspense where the fallback is a generic user icon/avatar and the actual avatar component uses cookies or whatnot (a session from Clerk) to do it's thing, making sure that the Clerk thing is Suspense-enabled (or that you use cookies, headers or noStore)
then once PPR is functional it will do the static shell for you that will include the generic fallback avatar and your actual user avatar will get streamed in per user