Tweet
Tweet

Slide 1

Slide 1 text

Hands-on React Server Components, Server Functions, and Forms in the Next.js App Router Aurora Scharff @aurorascharff

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Aurora Scharff > Involved in React development community at Meta, represented them at their own conference React Conf in May > Spoke at Next.js Conf in San Francisco in October

Slide 4

Slide 4 text

In this workshop, we will explore React's latest features: Server Components, Server Functions, and forms. Discover how to optimize server-side rendering, enhance application interactivity with Server Functions and multiple new React 19 hooks, and create robust forms for efficient data handling and validation. Designed for developers of all levels, this workshop provides practical skills to build scalable, performant web applications.

Slide 5

Slide 5 text

Workshop plan > Rendering on the web (slides) > App Router (slides) > Server components > Client components > Introduction to React 19 (slides) > Server Functions, Actions and forms > React 19 > Exercise (leftover time/take-home)

Slide 6

Slide 6 text

Rendering strategies

Slide 7

Slide 7 text

Static website rendering > Pages are pre-assembled and uploaded to a static host > Simple and efficient > Struggles with dynamic data and impractical to maintain

Slide 8

Slide 8 text

Multi-page applications (MPAs) > HTML and data are dynamically merged on the server > Serves the merged result on page load > Page reloads per request

Slide 9

Slide 9 text

pros √ Optimized for SEO √ Unlimited scalability √ More website insights Multi-page applications (MPAs)

Slide 10

Slide 10 text

pros √ Optimized for SEO √ Unlimited scalability √ More website insights cons × Slower perceived performance × Limited interactivity × Hard to maintain Multi-page applications (MPAs)

Slide 11

Slide 11 text

Single-page applications (SPAs, CSR)

Slide 12

Slide 12 text

Single-page applications, pros ✓ Instantaneous, app-like feel ✓ Easy to debug ✓ Caching capabilities

Slide 13

Slide 13 text

Single-page applications, cons × Slow initial load × SEO suffers × Needs JavaScript × Less secure

Slide 14

Slide 14 text

SPA vs. MPA lifecycle

Slide 15

Slide 15 text

Server-side rendering (SSR) > Pre-render the initial HTML on the server > Fully-formed HTML when opening the page > JavaScript is fetched alongside it

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Hydration

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Server-side rendering

Slide 21

Slide 21 text

The problem

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Streaming > Split a request into chunks > Send each chunk as a stream to the client > Render each chunk as it is streamed in

Slide 25

Slide 25 text

https://www.datastax.com/blog/fetch-streams-api-for-faster-ux-generative-ai-apps

Slide 26

Slide 26 text

Next.js App Router

Slide 27

Slide 27 text

Next.js App Router An opinionated React meta-framework by Vercel, offering: > Server-Side Rendering (SSR), Static Site Generation (SSG), ISR (Incremental Site Regeneration) > Automatic code splitting > File-system based routing and nested layouts > API routes > Caching, Image optimization, SEO, ++ > React Server Components

Slide 28

Slide 28 text

“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

Slide 29

Slide 29 text

> Needs server* > Increased complexity > Harder to deploy > Learning curve > Opinionated Do I need a meta-framework?

Slide 30

Slide 30 text

Do I need a meta-framework?

Slide 31

Slide 31 text

https://www.reddit.com/r/nextjs/comments/12dngvg/small_mistake_lead s_to_3000_bill_from_vercel_and/

Slide 32

Slide 32 text

Starter repo https://github.com/aurorascharff/rsc-workshop- starter

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

React 19

Slide 35

Slide 35 text

React 19 > Server Components > Actions > Server Functions > Form component > New hooks: useActionState(), useOptimistic(), useFormStatus() > use() > … and more https://react.dev/blog/2024/04/25/react-19

Slide 36

Slide 36 text

Actions

Slide 37

Slide 37 text

Server Functions https://19.react.dev/reference/rsc/server-functions

Slide 38

Slide 38 text

https://19.react.dev/reference/react-dom/components/form

Slide 39

Slide 39 text

useFormStatus() https://19.react.dev/reference/react-dom/hooks/useFormStatus

Slide 40

Slide 40 text

useActionState() https://19.react.dev/reference/react/useActionState

Slide 41

Slide 41 text

useOptimistic() https://19.react.dev/reference/react/useOptimistic

Slide 42

Slide 42 text

use() https://react.dev/reference/react/use

Slide 43

Slide 43 text

Exercise Task 1: Implement const response = confirm('Please confirm you want to delete this record.'); if (!response) { return; }

Slide 44

Slide 44 text

Exercise Task 1: Implement Task 2: Handle loading states for mutations with React 19 useFormStatus() https://19.react.dev/reference/react- dom/hooks/useFormStatus const response = confirm('Please confirm you want to delete this record.'); if (!response) { return; }

Slide 45

Slide 45 text

Exercise Task: Make the favorite-button work Bonus: Make it progressively enhanced Bonus: Make it optimistic with React 19 useOptimistic() https://react.dev/reference/react/useOptimistic

Slide 46

Slide 46 text

Exercise Task: Optimize initial page load time with React 19 use() and https://react.dev/reference/react/use

Slide 47

Slide 47 text

Exercise Task: Make a “chat” or message box for each contact. Think about: 1. Loading states 2. Error states 3. Validation 4. Reducing JS on the client 5. Using new React 19 hooks if relevant

Slide 48

Slide 48 text

Exercise Challenge 1: Make it progressively enhanced Challenge 2: Make it optimistic Challenge 3: Make it both

Slide 49

Slide 49 text

Completed repo https://github.com/aurorascharff/next15-remix-contacts- rebuild-v2 https://next15-remix-contacts-rebuild-v2.vercel.app Deployed URL

Slide 50

Slide 50 text

Diagrams https://shorturl.at/OOhet Slides https://shorturl.at/Aj3GY

Slide 51

Slide 51 text

Resources https://19.react.dev/reference/rsc/server-components https://nextjs.org/docs/app

Slide 52

Slide 52 text

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