Theonlyway
TTCTheo's Typesafe Cult
•Created by Theonlyway on 11/16/2023 in #questions
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?5 replies