Vary/mutate UI when user authenticated/unauthenticated in static page

Technical Questions
1

I’m building a drawer whose content I want to vary depending on wether the user is logged in or not. And I tried to push a session object down to a BuilderComponent via the data property, I was unsuccessful. To give you more context, I use react, and my current page, JSX-wise is basically a BuilderComponent. I tried passing down the result of a react hook, and also vanilla fetch: passing the raw result, unbouncing it, passing a function. Same with context.

But I was unsuccessful until I directly added a fetch function inside of a custom code in builder, I logged the results and voila, it had the data from a logged In user. The Issue is I cannot mutate the UI, just LOG the data.

So far I’ve tried setting a text to “I’m logged out”/“I’m logged in” (which “contains” the fetch and logs that work in custom code in builder) using a state, using the fetch directly, trying to mutate/set a state variable “state.isLoggedIn” to different values. Also tried to initialize in the “main” function. Nothing seems to mutate the UI, even if the fetch is successful.

To give you even more context: I’m using nextjs, this page is a [[...page]].tsx, and it uses a getStaticPaths method.

I temporarily added a div with the same text and using the same logic as I mentioned above, but using pure react/javascript and it works like charm when I log in/out

Is it possible to fix this or this works as Intended? Any recommendations?

2

The key here is that it’s a static page, so it will have no knowledge of you being logged in/logged out because it’s built once, on the server at build time, and the exact same page is served up every time.

The “easiest” way that I’ve found is to create a <ClientOnly> component which basically wraps whatever you want to be executed only client-side using a useEffect. Here’s the shared component we use:

export function ClientOnly({ children }: Props) {

  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    if (!isClient) {
      setIsClient(true);
    }
  }, [isClient]);

  if (!isClient) {
    return null;
  }

  return (
    <>
      {children}
    </>
  );
}