Introduction to Decentralized Applications (dApps)
React Server Component in Next.js by Hanief Utama
1. JogjaJS / 28 October 2023
React Server
Components
in Next.js
2. • Senior Software Engineer / Tech
Lead Frontend @
• Currently helping Jakpat
migrating internal dashboard
from (Laravel + AngularJS) to
(React + Next.js)
Hanief Utama
3. Once upon a time…
• HTML ( 30 years ago )
• PHP ( 28 years ago )
• Javascript ( 27 years ago )
• CSS ( 26 years ago )
• React ( 10 years ago )
First Web Server By Coolcaesar at the English-language Wikipedia, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=395096
4.
5. Client
Server
0 10 20 30
Chart adapted from Josh W Comeau [https://www.joshwcomeau.com/react/server-components/]
Client Side
Rendering
Download
Javascript
Render Shell Render Content
Database
Query
First Paint
Content
Painted
Page Interactive
The OG React way
6. Server Side
Rendering
Client
Server
0 10 20 30
Chart adapted from Josh W Comeau [https://www.joshwcomeau.com/react/server-components/]
Download
Javascript
Render
Shell
Render Content
Database
Query
Hydrate
First
Paint
Page
Interactive
Content
Painted
Same as CSR but better SEO
7. Why not this?
Client
Server
0 10 20 30
Chart adapted from Josh W Comeau [https://www.joshwcomeau.com/react/server-components/]
Download
Javascript
Render
App
Database
Query
Hydrate
First Paint
Content Painted Page Interactive
Some frameworks already have
this
10. Server Component Client Component
Render only on server Render on server and client
New kind of component The component that we already know
Default component ‘use client’;
No state Can use state
Can import Client Component Can ONLY import Client Component
15. Next.js is the only
framework that o
ff
er full
support of RSC
16. Using Server Components in Next.js
• Next.js 13.4+
• Use App Router
• Server Components is default
17. Pros?
• Smaller bundle size
• Faster rendering
• Server is controllable vs di
ff
erent
kind of browser
• Hydrate only what is needed
• Keep sensitive data on the server
• Caching
Cons?
• No CSS-in-JS
• React Context doesn’t work
• More things to think about
• More work on server
• Need to control which part hydrate
18. Should I use React Server Components?
• Yes, if you are already deeply invested in React + Next.js
• Yes, if you have control of the server
• Yes, if performance is very important to you
• Yes, if your bundle size is too big
• No, if your life is complex enough already
19. Adoption strategy
• Add the “use client” directive to the root of your app
• Move the directive as low in the rendering tree as you can
• Adopt advanced patterns when performance issues arise