docs: Rewrite Rendering Section and React Essentials Page

[delbaoliveira]

We initially wrote the React page to introduce Server Components in the App Router, but over time, some implementation details have changed, and the information has become stale. The React team is working on adding new docs, so I'd like to change the narrative on the Next.js docs from "client vs. server components" to "writing code for the server and for the client" - and link back to the React documentation when it becomes available.

As React developers, we're very familiar with writing code for the client, it's nice and simple. But doing so comes at the expense of not being familiar with the server. The aim of these docs is to help developers become proficient in both the client and server environments.

I'd like to take it back to the foundations, and not use abstractions like SSG and CSR, MPAs or SPAs, as those terms come with their own set of assumptions that make it harder to understand how RSC works. Instead, we'll focus on the request lifecycle, show how application code flows from the server to the client, and discuss the trade-offs of doing operations in each environment.

• Page: Rendering Fundamentals
  • Environments: Client and Server
  • Request-response lifecycle
  • Network Boundary
• Page: Server Components
  • Benefits and use cases of server rendering
  • How to use Server Components in Next.js
  • How Server Components are rendered
  • Static Rendering
  • Dynamic Rendering
  • Streaming
• Page: Client Components
  • Benefits and use cases of client rendering
  • How to use Client Components in Next.js
  • How Client Components are rendered
    • Initial vs. Subsquent navigation
• Page: Composition Patterns
  • When to use client and server components
  • Server Component Patterns
  • Client Component Patterns
  • Interleaving Client and Server Components
• Diagrams will follow up with new PR.
• Set up redirects: https://github.com/vercel/front/pull/24917

[vercel-spaces]

Notifying the following users due to files changed in this PR:

@timneutkens, @ijjk, @shuding, @huozhi, @feedthejim:

docs/01-getting-started/03-react-essentials/01-server-and-client-components.mdx
docs/01-getting-started/03-react-essentials/02-rendering-deep-dive.mdx
docs/01-getting-started/03-react-essentials/03-suspense-and-streaming.mdx
docs/01-getting-started/03-react-essentials/04-async-components.mdx
docs/01-getting-started/03-react-essentials/05-composition-patterns.mdx
docs/01-getting-started/03-react-essentials/06-client-and-server-packages.mdx
docs/01-getting-started/03-react-essentials/index.mdx

This comment was posted based on the notify modifier.

[github-actions]

All broken links are now fixed, thank you!

[delbaoliveira]

Ok, these changes are ready for review 🎉

I'll work on diagrams separately.

[manovotny]

I see there is still a Set up redirect for React Essentials Page checkbox, but I saw a couple of others we might want too.

• https://nextjs.org/docs/getting-started/react-essentials
• https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic
• https://nextjs.org/docs/app/building-your-application/rendering/server-and-client-components (this was a WIP page anyway, so it might not need a redirect)

[AndKenneth]

This is going to be an absolute game changer when released. It totally reaches to the heart of the concepts and is going to unlock a lot of understanding. Amazing work @delbaoliveira, honestly can't wait.

[orca-security-us]

Orca Security Scan Summary

Status	Check	Issues by priority
Passed	Secrets	0   0   0   0	View in Orca

[delbaoliveira]

Thank you @AndKenneth ❤️

[leerob]

Great work @delbaoliveira 👏