Demystifying React Server Components
with NextJS 13 App Router

This purpose of this application is to demonstrate the concepts and code of React Server Components in NextJS13 in a way that exposes what is really happening.

Audience: Experienced React developers who are perhaps new to RSC. Or people using RSC who want to understand more about how it works.

Clone on GitHub.

This tutorial is intended to be stepped through linearly, but you may jump to any page below.

Important Notes

Contents

1. Important Notes
2. Static Content
3. Virtual DOM
4. Integrating Client Components
5. Hydration Failure
6. Disabling SSR for Client Components
7. Disabling Component SSR Server-Side
8. Client Component Details
9. Server Components as Children of Client Components
10. Importing Server Components into Client Components
11. async Server Components
12. Streaming with Server-Side Suspense
13. Dynamically Updating Server-Rendered Content
14. RSC Caching
15. Server Functions?
16. RSC FAQs
17. App Router Demos (These are very much a WIP, converting and improving from an old demo)
    • nested/routing/
    • [dynamic-routes]
    • (route-groups)
    • @parallel-routes
    • Router Refresh