React Server
Components: A New
Way to Build Fast and
Interactive Web Apps
Aurora Scharff
@aurorascharff
Slide 2
Slide 2 text
React Server Components:
Why should you care?
Slide 3
Slide 3 text
Introduction
> Aurora Scharff
> Consultant at Inmeta
> Norway, Oslo
> Full-stack, web-focused: active
RSC developer
Slide 4
Slide 4 text
Talking points
> Rendering strategies
> React Server Components
> Next.js App Router
> RSC in Next.js “the right way”
> Demo
> Real world experience
> The future of RSC
Slide 5
Slide 5 text
Rendering strategies
Slide 6
Slide 6 text
Static website rendering
> Pages are pre-assembled and uploaded
to a static host
> Simple and efficient
> Struggles with dynamic data and
impractical to maintain
Slide 7
Slide 7 text
Multi-page applications (MPAs)
> HTML and data are
dynamically merged on
the server
> Serves the merged result
on page load
> Page reloads per request
Slide 8
Slide 8 text
pros
√ Optimized for SEO
√ Unlimited scalability
√ More website insights
Multi-page applications (MPAs)
Slide 9
Slide 9 text
pros
√ Optimized for SEO
√ Unlimited scalability
√ More website insights
cons
× Slower perceived
performance
× Limited interactivity
× Hard to maintain
Multi-page applications (MPAs)
Single-page applications, cons
× Slow initial load
× SEO suffers
× Needs
JavaScript
× Less secure
Slide 13
Slide 13 text
SPA vs. MPA lifecycle
Slide 14
Slide 14 text
Server-side rendering (SSR)
> Pre-render the initial HTML
on the server
> Fully-formed HTML when
opening the page
> JavaScript is fetched
alongside it
Slide 15
Slide 15 text
Static site generation (SSG)
> Pages are pre-assembled
and uploaded to a static host
> Requires site redeployment
whenever data changes
> JavaScript is fetched
alongside it
Slide 16
Slide 16 text
Server-side rendering (SSR)
> Included feature in JavaScript
“meta-frameworks”
> Build time (SSG) and/or
request time (SSR)
> Pages generated in the build
can be cached
Slide 17
Slide 17 text
Hydration
Slide 18
Slide 18 text
Hydration
Hydration is like watering the “dry”
HTML with the “water” of
interactivity and event handlers.
- React core team member Dan
Abramov
https://github.com/reactwg/react-18/discussions/37
Slide 19
Slide 19 text
Server-side rendering
Slide 20
Slide 20 text
The problem
Slide 21
Slide 21 text
The problem
1. You have to fetch everything before you can
show anything
2. You have to load everything before you can
hydrate anything
3. You have to hydrate everything before you
can interact with anything
Slide 22
Slide 22 text
Strategies to improve it
> Partial hydration: only attach JS to certain
components
> Progressive hydration: lazy load JS to
certain components
> Selective hydration: priority load JS to
certain components based on user
interactivity
Slide 23
Slide 23 text
Streaming
> Split a request into chunks
> Send each chunk as a
stream to the client
> Render each chunk as it is
streamed in
Drawbacks
× Require a framework
× Increased complexity
× Learning curve
× Early adoption
Slide 53
Slide 53 text
Next.js App Router
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
|
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
RSC in Next.js “the right way”
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
Data management
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
Server Functions
Slide 72
Slide 72 text
Server Functions
> Mark a function/file with “use server”
> Next.js creates a “hidden” API endpoint for
you
> Use the function in any component
> Provides a type-safe RPC-experience
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
Demo
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
Real world experience
Slide 83
Slide 83 text
Requirements
> Interactive dashboards
> Complex forms and tables
> Articles through a CMS, static data
> Need for SEO
> Mobile friendly and accessible
> Multiple language support
> Customer’s own UI library
Slide 84
Slide 84 text
cons
× Wrappers for custom
library
× Trial and error i18n
× Limited testing
resources
Experience
Slide 85
Slide 85 text
pros
√ Performant app that
fulfills requirements
√ Maintainable app code
√ Enjoyable DX
Experience
cons
× Wrappers for custom
library
× Trial and error i18n
× Limited testing
resources
Slide 86
Slide 86 text
The future of RSC
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
“Elkjøp's Digital Transformation”
https://vercel.com/blog/elkjops-digital-
transformation-with-next-js-and-vercel
https://www.kode24.no/artikkel/elkjop-
bytta-ut-angular-med-nextjs-
morsomste-jeg-har-gjort/81543342
https://www.youtube.com/watch?v=4wOqpP
dR1tg