Activity Spotlight

Ask your Doctor if React Server Components are Right for You

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.