Session Spotlight

Bonnie Schulkin

Camp Counselor

Ask your Doctor if React Server Components are Right for You

Event Logo

Tuesday, July 30, 2024 - 3:30 PM UTC, for 1 hour.

Regular, 60 minute presentation

Room: African 50

React
React Server Components
Next.js

Curious about React Server Components? Want to know what they’re all about, and when to use them? This activity is for you! We’ll start this interactive talk by discussing, well, JavaScript interactivity. Then the audience will participate in the first quiz: given some example scenarios, is interactive JavaScript required? We’ll move on to the web communication chain: user → client → server → database, and discuss why it can’t be broken. This emphasizes the importance of *where* the React code runs: interactive JavaScript can run on the client but not the server. I’ll present Server Side Rendering (SSR) as a potential solution for some of the communication chain issues that have been raised, including code using the Next.js `pages` router. Don’t fall for it! It’s a trap! I hope to convince you that React Server Components are a better solution. To that end, I put my salesperson hat on and tout the benefits of React Server Components: direct access to the database, and smaller JavaScript bundles sent to the client. I compare the code of a client component and a React Server Component (using the Next.js `app` router) to highlight the streamlined syntax. I also present a common pattern of a server component parent with a client component child. A teacher at heart, I want to give you a chance to apply what you’ve learned. The talk ends with another interactive quiz, this time presenting scenarios and asking the audience to choose the most effective solution: client component, server component, or both. The quiz may have some tricky questions toward the end (who are we kidding, the quiz definitely has a couple tricky questions toward the end). This will lead us into a discussion of server actions and Suspense, ways to get some client-like functionality in a server component. At the end of the activity, you will have passed both quizzes (at least that’s what you can tell your friends), and you’ll be ready to take full advantage of React Server Components in the Next.js `app` router.

Prerequisites

This activity assumes some familiarity with React (the notion of components, in particular), and web development in general (usage of client-side JavaScript, communication between client and server, awareness of the DOM).

Take Aways

  • Learn when to use React Server Components.
  • Learn when *not* to use React Server Components.
  • Learn how to use server actions and Suspense in place of client components.
favorited by:
Drew Nys Josh Gretz Avindra Fernando Caleb Soper Matt Frye Joshua Doro Christopher Baker James McCollum Matt Netkow Nerando Johnson Joel Keyser Clark Sell Brett Allenstein Hannah Reuss Justin Weyenberg