Mastering React Server Components and Server Actions in React 19
0 likes41 views
![Maurice De Beijer [MVP]](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1750747544)
This document discusses React Server Components (RSC) and Server Actions introduced in React 19, outlining their advantages such as asynchronous data loading, reduced client-side rendering, and improved type safety. It provides a practical guide to setting up a Next.js application using RSCs, including how to handle data fetching and error management effectively. Additionally, it emphasizes best practices for using server-only, client-only, and shared components for optimized application architecture.
![srcappmovie
[id]edit
page.tsx
© ABL - The Problem Solver 60](https://image.slidesharecdn.com/react-advanced-2024-241118101104-707653d6/85/Mastering-React-Server-Components-and-Server-Actions-in-React-19-60-320.jpg)
![srcappmovie
[id]edit
page.tsx
© ABL - The Problem Solver 87](https://image.slidesharecdn.com/react-advanced-2024-241118101104-707653d6/85/Mastering-React-Server-Components-and-Server-Actions-in-React-19-87-320.jpg)
Mastering React Server Components and Server Actions in React 19
- 2. Mastering ReactServer Components andServer Actions in React 19 Maurice de Beijer @mauricedb
- 3. Maurice de Beijer The Problem Solver Freelance developer/instructor Currently at https://someday.com/ Twitter: @mauricedb Web: https://www.theproblemsolver.dev/ E-mail: [email protected] 3 © ABL - The Problem Solver
- 4. Topics What are React Server Components and why would you care? Using Next.js and the App Router Turning a React Client Component into a React Server Component Updates and caching with React Server Components Querying the database from a React Server Component Suspense & React Server Components React Server Components and streaming Which components are really React Server Components? Using React Server Actions © ABL - The Problem Solver 4
- 5. Type it out by hand? “Typing it drills it into your brain much better than simply copying and pasting it.You're forming new neuron pathways.Those pathways are going to help you in the future. Help them out now!” © ABL - The Problem Solver 5
- 6. Prerequisites Install Node & NPM Install the GitHub repository © ABL - The Problem Solver 6
- 7. Install Node.js & NPM © ABL - The Problem Solver 7
- 8. Following Along Repo: https://github.com/mauricedb/react-server-components-24 Slides: https://www.theproblemsolver.dev/docs/react-advanced- 2024.pdf © ABL - The Problem Solver 8
- 9. Create a new Next.js app with shadcn/ui © ABL - The Problem Solver 9 npx shadcn@latest init --src-dir
- 10. The changes © ABL - The Problem Solver 10
- 11. Clone the GitHub Repository © ABL - The Problem Solver 11
- 12. Install NPM Packages © ABL - The Problem Solver 12 ☞ Use: npm install –force ☜
- 13. Install NPM Packages © ABL - The Problem Solver 13
- 14. Start branch © ABL - The Problem Solver 14 Start with the 00-start branch git checkout --track origin/00-start
- 15. Start the application © ABL - The Problem Solver 15
- 16. The application © ABL - The Problem Solver 16
- 17. What are ReactServer Components? © ABL - The Problem Solver 17
- 18. ReactServer Components React Server Components (RSC) only execute on the server Traditionally React components always execute in the browser RSC are not the same as Server Side Rendering With SSR components are executed both on the client and server Applications are a combination of server and client components The result:The back and front-end code are more integrated Leading to better type safety ☺ © ABL - The Problem Solver 18
- 19. Before RSC (noSSR) © ABL - The Problem Solver 19
- 20. ServerSide Rendering © ABL - The Problem Solver 20
- 21. With RSC © ABL - The Problem Solver 21
- 22. ReactServer Components © ABL - The Problem Solver 22 Server components can be asynchronous Great to load data from some API Server components render just once No re-rendering with state changes or event handling The server component code is not send to the browser Can safely use secure API key’s etc. Smaller bundle sizes
- 23. ReactServer Component © ABL - The Problem Solver 23
- 24. ReactClient Components © ABL - The Problem Solver 24 Server components can render both server and client components Client components can only render other client components Adding 'use client’ to the top of a component makes it a client component Used as a directive for the bundler to include this in the client JS bundle A client component is still executed on the server as part of SSR When using Next.js
- 25. Next.js and the App Router © ABL - The Problem Solver 25
- 26. Next.js and theApp Router React is no longer just a client side library We need additional server side capabilities As well as additional code bundling options Next.js is the best production option available ☞ Remix doesn’t support RSC yet ☜ There are also more experimental options Waku from Daishi Kato React Server Components Demo from the React team © ABL - The Problem Solver 26
- 27. Rendering RSC’s React Server Components are only rendered on the server And shipped to the client as a JSON like structure The React Server Component Payload The client then injects these JSON objects into the React tree Where it would previously have rendered these components themself ☞ React already used a 2 step process ☜ Components render to a virtual DOM Just a series of JavaScript objects Reconciliation maps the virtual DOM to the browser DOM Or an HTML stream in the case or Server Side Rendering © ABL - The Problem Solver 27
- 28. Async transport RSC’s are streamed asynchronously to the client Enables using Suspense boundaries while loading © ABL - The Problem Solver 28
- 29. Code bundling Multiple JavaScript bundles have to be made The client and server have different code bundles Server Component code is never executed on the client Can use react-server-dom-webpack or a similar package © ABL - The Problem Solver 29
- 30. Fetching data in a RSC © ABL - The Problem Solver 30
- 31. Fetching data in a RSC React Server Components an execute normal Node.js code Read/write files on disk Do fetch requests to other servers Execute CRUD in a database RSC’s can be asynchronous where needed Just await whatever action needs to be done © ABL - The Problem Solver 31
- 32. srcapp science-fiction page.tsx © ABL - The Problem Solver 32
- 33. Async server child components © ABL - The Problem Solver 33
- 34. Child RSC components A RSC component can render other RSC child components They can execute the same server based code Including async/await where needed © ABL - The Problem Solver 34
- 35. srcappscience- fictionpage.tsx © ABL - The Problem Solver 35
- 36. srccomponents movie-card.tsx © ABL - The Problem Solver 36
- 37. Suspense & RSC pages © ABL - The Problem Solver 37
- 38. Suspense & RSC pages React Server Components are suspended until they resolve Can be controlled with <Suspense /> boundaries Next.js makes it easy to suspend when rendering an async page Add a loading.tsx next to the page.tsx They can be nested and the closest loading component will be used © ABL - The Problem Solver 38
- 39. srcapp science-fiction page.tsx © ABL - The Problem Solver 39
- 40. srcapp science-fiction loading.tsx © ABL - The Problem Solver 40
- 41. RSC and streaming © ABL - The Problem Solver 41
- 42. RSC and streaming Async React Server Components are streamed to the browser Using the React Server Component Payload On the client they are suspended until the component resolves Server action responses can also stream components back After a revalidatePath() or a revalidateTag() © ABL - The Problem Solver 42
- 43. RSC Payload © ABL - The Problem Solver 43
- 44. Client components © ABL - The Problem Solver 44
- 45. Client components Client components are required in a number of scenarios With interactive UI elements like elements with a click handler When using browser API’s like localStorage When using React hooks like useState(), useEffect() etc. Add the `use client` directive Makes a component a client component Client components render in the browser Can’t be asynchronous (for now) Can’t access files or databases on the local machine Other than using browser API’s With Server Side Rendering they can also execute on the server Next.js uses SSR by default © ABL - The Problem Solver 45
- 46. ClientComponent or ServerComponent React Server Components normally perform better Only render once on the server The code doesn’t need to be shipped to the browser Can be async and await data to be fetched No need for a render/effect/re-render cycle in the browser Components that don’t need client capabilities should be SRC’s State, effects, browser API’s etc. are client requirements © ABL - The Problem Solver 46
- 47. srccomponents favourite-heart.tsx © ABL - The Problem Solver 47
- 48. What does 'use client’ really do © ABL - The Problem Solver 48
- 49. What is a server component? What is a server component and what is not? Client components are marked with 'use client' But not all other components are server components With a component without 'use client’ it depends on their parents If a component is a client component Then all components it renders are also client components ☞There is no 'use server' for server components ☜ The 'use server’ directive exists but is used for Server Actions But there is a server-only NPM package © ABL - The Problem Solver 49
- 50. server-only © ABL - The Problem Solver 50 Import the server-only NPM package With components that must run on the server
- 51. GrandChild is both a client and server component © ABL - The Problem Solver 51
- 52. Using an RSC as a child of a client component © ABL - The Problem Solver 52 A client component can have a server component as a child As long as it doesn’t render it Render the child server component from another server component And pass it as a children prop into the client component
- 53. srccomponents server-or-client child.tsx © ABL - The Problem Solver 53
- 54. srccomponents server-or-client parent.tsx © ABL - The Problem Solver 54
- 55. Break time © ABL - The Problem Solver 55
- 56. CallingServerActions © ABL - The Problem Solver 56
- 57. CallingServer Actions React Server Actions are functions that we can call on the client But then execute on the server Add the 'use server' annotation Can be at the top of a file or a single function Not related to server components Can be passed as the action of a client side <form /> The forms data is passed as a FormData parameter Even works if JavaScript is disabled ☺ Can also be called as a normal asynchronous function The network request is handled for you © ABL - The Problem Solver 57
- 58. Form actions © ABL - The Problem Solver 58
- 59. Form actions A <form> element can take a ‘action’ prop Can point to an action function that executes on the client or server More flexible that using the onSubmit All the <input> from the form is passed as a FormData parameter Use hidden inputs to pass additional data The server action function works even if JavaScript is disabled © ABL - The Problem Solver 59
- 60. srcappmovie [id]edit page.tsx © ABL - The Problem Solver 60
- 61. srccomponents movie-editor.tsx © ABL - The Problem Solver 61
- 62. Guarding client components against server code © ABL - The Problem Solver 62
- 63. server-only Components that render in the browser shouldn’t execute server code This would usually result in a runtime error An immediate compile time error is better The server-only package does this npm install server-only Add import 'server-only’ to any code that should not be imported Only needed in the modules that actually execute the Node code © ABL - The Problem Solver 63
- 64. package.json © ABL - The Problem Solver 64
- 65. srclib prisma.ts © ABL - The Problem Solver 65
- 66. srcapp science-fiction page.tsx © ABL - The Problem Solver 66
- 67. The error © ABL - The Problem Solver 67
- 68. The useFormStatus() hook © ABL - The Problem Solver 68
- 69. useFormStatus hook The useFormStatus() hook gives information about form submition The pending status let’s you know if a submit is active ☞ Must be in a component that is rendered as child from the <form> ☜ © ABL - The Problem Solver 69
- 70. srccomponents submit-button.tsx © ABL - The Problem Solver 70
- 71. The useActionState() hook © ABL - The Problem Solver 71
- 72. useActionState hook Updates component state based on the result of a form action The state round trips to the action function Useful for form validation etc ☞ Note: useFormState for now with production React/Next.js! ☜ Doesn’t expose an isPending status © ABL - The Problem Solver 72
- 73. package.json © ABL - The Problem Solver 73
- 74. srccomponents movie-editor.tsx © ABL - The Problem Solver 74
- 75. srcserver actions.ts © ABL - The Problem Solver 75
- 76. Manually calling a server action © ABL - The Problem Solver 76
- 77. Manually calling a server action Server actions act as normal asynchronous functions Makes the boundary between server and client almost transparent Call like a normal async function when needed The network call is handled for you Return any result you want As long as it can be serialized to JSON Don’t use throw new Error(‘Some message’) ☞ Error messages are hidden in a production build ☜ © ABL - The Problem Solver 77
- 78. srccomponents favourite-heart.tsx © ABL - The Problem Solver 78
- 79. The useOptimistic() hook © ABL - The Problem Solver 79
- 80. useOptimistic hook Create more responsive user interfaces Immediately update the UI with an optimistic state before an asynchronous action Use whatever optimistic state you want Automatically updated when the action completes © ABL - The Problem Solver 80
- 81. srccomponents favourite-heart.tsx © ABL - The Problem Solver 81
- 82. Error handling & retrying © ABL - The Problem Solver 82
- 83. Error handling & retrying An ErrorBoundary will catch errors in React Server Components The normal expected React behavior Next.js makes it easy to catch errors Add a error.tsx next to the page.tsx They can be nested and the closest will be used © ABL - The Problem Solver 83
- 84. srcapp error-handling error.tsx © ABL - The Problem Solver 84
- 85. Cleaning up the code © ABL - The Problem Solver 85
- 86. Cleaning up the code © ABL - The Problem Solver 86 It’s considered a best practice not to put server logic in the UI Server actions typically go into a separate actions.ts
- 87. srcappmovie [id]edit page.tsx © ABL - The Problem Solver 87
- 88. srcserver actions.ts © ABL - The Problem Solver 88
- 89. srccomponents movie-card.tsx © ABL - The Problem Solver 89
- 90. srcapp science-fiction page.tsx © ABL - The Problem Solver 90
- 91. Recommendations with ReactServerComponents © ABL - The Problem Solver 91
- 92. Recommendations Start with Shared components Can run on the server or client as needed Will default to act as Server Components Switch to Server only components if needed When you need to use server side capabilities Only use Client only components when absolutely needed Local state or side effects Interactivity Required browser API’s Learn all about the new capabilities of Next.js App Router © ABL - The Problem Solver 92
- 93. Conclusion React Server Components are a great new addition to React Helps with keeping the client more responsive Makes the application architecture easier Use Next.js and the App Router Because you need a server React Client Components Are components with state and interactivity and require ‘use client’ React Server Components are streamed And use Suspense boundaries until they are done Server Actions are a great way to call back into the server They also update the invalidated server components on the client © ABL - The Problem Solver 93
- 94. Thankyouforjoining © ABL - The Problem Solver 94 Share your thoughts