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

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

Slide 3

Slide 3 text

Backup-WIFI SSID: Palacio PASSWORD: Palacio2015 https://discord.gg/7KkvJ2PX

Slide 4

Slide 4 text

Aurora Scharff > Norway, Oslo > Senior Consultant at Crayon Consulting > React Certification Lead at certificates.dev > Active RSC developer with Next.js App Router

Slide 5

Slide 5 text

Aurora Scharff > Using own experience to teach advanced concepts > Technical blog posts, talks, demo-code, Twitter/X > Involved in React development community, spoke at Metas React Conf 2024 (+2025) > + Vercels Next.js Conf 2024 in San Francisco (+2025)

Slide 6

Slide 6 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 7

Slide 7 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 & Exercises

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Rendering on the web

Slide 10

Slide 10 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 11

Slide 11 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 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Single-page applications (SPAs, CSR)

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

SPA vs. MPA lifecycle

Slide 18

Slide 18 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 19

Slide 19 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 20

Slide 20 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 21

Slide 21 text

Hydration

Slide 22

Slide 22 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 23

Slide 23 text

Server-side rendering

Slide 24

Slide 24 text

The problem

Slide 25

Slide 25 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 26

Slide 26 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 27

Slide 27 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 28

Slide 28 text

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

Slide 29

Slide 29 text

Next.js App Router

Slide 30

Slide 30 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 31

Slide 31 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 32

Slide 32 text

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

Slide 33

Slide 33 text

Do I need a meta-framework?

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

React 19

Slide 38

Slide 38 text

Features in React 19 Improvements Server APIs Client APIs

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Actions https://react.dev/reference/react/useTransition

Slide 41

Slide 41 text

Async Actions https://react.dev/reference/react/useTransition

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

https://aurorascharff.no/react-19-cheatsheet

Slide 48

Slide 48 text

Exercise Task: Implement Bonus: Add a confirm modal before deletion const response = confirm('Please confirm you want to delete this record.'); if (response) { // Do something }

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Exercise Task: Display validation errors with React 19 useActionState() https://react.dev/reference/react /useActionState https://aurorascharff.no/posts/handling-form-validation-errors-and-resets- with-useactionstate/

Slide 51

Slide 51 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 52

Slide 52 text

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

Slide 53

Slide 53 text

https://next15-contacts.vercel.app/

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

THANK YOU @aurorascharff aurorascharff.no @aurorascharff