How do I useContext with SSR when the JSX in the middle is SSR but top-bottom rendered client-side?
Unanswered
Red-tailed wasp posted this in #help-forum
Red-tailed waspOP
I'm not trying to hold any state on my server and would like to render as much of my header, side nav, main component, and footer as possible on the server. I have some user client-side options I get from my database, and I want to useContext to pass the options to part of the header (upper right standard user login/settings widget, search widget is client-side) and main component. My user options has the client-side profile information as well as some configurations I use in the main component. What is the best design pattern for this (using Clerk) that avoids multiple database transactions.
6 Replies
Original message was deleted
ye
Original message was deleted
the onClick will only be run in the client...
How do I useContext with SSR when the JSX in the middle is SSR but top-bottom rendered client-side?You can create a client component insdie your SSR server compoennt and access the top level context from maybe, a client component that is on your parent route segment
Red-tailed waspOP
This pattern that was recommended by the Next.JS React Essentials documentation doesn't make sense. I need to render the entire page server side so it loads right on the client, then I need to hydrate the page with the client-side useState and useContext.
Red-tailed waspOP
Next.JS renders client components on the server and hydrates them on the client, unlike React, which renders everything on the client. Just make it all a client component. You would only render it on the server in situations similar to when you're trying to get stuff from a database where you need an API key. When anything changes in the useContext, then that entire DOM node will update, but it will still be server-side rendered then hydrated. User configurations change, as they change infrequently so it's fine if the entire page re-renders when the configuration options change.