{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

Senior SE

Maya Shavin

📚    Book author

🧑‍🎨    Illustrator

{Rendering...}

# Rendering
# Rendering

Serverless SSR?

# Serverless
# 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)

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