CODEWITHSUNDEEP
next.jssupabase
Victor M
Victor M

Reputation: 759

Supabase sessions with NextJS SSR/SGR?

I'm wondering if it is currently possible to have Supabase work with both server + client rendering. It seems as though we must generally choose one or the other, but NextJS allows one to define SSG (server-side generated), SSR (server-side rendered), and CSR (client-side rendered) pages.

For example, the webapp example for NextJS + Supabase seems to indicate that we should SessionContextProvider; however, wrapping the entire app in this context provider requires useState, which to my understanding will render the entire app as client-side rendered.

Supabase has a server-side rendering solution, but then this seems to require us to manually handle components/pages that we want to render client-side. For each component that requires authentication, we would need to explicitly make a session call, which seems unnecessarily excessive.

With the NextJS-13 beta, we can explicitly define server components, and it seems Supabase has a beta solution too. However, I was wondering if it is currently possible to do this without the beta?

Upvotes: 0

Views: 1200

Answers (1)

ivanatias
ivanatias

Reputation: 4033

Wrapping the entire app in this context provider requires useState, which to my understanding will render the entire app as client-side rendered.

No, it won't cause the entire app to be CSR. The use of React hooks on pages folder components (including _app.js) won't cause the page to be client-side rendered, it will still be pre-rendered (as long as there are no blocking data requirements, e.g. using getServerSideProps or getInitialProps in the case of _app.js, see Automatic Static Optimization) and then sent to the client to be hydrated. This is also true for pages/components marked as client-components on Next.js v13 app directory feature, they will still be pre-rendered.

The only way in which Next.js won't server-render a component is if using dynamic imports and setting ssr to false (doesn't apply for page components).

Upvotes: 0

Related Questions