Server side rendering server components and client components

React server components. Lazy loading of client components. Client props encodings, such as promises, React elements, and primitive types.

React.cache

Memoizes results for identical arguments per request

First call: Cached value #1Second call: Cached value #1

Js.String is UTF-16, like JavaScript

Js.String operates on UTF-16 code units on the server, rendering JavaScript-identical values

length "héllo 🚀"8

charCodeAt ~index:1 "héllo"233

toUpperCase "straße"STRASSE

replaceByRe /l/g -> "L" on "héllo wörld"héLLo wörLd

Js.Date parses like JavaScript

Js.Date parses ISO datetimes without a timezone designator as local time and round-trips its own toUTCString output

fromString "2026-07-09T10:00:00" (no timezone -> local)Thu Jul 09 2026 10:00:00 GMT+0000

getHours (10 in the server's local time)10

fromString (toUTCString d) round-tripsThu Jul 09 2026 10:00:00 GMT+0000

Counter

Passing int into a client component, the counter starts at 45 and counts by one

A classic counter

Client component that errors on the server

The Suspense boundary is flushed in errored form ( / $RX) instead of a silent blank, and the browser retries rendering it client-side

Loading...

Debug client props

Passing client props into a client component

stringTitle
int999999
float1.1
bool_truetrue
bool_falsefalse
string_listItem 1Item 2
React.elementThis footer is a React.element as a server component into client prop, yay!
option(React.element)H E A D E R
PromiseLoading...

Debug client props

Passing client props into a client component

stringTitle
int99
float1.1
bool_truetrue
bool_falsefalse
string_listItem 1Item 2
React.elementThis footer is a React.element as a server component into client prop, yay!
option(React.element)H E A D E R
PromiseLoading...

Pass another promise prop

Sending a promise from the server to the client

Loading...

Pass a client component prop

Sending a client component from the server to the client (that contains another client component)

Titulaso5/26/22

^

Server function from props on a Client Component

In this case, react will use the server function from the window.__server_functions_manifest_map

Server function with simple response

Server function imported and called directly on a client component

Server function with error

Server function with FormData

Server function with FormData on action attribute on Server Component

In this case, react will use the server function from the window.__server_functions_manifest_map

Server function with FormData on formAction attribute on Server Component

In this case, react will use the server function from the window.__server_functions_manifest_map

Server function with FormData with extra arg

It shows that it's possible to pass extra arguments to the server function on forms

Server function with optional arg

Server function with optional arguments — exercises $undefined decoding when the optional arg is omitted

Request context in server functions

Server functions can read cookies and headers from the ambient request context via ServerContext

Server side rendering server components and client components

React.cache

Js.String is UTF-16, like JavaScript

Js.Date parses like JavaScript

Counter

Client component that errors on the server

Debug client props

Debug client props

Pass another promise prop

Pass a client component prop

Server functions

Server function from props on a Client Component

Server function with simple response

Server function with error

Server function with FormData

Server function with FormData on action attribute on Server Component

Server function with FormData on formAction attribute on Server Component

Server function with FormData with extra arg

Server function with optional arg

Request context in server functions

Read cookies & headers

Set a cookie