Slides

Google Slides

Prerequisites

• Node.js 20.11.0 and npm 10.2.4

  I recommend using a version manager like Volta, asdf or nvm.

• Git

• A code editor

  I recommend Visual Studio Code.

• A Cloudflare account

  Sign up and verify your email address.

Getting started

1. Clone the workshop repository with Git:

   git clone https://github.com/GregBrimble/react-server-components-workshop.git
   

   Or if you prefer using SSH:

   git clone [email protected]:GregBrimble/react-server-components-workshop.git
   

2. Open this folder in your favorite code editor. I recommend VSCode.

3. Install the dependencies using npm:

   npm install
   

4. Log in with Wrangler:

   npx wrangler login
   

5. Populate the CLOUDFLARE_WORKERS_SUBDOMAIN value in ./constants.ts. You can find your subdomain in the sidebar of the Cloudflare Workers & Pages dashboard.

6. Get started with the first exercise in ./exercises/1-client-side-rendering. Check out the README.md file for instructions!

Contents

1. Client-side rendering
2. Intro to Workers
3. Server-side rendering
4. RSC data loading
5. RSC compiler
6. Loading data from a database
7. Smart Placement

What's next?

Thank you for participating in this React Server Components 2024 workshop! I hope you found it valuable and had fun. If you're interested in being notified when my next workshop will be available, please sign up here!

After you've completed this workshop, there is much more you can explore with React Server Components and the Cloudflare Developer Platform. Some other topics of interest may include:

• Server Actions
• Module splitting
• Lazy-loading on the client (and server!)
• AsyncLocalStorage
• Cloudflare Durable Objects
• Flight ESM fixture
• Aviation