React Server Components: Elevating Speed, Interactivity, and User Experience

React Server Components offer an effective method for improving web app performance by rendering components on the server and streaming them to the client in real-time. This session will cover the functionality and benefits of React Server Components in context of Next.js, showing how they can increase application speed and responsiveness.

We’ll examine the role of asynchronous components, efficient data management, and modern React 19 features to improve load times and interactivity, while also measuring web vitals with Lighthouse to track performance improvements. With real-world examples and practical advice, you'll learn how to integrate these components to enhance your web app’s performance and provide a better user experience.

Transcript

1. React Server Components: Elevating Speed, Interactivity, and User Experience Aurora Scharff @aurorascharff
2. Introduction > Aurora Scharff > Norway, Oslo > Consultant at Crayon Consulting > Microsoft MVP in web dev > Active RSC developer with Next.js App Router
3. React Server Components
4. Partial hydration
5. React Server Components Fetch data asynchronously RSCs can be async and fetch their own data asynchronously right inside the component itself. Access backend resources RSCs are run only on the server and can therefore access backend resources directly. Reduce bundle size RSCs’ JavaScript is never shipped to the client and reduce the bundle size to build more performant apps.
7. Render RSCs on the server and stream each component down to the client as they complete, while displaying a loading fallback with Suspense. Streaming RSCs with Suspense
8. New development patterns and tools
9. Demo
10. Resolve promises deep in the tree and display appropriate loading fallbacks to increase performance and UX Best practice development patterns
11. Best practice development patterns Resolve promises deep in the tree and display appropriate loading fallbacks to increase performance and UX Display pending indicators to give immediate interaction feedback
12. Best practice development patterns Resolve promises deep in the tree and display appropriate loading fallbacks to increase performance and UX Display pending indicators to give immediate interaction feedback Put state in the URL as a single source of truth to allow the app to be reloaded, bookmarked or shared effectively
13. Best practice development patterns Resolve promises deep in the tree and display appropriate loading fallbacks to increase performance and UX Display pending indicators to give immediate interaction feedback Put state in the URL as a single source of truth to allow the app to be reloaded, bookmarked or shared effectively Progressively enhance to ensure your app is functional even before hydration has completed
14. Utilize React 19 features cache() - Perform per-render caching for expensive function calls. useOptimistic() - Respond to user interactions instantly even when the following request is slow. useFormStatus() - Display information about the latest form submission. use() - Suspend client components as they resolve a promise passed down. Enable Next.js features staleTimes - Set stales times for dynamic page segments to reuse them across subsequent requests. Partial Prerendering (experimental) - Statically render parts of the page or layout to improve performance. Tools
15. Tools Utilize React 19 features cache() - Perform per-render caching for expensive function calls. useOptimistic() - Respond to user interactions instantly even when the following request is slow. useFormStatus() - Display information about the latest form submission. use() - Suspend client components as they resolve a promise passed down. Enable Next.js features staleTimes - Set stales times for dynamic page segments to reuse them across subsequent requests. Partial Prerendering (experimental) - Statically render parts of the page or layout to improve performance.
16. GitHub Repo https://github.com/aurorascharff/next15- filterlist
17. References > https://19.react.dev/reference/react > https://nextjs.org/docs/app/building-your- application/data-fetching/fetching > https://nuqs.47ng.com/ > https://aurorascharff.no/posts/managing-advanced- search-param-filtering-next-app-router/
18. Thank you Twitter: @aurorascharff GitHub: @aurorascharff Blog: aurorascharff.no