Tweet
Tweet

Slide 1

Slide 1 text

React Server Components og React 19 i Next.js App Router Aurora Scharff @aurorascharff

Slide 2

Slide 2 text

I denne workshoppen skal vi bygge en kontaktliste- CRUD-app med Next.js App Router, React Server Components, Tailwind, Prisma og Server Actions. Gjennom utviklingsprosessen vil vi lære alle relevante konsepter steg for steg. Videre skal vi bruke React 19 for å forbedre brukeropplevelsen og forenkle koden. Ved slutten av workshoppen vil vi bli kjent med typiske utviklingsmønstre, viktige biblioteker og testmetoder.

Slide 3

Slide 3 text

HVEM ER JEG? Aurora Scharff > Utvikler MSDev > Bachelor UiO Robotikk og intelligente systemer > Tidligere erfaring fra 2 år i fintech-startup > Vokst opp på seilbåt

Slide 4

Slide 4 text

HVEM ER JEG? Aurora Scharff > Begynte hos Inmeta januar 2023 > Jobber for Miljødirektoratet > Frontend-utvikler for modernisering av avfallsdeklarering.no

Slide 5

Slide 5 text

HVEM ER JEG? Aurora Scharff > Snakker på konferanser (NDC ++) om webutvikling > Involvert i utviklingsmiljøet for React hos Meta, representert dem på egen konferanse React Conf > Invitert til Next.js Conf i San Francisco

Slide 6

Slide 6 text

Dag 1 plan > Rendering on the web (slides) > Next.js App Router (slides) > Server components > Client components > LUNCH > Web performance (slides) > Transitions > Suspense > Server Actions > TASK

Slide 7

Slide 7 text

Rendering strategies

Slide 8

Slide 8 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 9

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

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Single-page applications (SPAs, CSR)

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

SPA vs. MPA lifecycle

Slide 16

Slide 16 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 17

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

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

Slide 19 text

Hydration

Slide 20

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

Slide 21 text

Server-side rendering

Slide 22

Slide 22 text

The problem

Slide 23

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

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

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

Slide 26 text

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

Slide 27

Slide 27 text

Next.js App Router

Slide 28

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

Slide 29 text

No content

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Do I need a meta-framework?

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

https://x.com/zemotion/status/1798558292681343039

Slide 34

Slide 34 text

npx create-next-app@latest

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Core Web Vitals https://support.google.com/webmasters/answer/9205520?hl=en > Largest Contentful Paint (LCP) > Cumulative Layout Shift (CLS) > First Input Delay (FID)

Slide 37

Slide 37 text

Core Web Vitals > Largest Contentful Paint (LCP) > Cumulative Layout Shift (CLS) > First Input Delay (FID) > Interaction to Next Paint (INP) Other web vitals: TTFB, FCP, TBT, TTI, Speed Index https://crystallize.com/learn/best-practices/frontend-performance/other-web-vitals

Slide 38

Slide 38 text

2018 Hawaii false missile alert

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

TASK Task 1: Handle loading state for contacts/{id}/edit-page Task 2: Handle loading states for and implement Task 3: Make the favorite-button work const response = confirm('Please confirm you want to delete this record.'); if (!response) {

Slide 45

Slide 45 text

Dag 2 plan > React 19 (slides) > React Compiler (slides) > Actions > useActionState(), useOptimistic(), useFormStatus() > LUNCH > CSS in Server Components & Deployment (slides) > Data management, use(), optimizations > Testing > Libraries and development patterns > TASK

Slide 46

Slide 46 text

RECAP > Rendering on the web (slides) > Next.js App Router (slides) > Server components > Client components > LUNCH > Web performance (slides) > Transitions > Suspense > Server Actions > TASK

Slide 47

Slide 47 text

Dag 2 plan > React 19 (slides) > React Compiler (slides) > Actions > useActionState(), useOptimistic(), useFormStatus() > LUNCH > CSS in Server Components & Deployment (slides) > Data management, use(), optimizations > Testing > Libraries and development patterns > TASK

Slide 48

Slide 48 text

React 19

Slide 49

Slide 49 text

https://en.wikipedia.org/wiki/Progressive_enhancement Progressive enhancement

Slide 50

Slide 50 text

“Progressive enhancement is a strategy that puts emphasis on web content first, allowing everyone to access the basic functionality whilst users with additional browser features or faster Internet access receive an enhanced version instead.” https://en.wikipedia.org/wiki/Progressive_enhancement

Slide 51

Slide 51 text

React 19 > Server components > Actions and server actions > Form component > New hooks: useActionState(), useOptimistic(), useFormStatus() > Use() API > … and more https://react.dev/blog/2024/04/25/react-19

Slide 52

Slide 52 text

Actions

Slide 53

Slide 53 text

Server Actions https://react.dev/reference/react/use-server

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

… and more https://react.dev/blog/2024/04/25/react-19 > Forwardref: Removed, ref is now a prop > Better hydration errors: see where error occurred in HTML > Metadata: ability to hoist from any component > CSS optimizations: priority stylesheets > Async script support > Custom element support > Context improvements > Support for preloading resources

Slide 60

Slide 60 text

App router + React 19? https://nextjs.org/blog/next-15-rc

Slide 61

Slide 61 text

React Compiler (prev. React Forget)

Slide 62

Slide 62 text

React Compiler (prev. React Forget) https://react.dev/learn/react-compiler > Automatically memoizes your code 1. Skipping cascading re-rendering of components 2. Skipping expensive calculations from outside of React > Experimental and open source > Requires you to follow the rules of React “Forget” about useCallback() and useMemo()

Slide 63

Slide 63 text

React Compiler (prev. React Forget)

Slide 64

Slide 64 text

https://react.dev/learn/react-compiler https://www.youtube.com/watch?v=lyEKhv8-3n0 React Compiler @ Meta instagram.com

Slide 65

Slide 65 text

How to get started (NB! Experimental!) https://react.dev/learn/react-compiler > Install eslint extension to avoid breaking rules of react > Enable as vite plugin, next.js plugin etc > View memoized components in devtools

Slide 66

Slide 66 text

Playground https://playground.react.dev/

Slide 67

Slide 67 text

React Compiler √ Less time spent on manual memoization √ Less complex code √ More performant apps

Slide 68

Slide 68 text

In-progress repo https://github.com/aurorascharff/rsc-workshop- inmeta

Slide 69

Slide 69 text

CSS in Server Components

Slide 70

Slide 70 text

CSS-in-JS: Emotion

Slide 71

Slide 71 text

CSS-in-JS: styled-components

Slide 72

Slide 72 text

The Dilemma > The styled-components library allows us to dynamically create React components with attached CSS. It works by managing a tag that gets updated as components re-render.

Slide 73

Slide 73 text

The Dilemma > The styled-components library allows us to dynamically create React components with attached CSS. It works by managing a tag that gets updated as components re-render. > “React Server Components” is a new paradigm for React that gives us a new type of component, the Server Component. Server Components render exclusively on the server. Their code isn’t even included in our JS bundles.

Slide 74

Slide 74 text

The Dilemma > The styled-components library allows us to dynamically create React components with attached CSS. It works by managing a tag that gets updated as components re-render. > “React Server Components” is a new paradigm for React that gives us a new type of component, the Server Component. Server Components render exclusively on the server. Their code isn’t even included in our JS bundles.

Slide 75

Slide 75 text

CSS-in-JS: compile-time

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

Tailwind

Slide 78

Slide 78 text

Shadcn/ui

Slide 79

Slide 79 text

Shadcn/ui

Slide 80

Slide 80 text

Avfallsdeklarering.no: Tailwind + md-components

Slide 81

Slide 81 text

Deployment

Slide 82

Slide 82 text

Deployment > Vercel: zero cofiguration but potentially expensive > Self-hosted > Node.js server (i.e App Service) > Docker image > Static HTML files (not supporting server-features) https://nextjs.org/docs/app/building-your-application/deploying

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

https://www.kongebra.net/ blog/posts/automate-your- next-js-deployment-to- azure-a-step-by-step- guide https://inmeta.medium.com /deploy-next-js-to-azure-3- effective-strategies-for- modern-developers- 86a41c0f9d92

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

TASK 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 87

Slide 87 text

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

Slide 88

Slide 88 text

Ressurser

Slide 89

Slide 89 text

https://shorturl.at/r7TXO

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

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