Mastering Server-rendered Apps
summary
Uses Node and Express with shared routes and Redux state to build HTML on the server, inlines initial state into the page and hydrates the client; initially renders with renderToString so the page is crawlable and works without JS, then replaces that with a client bundle for interactivity; swaps to streaming via react-dom-stream to start bytes flowing immediately and cut perceived load time instead of waiting for all fetches and full render.
AI-written summary · about
chapters (11)
- 0:00Start
- 3:20It's about sharing code between your server code and your browser code
- 5:31Page load is critical Every delay make users go away
- 6:25the user is on a slow computer
- 6:45the user has a slow connection
- 7:42the user is stuck on a computer they don't control (school, library).
- 7:59the user trying to download your site to read away from an Internet connection
- 8:34the user is using NoScript and visits your site
- 9:07the user is using using adblock and you've named a critical JS bundle with something related to ads
- 9:35Good news! ALL of these problems can be solved with server-rendering
- 16:15Need to rely on a fetch method before render Relatively slow due to lack of optimisations like cache
related talks
24mUniversal Applications
40mServer Components for the Rest of Us
39mReact Server Components: A Deep Dive
38mBuilding Isomorphic Web Applications with React
54mReact Server Components: A New Way to Build Fast and Interactive Web Apps
30mReact: Rethinking best practices
31mThe Bumpy Road to Universal JavaScript
45mReact Server Components: A New Way to Build Fast and Interactive Web Apps