Server side rendering (ssr)
USI TechTalk
by
Troy Rhinehart
Index
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
React SSR
By gingur
React SSR
Quick USI TechTalk on React SSR
