"Towards React Server Components in Clojure", Roman Liutikov

We will take a look inside React Server Components using an implementation in the Clojure programming language. You will learn what the “magic” of server components looks like under the hood, how component streaming works, and whether it’s really possible to send a Promise over an HTTP request from the server to the client. How can a function that exists only on the backend be invoked on the frontend? How can we make server components run fast? In addition, we will dive into Clojure to see how the same concepts can be built in a radically different programming language.

1. NN
TOWARDS REACT SERVE N)
COMPONENTS IN CLOJURE

[UKR]

POMAH JINTIKOB
SkyDefenders

React
& fwdays October 18, 2

2. {ste

={false}

{(step !== 1 || isRejectel
<DesktopOnly>

<Donelnf:
<AudioInfo

={audioFi

={audioFi

={aud

</DoneInfo>
</DesktopOnly>
) : null}
<CardChevron
{step === 1 88 (
<React. Fragment>
{(!hasAudiofile || ist
<FilePicker
=(isRejected;
={aul
{file
setFile(file);
»

3. React + SSR

,
| <—html
1
ı

| <— runtime

4. Shell + SPA

browser

\

< html shell —

1
¡$ runtime —__
AT

5. Dynamic Islands

6. React Server Components

MW
React
fwdays

7. (did })

={() æ Likearticle(id)}>Like</

(Lid Ft
{ title, content } =

<hb{title}</h1>
<p>{content}</p>

Y >

8. a website with dynamic islands

9. It's fast!

render
interactive

render <A>
interactive >

10. …Or is it?

11. HTML streaming in React

id

unction Article({ id, title, content }) {
return (
<article>
1>{titte}/h1>
ontent)
uspense fallback={<Spinner A
<Comments id={id} />
Sus
article:

5

React
fwdays

12. Runs blocking 1/0 concurrently

13. HTML streaming in React

template id ></template>
<span>fallback</span>

‘span>DATA</ span></ div>
5 );</script>

React
fwdays

14. Flight

serialization format

<Button title="btn">press me</Button>
</div>

hunk. js", "Button", false]
div" null, {*title": "hello", "children":[["$", null,{:title "btn"

press

15. Serialize promises!

await
return

$","div" null, 3 an" ‚null,f{"children":["$a1"]}]]}]
uo"

16. Navigation

React
fwdays

17. Navigation with RSC feels slow

press a link

“request Flight data

streamed response

£--

client server

SAV

React
fwdays

18. Strategies to speedup navigation

prefetch all routes
prefetch visible links
prefetch links near mouse pointer
*caching

React
fwdays

19. Mutations

React
fwdays

20. RPC

({ id }) {

={() [Uikearticte(id))>Like</

({ id }) {

nst { title, content } =

<hi>ftitle}</h1>
<p>{content}</p>

>

21. Enter Clojure

® = &.
© aaa

days

22. HUMANITY HAD BEEN SAVED! DOUG THE DEVELOPER AND
AND THE OTHERS COULD NOW RETURN TO THEIR
PROGRAMMING, NO LONGER IN FEAR OF BUGS, BY
LEARNING THE LESSONS OF THE TEN GUILDS OF THE
LANO OF LISP, PROGRAMS COULD BECOME RICHER AND
MORE ROBUST THAN EVER BEFORE:

23. React component

= = =
in ClojureScript
stories [{ [path]}]
[data ( path)]
[d data]
($ story { ( d) d}))))
SOV
React

fwdays

24. (defui story [{:keys [data]}]
(let [{:keys [id by score time title url kids]} data]

($ ui/vote-btn {:id id :score score})
0)

(defui “:client vote-btn [{:keys [id score]}] RSC
($ :button {:on-click #actions/vote id score)}
(str "Vote " score)))

in ClojureScript

(defaction vote [id]
(sql/exec {:update :stories,

:set {:score [:+ :score 1]},

:where [ :id id]})) ANY

React
fwdays

25. Suspense + 1/0 + Concurrency

(defui suspense [{:keys [fallback children]}]
(collect (async/thread (serialize children)))
fallback)

(async/go-loop [chans collected-channels]
(if (empty? chans)
(close-connection)
(let [[html chan] (async/alts! chans)]

(push-chunk html) SO)

(recur (disj chans chan)))))

React
fwdays

26. Bonus: Error reporting

class java lang IndexOutOfBoundsException

Av

React
fwdays

27. That's all folks Y

Sandbox Blog Telegram