How we built our custom React SSR Engine
summary
Claim: Toptal builds and runs a custom React server rendering engine called Frontier SSR engine that serves the entire public site for years. It renders HTML from POSTed page data, caches pages, and supports incremental builds via ETag hashing of Webpack stats so only affected templates rebuild (tens of thousands of pages stay cached; single-page updates take seconds). It implements partial hydration with deferred rehydration to reduce JS and payload, uses Webpack + react DOM, and proves practical in production.
AI-written summary · about
chapters (18)
- 0:00Start
- 5:52How We Built Our Custom React Ssr Engine Server-Side Rendering Engine
- 6:02Introduction about Myself
- 6:34Table of Contents
- 7:05Who We Are
- 8:03Background Story
- 10:27Page Optimization
- 10:49Public Pages
- 21:54Partial Builds
- 26:07Project Structure
- 26:27Simplified Webpack Config
- 34:57Pros and Cons
- 35:57Cons
- 37:12Summary
- 38:52What Is React Hydration
- 39:05Hydration
- 43:25Partial Hydration
- 1:10:11Interview Process
related talks
44mServer Side Rendering from the trenches
35mReact SSR in the Wild: yes, we can (when we should)
07mSpeeding up React SSR
12mReact Server Components and SSR: How it Fits
30mServer Side Rendering — The Eyes Fear, the Hands Do
45mGive Me Back My Frontend!
27mSSR & SSG in NextJS- 30mServer Side Rendering: Scared Eyes, Working Hands