{Serverless}
with
Server Components
Maya Shavin - React Next 2021
{About_me}
Core maintainer of StorefrontUI
MDE of Cloudinary
GDE on Web Performance
NuxtJS Ambassador
VueJS Israel Organizer
šĀ Ā Book author
š§āšØĀ Ā Illustrator
{Rendering...}
# Rendering
Source: Rendering the web
# Rendering
Serverless SSR?
# Serverless
Source: Serverless Computing
# Serverless
# Serverless
Client-side
API Gateway
/products
Products Function
Orders Function
/orders
/buy
Buy
Function
Products DB
Orders DB
Serverless SSR?
STILL SSR - Server side rendering
STILL need a server, but not that monolith oneĀ
Ā NOT rely on specific monolith web server
Ā Use SERVER-LESS functions as APIs (FaaS)
# Serverless
{Fetching...}
Fetching data & rendering in React
Fetch as you render
Component fetches its data during rendering process.
FAR
FFRL
Fetch First, Render Later
Fetch data on initial page load, then render everything at once.
RAF
Render as you fetch
Render whatever is ready first, while fetching data for non-ready component.
# Handling data
# Handling data
Render As you Fetch
Fetching data in parallel of rendering (kind of)
Ā
Rendering whatever ready first, while waiting for the fetch is completed.
Suspense
Ā
Concurrent Mode
NOT possible without the ability to fetch first render later
# Handling data
Fetch First,
Render later
Fetch all data, then render everything once done.
Pre-fetch mechanism
Fetch As you Render
Data is fetched inside the component while rendering.
Ā
Same goes with its children component.
# Handling data
Fetch As Render
# Handling data
Load module bundle
Render
Fetch data
Component
Update
Render
Fetch data
Child Component
Update
Load module bundle
Render
Fetch data
Component
Update
Load module bundle
Render
Fetch data
Child Component
Update
Load module bundle
Render
Fetch data
Child Component
Update
Load module bundle
Render
Fetch data
Child Component
Update
Load module bundle
# Handling data
No outside control over fetching data
Can't fetch until render
Child can't render until parent's data fetched
The bundle size
# Handling data
{Server_component}
# Server component
Core concepts
Render component on the server-side in a specific format (not HTML)
Zero impact to bundle size (no component JS code should be included)
Reduce number of states for applications (in fact, it's stateless)
Has direct access to server-only functions and resources (GraphQL query support)
Source: React Server Components
Client component
Server component
# Server component
# Server component
Naming convention
ComponentA.server.js
ComponentB.client.js
ShareComponent.js
/components/
ComponentServerA.js
ComponentClientB.js
ShareComponent.js
/components/
# Server component
How it works
Server Component is 100% static
useEffect, useState
No interactive event listener
onChange, onBlur, onClick
Only get rendered and fetched by browser when needed
# Server component
How it works
# Server component
Smaller bundle size (faster TTFB)
Ā
Maintainable and reusable code for both client and server side
Ā
Simplify backend-codeĀ
Ā
No impact on client component's state
Ā
Live streaming component (live update)
{The_pros}
{The_cons}
# Server component
The Response Size
Before (CSR)
After
# Server component
Request Frequency
Render as HTML and fetch once for initial load
Re-fetch multiple times to re-render for every user interaction
Need additional help to load resources in parallel
Need good caching system for pre-rendered component.
No need for separate caching system
No need for additional framework
SSR
RSC (Server Comp)
# Server component
The tradeoffs
Zero Bundle impact
Infinite network requests
Summary
# SUMMARY
Serverless is the future, but not Server Component (not yet)
Server Component is good for simple, non-interactive component
Don't use Server Component for dynamic list rendering (not for now)
Wait and see ;)
Resources
# SUMMARY
Thank you
Maya Shavin