React Server Component in Next.js by Hanief Utama
0 likes410 views
The document discusses the use of React Server Components (RSC) in Next.js, highlighting the pros and cons of implementing them in web applications. It emphasizes performance benefits, including smaller bundle sizes and faster rendering, while also noting potential challenges like lack of CSS-in-JS support and the need for careful server control. The author advises on an adoption strategy and conditions under which RSC should be considered, particularly for those already invested in React and Next.js.
![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](https://image.slidesharecdn.com/rscinnextjs-240421151731-6322d18c/85/React-Server-Component-in-Next-js-by-Hanief-Utama-5-320.jpg)
![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](https://image.slidesharecdn.com/rscinnextjs-240421151731-6322d18c/85/React-Server-Component-in-Next-js-by-Hanief-Utama-6-320.jpg)
![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](https://image.slidesharecdn.com/rscinnextjs-240421151731-6322d18c/85/React-Server-Component-in-Next-js-by-Hanief-Utama-7-320.jpg)
![App
Header
‘Use client’;
Article
HitCounter Discussion
Comment Comment
Client Boundary
Chart adapted from Josh W Comeau [https://www.joshwcomeau.com/react/server-components/]](https://image.slidesharecdn.com/rscinnextjs-240421151731-6322d18c/85/React-Server-Component-in-Next-js-by-Hanief-Utama-13-320.jpg)
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
- 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
- 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
- 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