React Server Components: A New Way to Build Fast and Interactive Web Apps

React Server Components are a new feature that lets you render React components on the server and stream them to the client. This enables you to build rich user interfaces with minimal client-side code, while still preserving interactivity and performance.

In this talk, you will learn how React Server Components work, how to use them in your web apps, and what benefits they offer over traditional approaches. You will also see some real-world examples of React Server Components in action and get some tips and best practices for adopting them in your projects.

Transcript

1. React Server Components: A New Way to Build Fast and Interactive Web Apps Aurora Scharff @aurorascharff
2. React Server Components: Why should you care?
3. Introduction > Aurora Scharff > Consultant at Inmeta > Norway, Oslo > Full-stack, web-focused: active RSC developer
4. Talking points > Rendering strategies > React Server Components > Next.js App Router > RSC in Next.js “the right way” > Demo > Real world experience > The future of RSC
5. Rendering strategies
6. Static website rendering > Pages are pre-assembled and uploaded to a static host > Simple and efficient > Struggles with dynamic data and impractical to maintain
7. Multi-page applications (MPAs) > HTML and data are dynamically merged on the server > Serves the merged result on page load > Page reloads per request
8. pros √ Optimized for SEO √ Unlimited scalability √ More website insights Multi-page applications (MPAs)
9. pros √ Optimized for SEO √ Unlimited scalability √ More website insights cons × Slower perceived performance × Limited interactivity × Hard to maintain Multi-page applications (MPAs)
10. Single-page applications (SPAs, CSR)
11. Single-page applications, pros ✓ Instantaneous, app-like feel ✓ Easy to debug ✓ Caching capabilities
12. Single-page applications, cons × Slow initial load × SEO suffers × Needs JavaScript × Less secure
13. SPA vs. MPA lifecycle
14. Server-side rendering (SSR) > Pre-render the initial HTML on the server > Fully-formed HTML when opening the page > JavaScript is fetched alongside it
15. Static site generation (SSG) > Pages are pre-assembled and uploaded to a static host > Requires site redeployment whenever data changes > JavaScript is fetched alongside it
16. Server-side rendering (SSR) > Included feature in JavaScript “meta-frameworks” > Build time (SSG) and/or request time (SSR) > Pages generated in the build can be cached
17. Hydration
18. Hydration Hydration is like watering the “dry” HTML with the “water” of interactivity and event handlers. - React core team member Dan Abramov https://github.com/reactwg/react-18/discussions/37
19. Server-side rendering
20. The problem
21. The problem 1. You have to fetch everything before you can show anything 2. You have to load everything before you can hydrate anything 3. You have to hydrate everything before you can interact with anything
22. Strategies to improve it > Partial hydration: only attach JS to certain components > Progressive hydration: lazy load JS to certain components > Selective hydration: priority load JS to certain components based on user interactivity
23. Streaming > Split a request into chunks > Send each chunk as a stream to the client > Render each chunk as it is streamed in
24. https://www.datastax.com/blog/fetch-streams-api-for-faster-ux-generative-ai-apps
25. React Server Components
26. What are they?
27. “The server”
31. Interactive/Client Components
33. https://nextjs.org/docs/ap p/building-your- application/rendering/com position-patterns
34. How do they work?
35. The RSC Payload
41. Benefits of using RSC
42. Benefits √ Data fetching + access to backend resources
43. Benefits √ Data fetching + access to backend resources √ Security
44. Benefits √ Data fetching + access to backend resources √ Security √ Caching
45. Benefits √ Data fetching + access to backend resources √ Security √ Caching √ Bundle size + performance
46. Benefits √ Data fetching + access to backend resources √ Security √ Caching √ Bundle size + performance √ Streaming + suspense integration
47. Benefits √ Data fetching + access to backend resources √ Security √ Caching √ Bundle size + performance √ Streaming + suspense integration √ Developer experience
48. Drawbacks of using RSC
49. Drawbacks × Require a framework
50. Drawbacks × Require a framework × Increased complexity
51. Drawbacks × Require a framework × Increased complexity × Learning curve
52. Drawbacks × Require a framework × Increased complexity × Learning curve × Early adoption
53. Next.js App Router
55. |
60. RSC in Next.js “the right way”
68. Data management
71. Server Functions
72. Server Functions > Mark a function/file with “use server” > Next.js creates a “hidden” API endpoint for you > Use the function in any component > Provides a type-safe RPC-experience
79. Demo
82. Real world experience
83. Requirements > Interactive dashboards > Complex forms and tables > Articles through a CMS, static data > Need for SEO > Mobile friendly and accessible > Multiple language support > Customer’s own UI library
84. cons × Wrappers for custom library × Trial and error i18n × Limited testing resources Experience
85. pros √ Performant app that fulfills requirements √ Maintainable app code √ Enjoyable DX Experience cons × Wrappers for custom library × Trial and error i18n × Limited testing resources
86. The future of RSC
88. “Elkjøp's Digital Transformation” https://vercel.com/blog/elkjops-digital- transformation-with-next-js-and-vercel https://www.kode24.no/artikkel/elkjop- bytta-ut-angular-med-nextjs- morsomste-jeg-har-gjort/81543342 https://www.youtube.com/watch?v=4wOqpP dR1tg
89. The future of RSC
90. Resources “Remix Jokes” GitHub repo: aurorascharff/next15-remix-jokes-rebuild
91. Resources > React docs > Vercel Next.js App Router docs > Vercel template apps and examples > Vercel “Learn Next.js” free course
92. Github: aurorascharff/next15-remix-contacts-rebuild-v2 More complex demo app
93. youtube.com/@codewithantonio youtube.com/@bytegrad
94. https://nextjs.org/blog/security-nextjs-server-components-actions
95. Thank you Twitter: @aurorascharff GitHub: @aurorascharff Blog: aurorascharff.no
96. Questions?