Server side rendering (ssr)

USI TechTalk

by

Troy Rhinehart

Index

What

Why

Where

How

Server Side Rendering (SSR) is the concept of rendering React Components on the server.

 

The Components rendered typically return HTML, but can be used for routing, data fetching, and/or provide resources needed to complete the request such as styles, javascript, and state.

What is SSR?

HTML and state generated by the SSR lifecycle can be used to hydrate the client side render (CSR) for various benefits.

 

  • Search Engine Optimization (SEO)
  • Core Web Vitals (CWV) (LCP/FID/CLS)
  • Resource Hints (preload/prefetch)
  • Route Splitting
  • State Hydration

WhY USE SSR?

  • CDN/Caching
  • Compute Costs
  • Enviornment
  • Asset Loaders (LESS/SASS/Images)
  • General Support

WhY NOT TO USE SSR?

Where do we SSR?

Editor

  • Locale translations (Widget + Editor)
  • Presentaion Central (@ux/uxcore2)
  • Preload/Preconnnect Link headers (radpack/webpack)

 

PUBLISH

  • Critical CSS (css-in-js)
  • Radpack manifest
  • Bootstrap

HOW TO SSR?

React@16+

  • renderToString - HTML/Hydration
  • renderToStaticMarkup - HTML/Bootstrapping

 

React@18

  • renderToPipeableStream - renderToString as a stream with Suspense/Lazy support

 

https://github.com/trhinehart-godaddy/ssr-demo

Made with Slides.com