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
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?
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.tsxSo 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
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
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)
Was this page helpful?
