What is React Server Component? How can we use it in Next.js? This is a my presentation slide in JogjaJS community gathering in 28 October 2023.

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

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

8. React Server Components

9. Server Component Client Component

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

11. App
Header Article
HitCounter Discussion
Comment Comment

12. App
Header
‘Use client’;
Article
HitCounter Discussion
Comment Comment

13. App
Header
‘Use client’;
Article
HitCounter Discussion
Comment Comment
Client Boundary
Chart adapted from Josh W Comeau [https://www.joshwcomeau.com/react/server-components/]

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

20. Thank you