Next.js Discord

Discord Forum

How can i have all data on page load?

Answered
Arboreal ant posted this in #help-forum
Open in Discord
Arboreal antOP
Right now, I have a navbar component that displays the current user. It retrieves the current user from a context I created. My problem is that it takes a few seconds after the page has already loaded to fetch the current user. The same delay occurs when switching pages. Is the only solution to make it a server component? This would make my project messier because I'd have to create a new client-side component for everything that uses useEffect or has an input.
Answered by Siberian
You might get user in middleware, ofcourse it depends from where you get that user, but getting it on server side and passing to a client (most efficient to pass just what needs to be passed).

That way it will be shown at render time and you can still do rest of your stuff from client components
View full answer

3 Replies

@Arboreal ant Right now, I have a navbar component that displays the current user. It retrieves the current user from a context I created. My problem is that it takes a few seconds after the page has already loaded to fetch the current user. The same delay occurs when switching pages. Is the only solution to make it a server component? This would make my project messier because I'd have to create a new client-side component for everything that uses useEffect or has an input.
Siberian
You might get user in middleware, ofcourse it depends from where you get that user, but getting it on server side and passing to a client (most efficient to pass just what needs to be passed).

That way it will be shown at render time and you can still do rest of your stuff from client components
Answer
Siberian
//page.tsx
  const cookie = cookies().get("name");
  const user: User = cookie ? await getUser(cookie.value) : null;

return  <Client user={user} />

here is a sample from my Firebase project