React Server Components og React 19 i Next.js App Router

Transcript

1. React Server Components og React 19 i Next.js App Router Aurora Scharff @aurorascharff
2. 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.
3. 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
4. HVEM ER JEG? Aurora Scharff > Begynte hos Inmeta januar 2023 > Jobber for Miljødirektoratet > Frontend-utvikler for modernisering av avfallsdeklarering.no
5. 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
6. 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
7. Rendering strategies
8. Static website rendering > Pages are pre-assembled and uploaded to a static host > Simple and efficient > Struggles with dynamic data and impractical to maintain
9. Multi-page applications (MPAs) > HTML and data are dynamically merged on the server > Serves the merged result on page load > Page reloads per request
10. pros √ Optimized for SEO √ Unlimited scalability √ More website insights Multi-page applications (MPAs)
11. pros √ Optimized for SEO √ Unlimited scalability √ More website insights cons × Slower perceived performance × Limited interactivity × Hard to maintain Multi-page applications (MPAs)
12. Single-page applications (SPAs, CSR)
13. Single-page applications, pros ✓ Instantaneous, app-like feel ✓ Easy to debug ✓ Caching capabilities
14. Single-page applications, cons × Slow initial load × SEO suffers × Needs JavaScript × Less secure
15. SPA vs. MPA lifecycle
16. Server-side rendering (SSR) > Pre-render the initial HTML on the server > Fully-formed HTML when opening the page > JavaScript is fetched alongside it
17. 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
18. 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
19. Hydration
20. 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
21. Server-side rendering
22. The problem
23. 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
24. 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
25. Streaming > Split a request into chunks > Send each chunk as a stream to the client > Render each chunk as it is streamed in
26. https://www.datastax.com/blog/fetch-streams-api-for-faster-ux-generative-ai-apps
27. Next.js App Router
28. 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
30. > Needs server* > Increased complexity > Harder to deploy > Learning curve > Opinionated Do I need a meta-framework?
31. Do I need a meta-framework?
32. https://www.reddit.com/r/nextjs/comments/12dngvg/small_mistake_lead s_to_3000_bill_from_vercel_and/
33. https://x.com/zemotion/status/1798558292681343039
34. npx create-next-app@latest
36. Core Web Vitals https://support.google.com/webmasters/answer/9205520?hl=en > Largest Contentful Paint (LCP) > Cumulative Layout Shift (CLS) > First Input Delay (FID)
37. 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
38. 2018 Hawaii false missile alert
44. 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) {
45. 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
46. RECAP > Rendering on the web (slides) > Next.js App Router (slides) > Server components > Client components > LUNCH > Web performance (slides) > Transitions > Suspense > Server Actions > TASK
47. 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
48. React 19
49. https://en.wikipedia.org/wiki/Progressive_enhancement Progressive enhancement
50. “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
51. 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
52. Actions
53. Server Actions https://react.dev/reference/react/use-server
54. <form> https://react.dev/reference/react-dom/components/form
55. useFormStatus() https://react.dev/reference/react-dom/hooks/useFormStatus
56. useActionState() https://react.dev/reference/react/useActionState
57. useOptimistic() https://react.dev/reference/react/useOptimistic
58. use() https://react.dev/reference/react/use
59. … 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
60. App router + React 19? https://nextjs.org/blog/next-15-rc
61. React Compiler (prev. React Forget)
62. 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()
63. React Compiler (prev. React Forget)
64. https://react.dev/learn/react-compiler https://www.youtube.com/watch?v=lyEKhv8-3n0 React Compiler @ Meta instagram.com
65. 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
66. Playground https://playground.react.dev/
67. React Compiler √ Less time spent on manual memoization √ Less complex code √ More performant apps
68. In-progress repo https://github.com/aurorascharff/rsc-workshop- inmeta
69. CSS in Server Components
70. CSS-in-JS: Emotion
71. CSS-in-JS: styled-components
72. The Dilemma > The styled-components library allows us to dynamically create React components with attached CSS. It works by managing a <style> tag that gets updated as components re-render.
73. The Dilemma > The styled-components library allows us to dynamically create React components with attached CSS. It works by managing a <style> 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.
74. The Dilemma > The styled-components library allows us to dynamically create React components with attached CSS. It works by managing a <style> 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.
75. CSS-in-JS: compile-time
77. Tailwind
78. Shadcn/ui
79. Shadcn/ui
80. Avfallsdeklarering.no: Tailwind + md-components
81. Deployment
82. 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
84. 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
86. 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
87. TASK Challenge 1: Make it progressively enhanced Challenge 2: Make it optimistic Challenge 3: Make it both
88. Ressurser
89. https://shorturl.at/r7TXO
92. Thank you Twitter: @aurorascharff GitHub: @aurorascharff Blog: aurorascharff.no