The App Router renders Server Components on the server and sends HTML plus an RSC payload; only Client Components are hydrated with browser JavaScript. Hydration succeeds when the client’s initial output matches the server output. Avoid browser-only values such as `window`, `Date.now()`, or random values during initial render; read them in a Client Component effect or render a stable placeholder first. Use `Suspense`/`loading.tsx` for async loading states.
Installs into .claude/skills of the current project.
Are you the author of Nextjs Server Components?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/hoangnguyen0403-nextjs-server-components-a0b4d614)
The App Router renders Server Components on the server and sends HTML plus an RSC payload; only Client Components are hydrated with browser JavaScript. Hydration succeeds when the client’s initial output matches the server output. Avoid browser-only values such as `window`, `Date.now()`, or random values during initial render; read them in a Client Component effect or render a stable placeholder first. Use `Suspense`/`loading.tsx` for async loading states.
