The Bumpy Road to Universal JavaScript
summary
A working example evolves a single‑page random fox images app into server‑rendered, hydrated pages using Express, React, Babel and webpack multi-compiler builds for browser and node. Data fetching moves from componentDidMount to a static appFetchData/getInitialProps API so the server renders final HTML, then serializes state to window with XSS-safe escaping for rehydration. Practical fixes include code‑splitting, anchor‑based navigation, streaming HTML via stream-template, asset manifest and method‑override middleware.
AI-written summary · about
chapters (12)
- 0:00Intro
- 0:49Journey preparations
- 2:19Performance
- 3:31Error resilience
- 5:32Let's start the journey
- 7:18webpack BABEL
- 9:05The node-browser gap
- 12:39The client-server gap
- 15:04Data fetching
- 18:33State dehydration and rehydration
- 20:50The uncanny valley
- 25:12Response streaming
