Server-side Rendered React

Tyler Graf

Web Dev

FamilySearch - Tree Team

What to expect

What is SSR?
Why SSR?
Latest frameworks
Progressive enhancement

Flavors of React Rendering

SSR

SSG

CSR

Server

<html>

</html>

renderRoot(reactNode, domNode)

Request

HTML

Client-side Rendered (CSR)

res.send(html)

Server

renderToString(<App data={data}/>)

res.send(html)

hydrateRoot(reactNode, domNode)

Request

HTML

Server-side Rendered (SSR)

const data = await fetch()

Server

renderToString(<App/>)

res.send(html)

hydrateRoot(reactNode, domNode)

Request

HTML

Static Site Generation (SSG)

CDN

Build Server

uploadToS3(html)

file.html

getFileFromS3()

2015
Owned by Vercel

2021
Funded by Shopify

Getting Started

$ npx create-next-app@latest

$ npx create-remix@latest

Integrate into Express

import express from 'express'
import { createRequestHandler } from "@remix-run/express";

const app = express()

app.all("*", createRequestHandler());

Runtime Integrations

node
edge functions
deno
cloudflare
etc

Build

Why?

Why SSR?

create-react-app is deprecated
SEO
Performance
a11y

Performance

Australia - 3G - Moto G4

Server vs Client Components

	Server Component	Client Component
Rendered by Server	Yes	Yes, if passed data
Rendered By Client	Yes if navigating	Yes

export const loader = async () => {
  const name = await fetch('/api/name').then(res=>res.json())
  return json({name})
}

export default function Home(){
  const {name} = useLoaderData()
	
  return <div>
    {name}
  </div>
}

Remix Server Component

React Server Component

(next.js)

export default async function Home(){
  const name = await fetch('/api/name').then(res=>res.json())
	
  return <div>
    {name}
  </div>
}

useEffect

'use client'

export default function Home(){
  const [name, setName] = useState()

  useEffect(()=>{
    fetch('/api/name')
      .then(res=>res.json())
      .then(data=>setName(data))
  },[])
  
	
  return <div>
    {name}
  </div>
}