React Server Components: Elevating Speed, Interactivity, and User Experience Aurora Scharff @aurorascharff

Introduction > Aurora Scharff > Norway, Oslo > Consultant at Crayon Consulting > Microsoft MVP in web dev > Active RSC developer with Next.js App Router

React Server Components

Partial hydration

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.

No content

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

New development patterns and tools

Demo

Resolve promises deep in the tree and display appropriate loading fallbacks to increase performance and UX Best practice development patterns

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

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

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

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

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.

GitHub Repo https://github.com/aurorascharff/next15- filterlist

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/

Thank you Twitter: @aurorascharff GitHub: @aurorascharff Blog: aurorascharff.no