Posthog analytics in NextJS

[steep rover]

Hey everyone, I was reading through posthogs blog article here https://posthog.com/tutorials/nextjs-app-directory-analytics about getting analytics into next app router, and I just had a question about clarifying how use client and client rendering actually works.

In it he's creating a providers.js file and inserting a context at the layout level of the app router.

I was reading this page: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-third-party-packages-and-providers

Is this essentially undoing much of the RSC/server rendering of nextjs and having the initial server rendered version be.... the html tag and the rest of the app a downloaded client component?

Just trying to understand this once and for all, but the server cant provide you with a client component on first load/paint right? This would come after that?

[spring oxide]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[visual carbon]

client component will still render on server which mean the page will be fully SSR

[steep rover]

I see! So what actually defines the boundary for a client/server component, a Suspense element?

[visual carbon]

streaming with suspense will render on client

[steep rover]

Alright, I'm pretty sure I get it. This is all so new and weird to me still.

is the lifecycle then:

1. Render on server
2. Show server rendered version to client as first paint
3. Hydrate the server rendered version with any JS from client components
4. Stream in components with Suspense

Ah right, seems that way.

I understand now, thanks @visual carbon

[visual carbon]

yep

[steep rover]

how i feel learning RSC's/next14