<div id="readability-page-1" class="page"><article id="article-show-container" data-article-id="2164325" data-article-slug="a-react-server-feature-cheat-sheet-d9k" data-author-id="201866" data-author-name="Composite" data-author-username="composite" data-co-author-ids="" data-path="/composite/a-react-server-feature-cheat-sheet-d9k" data-pin-path="/stories/feed/pinned_article" data-pinned-article-id="" data-published="true" data-scheduled="false" lang="en">
 <header id="main-title">

 <div>
 <a href="/composite"><img src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F201866%2F5014b724-95d6-43af-8561-79a14911a196.png" width="40" height="40" alt="Composite"></a>
 
 
 </div>
 </header>

 <div data-article-id="2164325" id="article-body">
 <h2>
 <a name="react-server-feature-basics" href="#react-server-feature-basics">
 </a>
 React Server feature basics
</h2>

<ul>
<li>
<a href="https://react.dev/reference/rsc/server-components" target="_blank" rel="noopener noreferrer">Server Component</a> (React Server Component, RSC): A component that runs on the server and renders to the client as the same as SSR.</li>
<li>
<a href="https://react.dev/reference/rsc/server-functions" target="_blank" rel="noopener noreferrer">Server Function</a> (a.k.a. Server Actions): A function that runs on the servers only and sends the information to the client.</li>
</ul>

<h2>
 <a name="directives" href="#directives">
 </a>
 Directives
</h2>

<ul>
<li>
<a href="https://react.dev/reference/rsc/use-client" target="_blank" rel="noopener noreferrer"><code>'use client'</code></a>: If you are using a "server component" enabled environment, you should mark <code>use client</code> at the top of the file to mark it as a client component.</li>
<li>
<a href="https://react.dev/reference/rsc/use-server" target="_blank" rel="noopener noreferrer"><code>'use server'</code></a>: If you have a consideration of mutating the information on the server, you should mark <code>use server</code> directive at the top of the function body in the server component or file to operate only on the server.</li>
</ul>

<h2>
 <a name="server-component" href="#server-component">
 </a>
 Server Component
</h2>

<ul>
<li>RSC is no stateful nor lifecycle. You can't use any hook functions (<code>useState</code>, <code>useEffect</code>, etc.) on the server component.</li>
<li>RSC can have an async function.</li>
<li>RSC can have server functions. but you must mark <code>'use server'</code> in the top of the function body.</li>
<li>RSC can have children in both the server component and the client component.</li>
<li>RSC cannot run any browser API.</li>
<li>Your RSC can pass props of any type to RSC. also can pass props type with limitation to the client component. Check the directive types table below.
</li>
</ul>

<div>
<pre><code>import marked from 'marked'; // Not included in bundle
import sanitizeHtml from 'sanitize-html'; // Not included in bundle

async function Page({page}) {
 // NOTE: loads *during* render, when the app is built.
 const content = await file.readFile(`${page}.md`);

 return &lt;div&gt;{sanitizeHtml(marked(content))}&lt;/div&gt;;
}
</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>



<h2>
 <a name="server-function" href="#server-function">
 </a>
 Server Function
</h2>

<ul>
<li>when definition, you must have the <code>'use server'</code> directive in the function body or file.</li>
<li>You can run any server features on the function body.</li>
<li>You cannot run the browser API on the function body.</li>
<li>You can call server functions on both the server and client.</li>
<li>You can return value with limitations. Check the directive types table below.</li>
</ul>

Declaring server function in the server component 


<div>
<pre><code>import Button from './Button';

function EmptyNote () {
 async function createNoteAction() {
 // Server Function
 'use server';

 await db.notes.create();
 }

 return &lt;Button onClick={createNoteAction}/&gt;;
}
</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>



Declaring server function in the separate file 


<div>
<pre><code>"use server";

export async function updateName(name) {
 if (!name) {
 return {error: 'Name is required'};
 }
 await db.users.updateName(name);
}
</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>



Using server function in the client component 


<div>
<pre><code>"use client";

import {updateName} from './actions';

function UpdateName() {
 return (
 &lt;form action={updateName}&gt;
 &lt;input type="text" name="name" /&gt;
 &lt;/form&gt;
 )
}
</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>



<h2>
 <a name="comparison-of-handle-value-types-in-directives" href="#comparison-of-handle-value-types-in-directives">
 </a>
 Comparison of handle value types in directives
</h2>

<ul>
<li>
<a href="https://react.dev/reference/rsc/use-client#serializable-types" target="_blank" rel="noopener noreferrer"><code>use client</code></a>: passing prop type from server component to client component.</li>
<li>
<a href="https://react.dev/reference/rsc/use-server#serializable-parameters-and-return-values" target="_blank" rel="noopener noreferrer"><code>use server</code></a>: The return type of Server functions</li>
</ul>

<div><table>
<thead>
<tr>
<th>Type</th>
<th><code>use client</code></th>
<th><code>use server</code></th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>string</code></td>
<td>✅</td>
<td>✅</td>
<td>both string value and iterables are supported.</td>
</tr>
<tr>
<td><code>number</code></td>
<td>✅</td>
<td>✅</td>
<td></td>
</tr>
<tr>
<td><code>bigint</code></td>
<td>✅</td>
<td>✅</td>
<td></td>
</tr>
<tr>
<td><code>boolean</code></td>
<td>✅</td>
<td>✅</td>
<td></td>
</tr>
<tr>
<td><code>undefined</code></td>
<td>✅</td>
<td>✅</td>
<td></td>
</tr>
<tr>
<td><code>null</code></td>
<td>✅</td>
<td>✅</td>
<td></td>
</tr>
<tr>
<td><code>Array</code></td>
<td>✅</td>
<td>✅</td>
<td>Only available in the item of serializable list.</td>
</tr>
<tr>
<td><code>Map</code></td>
<td>✅</td>
<td>✅</td>
<td>Only available in the item of serializable list.</td>
</tr>
<tr>
<td><code>Set</code></td>
<td>✅</td>
<td>✅</td>
<td>Only available in the item of serializable list.</td>
</tr>
<tr>
<td><code>TypedArray</code></td>
<td>✅</td>
<td>✅</td>
<td></td>
</tr>
<tr>
<td><code>ArrayBuffer</code></td>
<td>✅</td>
<td>✅</td>
<td></td>
</tr>
<tr>
<td><code>Date</code></td>
<td>✅</td>
<td>✅</td>
<td></td>
</tr>
<tr>
<td><code>object</code></td>
<td>✅</td>
<td>✅</td>
<td>Support only plain object(object initializers or <code>JSON</code>), <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects" target="_blank" rel="noopener noreferrer">null prototype</a> not supported.</td>
</tr>
<tr>
<td><code>Promises</code></td>
<td>✅</td>
<td>✅</td>
<td>Only available in the serializable list.</td>
</tr>
<tr>
<td><code>ReactNode</code></td>
<td>✅</td>
<td>❌</td>
<td>Only Server Component can send it to Client Component via props.</td>
</tr>
<tr>
<td><code>FormData</code></td>
<td>❌</td>
<td>✅</td>
<td>Only server functions can return <code>FormData</code> instance.</td>
</tr>
<tr>
<td><code>symbol</code></td>
<td>⚠️</td>
<td>⚠️</td>
<td>Only symbols registered in the global Symbol registry via <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/for" target="_blank" rel="noopener noreferrer"><code>Symbol.for</code></a>
</td>
</tr>
<tr>
<td><code>function</code></td>
<td>⚠️</td>
<td>⚠️</td>
<td>Only server functions allowed.</td>
</tr>
<tr>
<td><code>class</code></td>
<td>❌</td>
<td>❌</td>
<td>Any instance objects are not serializable.</td>
</tr>
</tbody>
</table></div>

<ul>
<li>The other types and instances are not available.</li>
</ul>

Happy react'ing!


 </div>
 
 



 </article></div>

Ukjin Yang

React Server feature basics
Server Component (React Server Component, RSC): A component that runs on the server and renders to the client as the same as SSR.
Server Function (a.k.a. Server Actions): A function that runs on the servers only and sends the information to the client.
'use client': If you are using a "server component" enabled environment, you should mark use client at the top of the file to mark it as a client component.
'use server': If you have a consideration of mutating the information on the server, you should mark use server directive at the top of the function body in the server component or file to operate only on the server.
RSC is no stateful nor lifecycle. You can't use any hook functions (useState, useEffect, etc.) on the server component.
RSC can have an async function.
RSC can have server functions. but you must mark 'use server' in the top of the function body.
RSC can have children in both the server component and the client component.
RSC cannot run any browser API.
Your RSC can pass props of any type to RSC. also can pass props type with limitation to the client component. Check the directive types table below.
import marked from 'marked'; // Not included in bundle
import sanitizeHtml from 'sanitize-html'; // Not included in bundle
async function Page({page}) {
 // NOTE: loads *during* render, when the app is built.
 const content = await file.readFile(`${page}.md`);
 return <div>{sanitizeHtml(marked(content))}</div>;
}
when definition, you must have the 'use server' directive in the function body or file.
You can run any server features on the function body.
You cannot run the browser API on the function body.
You can call server functions on both the server and client.
You can return value with limitations. Check the directive types table below.
Declaring server function in the server component
import Button from './Button';
function EmptyNote () {
 async function createNoteAction() {
 // Server Function
 'use server';
 await db.notes.create();
 }
 return <Button onClick={createNoteAction}/>;
}
Declaring server function in the separate file
"use server";
export async function updateName(name) {
 if (!name) {
 return {error: 'Name is required'};
 }
 await db.users.updateName(name);
}
Using server function in the client component
"use client";
import {updateName} from './actions';
function UpdateName() {
 return (
 <form action={updateName}>
 <input type="text" name="name" />
 </form>
 )
}
use client: passing prop type from server component to client component.
use server: The return type of Server functions
Type
use client
use server
Notes
string
✅
✅
both string value and iterables are supported.
number
✅
✅
bigint
✅
✅
boolean
✅
✅
undefined
✅
✅
null
✅
✅
Array
✅
✅
Only available in the item of serializable list.
Map
✅
✅
Only available in the item of serializable list.
Set
✅
✅
Only available in the item of serializable list.
TypedArray
✅
✅
ArrayBuffer
✅
✅
Date
✅
✅
object
✅
✅
Support only plain object(object initializers or JSON), null prototype not supported.
Promises
✅
✅
Only available in the serializable list.
ReactNode
✅
❌
Only Server Component can send it to Client Component via props.
FormData
❌
✅
Only server functions can return FormData instance.
symbol
⚠️
⚠️
Only symbols registered in the global Symbol registry via Symbol.for
function
⚠️
⚠️
Only server functions allowed.
class
❌
❌
Any instance objects are not serializable.
The other types and instances are not available.
Happy react'ing!

A React server feature cheat sheet

댓글