SlideShare a Scribd company logo
1 of 20
Download to read offline
JogjaJS / 28 October 2023
React Server
Components
in Next.js
• Senior Software Engineer / Tech
Lead Frontend @
• Currently helping Jakpat
migrating internal dashboard
from (Laravel + AngularJS) to
(React + Next.js)
Hanief Utama
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
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
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
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
React Server Components
Server Component Client Component
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
App
Header Article
HitCounter Discussion
Comment Comment
App
Header
‘Use client’;
Article
HitCounter Discussion
Comment Comment
App
Header
‘Use client’;
Article
HitCounter Discussion
Comment Comment
Client Boundary
Chart adapted from Josh W Comeau [https://www.joshwcomeau.com/react/server-components/]
Next.js is the only
framework that o
ff
er full
support of RSC
Using Server Components in Next.js
• Next.js 13.4+
• Use App Router
• Server Components is default
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
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
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
Thank you

More Related Content

Similar to React Server Component in Next.js by Hanief Utama

Reactjs notes.pptx for web development- tutorial and theory
Reactjs  notes.pptx for web development- tutorial and theoryReactjs  notes.pptx for web development- tutorial and theory
Reactjs notes.pptx for web development- tutorial and theory
jobinThomas54
 

Similar to React Server Component in Next.js by Hanief Utama (20)

React.js at Cortex
React.js at CortexReact.js at Cortex
React.js at Cortex
 
Reactjs notes.pptx for web development- tutorial and theory
Reactjs  notes.pptx for web development- tutorial and theoryReactjs  notes.pptx for web development- tutorial and theory
Reactjs notes.pptx for web development- tutorial and theory
 
Performance and Scalability Art of Isomorphic React Applications
Performance and Scalability Art of Isomorphic React ApplicationsPerformance and Scalability Art of Isomorphic React Applications
Performance and Scalability Art of Isomorphic React Applications
 
Universal React apps in Next.js
Universal React apps in Next.jsUniversal React apps in Next.js
Universal React apps in Next.js
 
The Best Guide to Know What, Why, When to Use Is ReactJS
The Best Guide to Know What, Why, When to Use Is ReactJSThe Best Guide to Know What, Why, When to Use Is ReactJS
The Best Guide to Know What, Why, When to Use Is ReactJS
 
React loadable
React loadableReact loadable
React loadable
 
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
 
Building a website without a webserver on Azure
Building a website without a webserver on AzureBuilding a website without a webserver on Azure
Building a website without a webserver on Azure
 
Why ReactJS Is The Right Choice For Your Next Web Application
Why ReactJS Is The Right Choice For Your Next Web ApplicationWhy ReactJS Is The Right Choice For Your Next Web Application
Why ReactJS Is The Right Choice For Your Next Web Application
 
Hire React Remix Top Developers
Hire React Remix Top DevelopersHire React Remix Top Developers
Hire React Remix Top Developers
 
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
 
Sug bangalore - headless jss
Sug bangalore - headless jssSug bangalore - headless jss
Sug bangalore - headless jss
 
Next.js - ReactPlayIO.pptx
Next.js - ReactPlayIO.pptxNext.js - ReactPlayIO.pptx
Next.js - ReactPlayIO.pptx
 
ReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparisonReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparison
 
Building SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.jsBuilding SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.js
 
From MVC to React
From MVC to ReactFrom MVC to React
From MVC to React
 
Headless CMS. Sitecore JSS getting started, tips and tricks
Headless CMS. Sitecore JSS getting started, tips and tricksHeadless CMS. Sitecore JSS getting started, tips and tricks
Headless CMS. Sitecore JSS getting started, tips and tricks
 
Front End Development
Front End DevelopmentFront End Development
Front End Development
 
What are the business benefits of ReactJS for web and mobile applications_.pdf
What are the business benefits of ReactJS for web and mobile applications_.pdfWhat are the business benefits of ReactJS for web and mobile applications_.pdf
What are the business benefits of ReactJS for web and mobile applications_.pdf
 
React.js for Rails Developers
React.js for Rails DevelopersReact.js for Rails Developers
React.js for Rails Developers
 

Recently uploaded

Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
Lisi Hocke
 

Recently uploaded (20)

Abortion Clinic In Pretoria ](+27832195400*)[ 🏥 Safe Abortion Pills in Pretor...
Abortion Clinic In Pretoria ](+27832195400*)[ 🏥 Safe Abortion Pills in Pretor...Abortion Clinic In Pretoria ](+27832195400*)[ 🏥 Safe Abortion Pills in Pretor...
Abortion Clinic In Pretoria ](+27832195400*)[ 🏥 Safe Abortion Pills in Pretor...
 
GraphSummit Milan & Stockholm - Neo4j: The Art of the Possible with Graph
GraphSummit Milan & Stockholm - Neo4j: The Art of the Possible with GraphGraphSummit Milan & Stockholm - Neo4j: The Art of the Possible with Graph
GraphSummit Milan & Stockholm - Neo4j: The Art of the Possible with Graph
 
Evolving Data Governance for the Real-time Streaming and AI Era
Evolving Data Governance for the Real-time Streaming and AI EraEvolving Data Governance for the Real-time Streaming and AI Era
Evolving Data Governance for the Real-time Streaming and AI Era
 
Test Automation Design Patterns_ A Comprehensive Guide.pdf
Test Automation Design Patterns_ A Comprehensive Guide.pdfTest Automation Design Patterns_ A Comprehensive Guide.pdf
Test Automation Design Patterns_ A Comprehensive Guide.pdf
 
Abortion Pill Prices Mthatha (@](+27832195400*)[ 🏥 Women's Abortion Clinic In...
Abortion Pill Prices Mthatha (@](+27832195400*)[ 🏥 Women's Abortion Clinic In...Abortion Pill Prices Mthatha (@](+27832195400*)[ 🏥 Women's Abortion Clinic In...
Abortion Pill Prices Mthatha (@](+27832195400*)[ 🏥 Women's Abortion Clinic In...
 
From Knowledge Graphs via Lego Bricks to scientific conversations.pptx
From Knowledge Graphs via Lego Bricks to scientific conversations.pptxFrom Knowledge Graphs via Lego Bricks to scientific conversations.pptx
From Knowledge Graphs via Lego Bricks to scientific conversations.pptx
 
Microsoft365_Dev_Security_2024_05_16.pdf
Microsoft365_Dev_Security_2024_05_16.pdfMicrosoft365_Dev_Security_2024_05_16.pdf
Microsoft365_Dev_Security_2024_05_16.pdf
 
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024
 
architecting-ai-in-the-enterprise-apis-and-applications.pdf
architecting-ai-in-the-enterprise-apis-and-applications.pdfarchitecting-ai-in-the-enterprise-apis-and-applications.pdf
architecting-ai-in-the-enterprise-apis-and-applications.pdf
 
Alluxio Monthly Webinar | Simplify Data Access for AI in Multi-Cloud
Alluxio Monthly Webinar | Simplify Data Access for AI in Multi-CloudAlluxio Monthly Webinar | Simplify Data Access for AI in Multi-Cloud
Alluxio Monthly Webinar | Simplify Data Access for AI in Multi-Cloud
 
The Strategic Impact of Buying vs Building in Test Automation
The Strategic Impact of Buying vs Building in Test AutomationThe Strategic Impact of Buying vs Building in Test Automation
The Strategic Impact of Buying vs Building in Test Automation
 
BusinessGPT - Security and Governance for Generative AI
BusinessGPT  - Security and Governance for Generative AIBusinessGPT  - Security and Governance for Generative AI
BusinessGPT - Security and Governance for Generative AI
 
Auto Affiliate AI Earns First Commission in 3 Hours..pdf
Auto Affiliate  AI Earns First Commission in 3 Hours..pdfAuto Affiliate  AI Earns First Commission in 3 Hours..pdf
Auto Affiliate AI Earns First Commission in 3 Hours..pdf
 
Novo Nordisk: When Knowledge Graphs meet LLMs
Novo Nordisk: When Knowledge Graphs meet LLMsNovo Nordisk: When Knowledge Graphs meet LLMs
Novo Nordisk: When Knowledge Graphs meet LLMs
 
Abortion Clinic In Johannesburg ](+27832195400*)[ 🏥 Safe Abortion Pills in Jo...
Abortion Clinic In Johannesburg ](+27832195400*)[ 🏥 Safe Abortion Pills in Jo...Abortion Clinic In Johannesburg ](+27832195400*)[ 🏥 Safe Abortion Pills in Jo...
Abortion Clinic In Johannesburg ](+27832195400*)[ 🏥 Safe Abortion Pills in Jo...
 
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
 
Software Engineering - Introduction + Process Models + Requirements Engineering
Software Engineering - Introduction + Process Models + Requirements EngineeringSoftware Engineering - Introduction + Process Models + Requirements Engineering
Software Engineering - Introduction + Process Models + Requirements Engineering
 
Prompt Engineering - an Art, a Science, or your next Job Title?
Prompt Engineering - an Art, a Science, or your next Job Title?Prompt Engineering - an Art, a Science, or your next Job Title?
Prompt Engineering - an Art, a Science, or your next Job Title?
 
Community is Just as Important as Code by Andrea Goulet
Community is Just as Important as Code by Andrea GouletCommunity is Just as Important as Code by Andrea Goulet
Community is Just as Important as Code by Andrea Goulet
 
Abortion Pill Prices Jane Furse ](+27832195400*)[ 🏥 Women's Abortion Clinic i...
Abortion Pill Prices Jane Furse ](+27832195400*)[ 🏥 Women's Abortion Clinic i...Abortion Pill Prices Jane Furse ](+27832195400*)[ 🏥 Women's Abortion Clinic i...
Abortion Pill Prices Jane Furse ](+27832195400*)[ 🏥 Women's Abortion Clinic i...
 

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
  • 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/]
  • 14.
  • 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