Splitting client and server code
Answered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
Hi All,
I'm new to using Next.js and have been following the docs on the website, and have managed to follow pretty well. I've set up authentication with GitHub, but at the minute, it's all rendered on the client, which is causing a bit of an issue because I get a temporary flash of being logged out (ie, the sign in button shows when I'm already logged in). I am pretty sure this is because I'm doing everything on the client.
I've been trying to split my code out to prevent this, but I've thus far been unable to figure out a way to do it; it's even trickier, because I have a dropdown menu that needs to
(See attached for what I'm currently working with)
I'm new to using Next.js and have been following the docs on the website, and have managed to follow pretty well. I've set up authentication with GitHub, but at the minute, it's all rendered on the client, which is causing a bit of an issue because I get a temporary flash of being logged out (ie, the sign in button shows when I'm already logged in). I am pretty sure this is because I'm doing everything on the client.
I've been trying to split my code out to prevent this, but I've thus far been unable to figure out a way to do it; it's even trickier, because I have a dropdown menu that needs to
useState which is obviously only available on the client; does anyone have any examples, or can point me in the right direction of potentially splitting this up so that I can avoid the temporary flash of being logged out?(See attached for what I'm currently working with)
Answered by muadpn
getServerSession()
can be used at server components and you can do the condition whether the signin button should be rendered or not
can be used at server components and you can do the condition whether the signin button should be rendered or not
5 Replies
Asiatic LionOP
(What I currently have)
getServerSession()
can be used at server components and you can do the condition whether the signin button should be rendered or not
can be used at server components and you can do the condition whether the signin button should be rendered or not
Answer
const session = await getServerSession(authOptions);
if (!session) notFound();
if (!session) notFound();
and don't make the navbar a fully rendered client component, make things on the edge as a client component. eg something that SEO doesn't want to know about. make the rest of it a server components.
Asiatic LionOP
Ah that worked, tysm!