NextJS Server Components and Subscriptions Example about nhost

[dbarrosop]

Hi,
you have a comprehensive example here: https://github.com/nhost/nhost/tree/main/examples/quickstarts/nextjs-server-components

There is also some SSR stuff here: https://github.com/nhost/nhost/blob/main/examples/nextjs/pages/public-ssr.tsx

Unfortunately, there are too many ways to do different things with Next.js, making it challenging to cover all in a single example. As a result, various things may be illustrated across different examples :(

Regards

[jovermier]

The SSR example shows how to set the session using the pages router in nextjs but this approach I don't think is compatible with app router. The server components example using app router does not show how to configure NhostProvider nor NhostApolloProvider.

[jovermier]

I created a repo based off of the nhost server components quickstart project. It is still very buggy but with the issue mentioned in the original post. It does implement SSR data fetch, CSR data fetch, and CSR subscriptions.

I had to do some hacking on the NhostSession cookie as the different nhost packages seem to expect different formats.

https://github.com/jovermier/nhost-nextjs-app-router

[dbarrosop]

I created a repo based off of the nhost server components quickstart project.

Great, this is very cool. I will ask a colleague to take a look. Is there anything in particular you need help with here?

I had to do some hacking on the NhostSession cookie as the different nhost packages seem to expect different formats.

What do you mean? Could you point me to the inconsistencies, please? AFAICT the only valid type for the NhostSession is the one defined here

[jovermier]

The quickstart nextjs-server-components example base64 encodes the session. I wasn't sure what the reason for that was. The @nhost/nextjs and @nhost/react packages seem to set the cookie not base64 encoded.

nhost/examples/quickstarts/nextjs-server-components/src/utils/nhost.ts

Line 20 in 614c20c

const initialSession: NhostSession = JSON.parse(atob(sessionCookieValue) || 'null')

I am going to continue working on the example project today to better demonstrate the challenges keeping the auth state in sync.

[jovermier]

I also added auth state on the home page. This produces error Error: Text content does not match server-rendered HTML. This demonstrates some of the weirdness around keeping the state synced.

Logging in and out does not invalidate the cache on the client rendered components. I would have expected the @nhost/nextjs version to properly handle this.

[jovermier]

Here is an example of coming back to localhost after an hour. The refresh token in the browser automatically gets a user session but hasura claims and the session are null.