Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

React Server Components

Slide 4

Slide 4 text

Partial hydration

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

New development patterns and tools

Slide 9

Slide 9 text

Demo

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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/

Slide 18

Slide 18 text

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