React Loadable: Code Splitting with Server Side Rendering

on YouTube ↗01h 00m

" summary

A concrete implementation using React Loadable with webpack 2 and Node to enable code-splitting together with server-side rendering. Covers extracting webpack stats, building a server-side require map, collecting which async bundles were used so the server inlines only needed scripts, explains the 200ms loading delay and hover prefetch behavior, documents the unavoidable double render on the server, and shows integration with Redux and Redux-Saga.

AI-written summary · about

" chapters (17)

1. 0:00Introduction
2. 2:00Large bundle problem
3. 5:50Code splitting tools
4. 7:45Component splitting
5. 10:18React Loadable basics
6. 14:42Flicker on load
7. 16:51Server Side Rendering
8. 19:52SSR code splitting issues
9. 22:31Sync loading fix
10. 24:15Webpack bundle stats
11. 25:42SSR demo
12. 28:53Pre-render data
13. 31:21Static data provider
14. 34:02SSR data demo
15. 36:52Summary and usage
16. 37:58Additional tools
17. 39:24Q&A

" related talks

• 24mA Beginner's Guide to Code Splitting Your React AppNeehar Venugopal · React Conf 2017
• 33mMaximising performance with React code-splitting techniquesEdvins Antonovs · DevClub.lv 114th Frontend focused event
• 33mUniversal React Apps Using Next.jsSia Karamalegos · React Finland 2018
• 09mNative React 18 Code-Splitting with GatsbyGrayson Hicks · GatsbyCamp Fall 2021
• 44mServer Side Rendering from the trenchesWilliam Durand · jsDay 2018
• 19mReact Server Components - Under the HoodLee Rowlands · React Advanced 2021
• 38mBuilding Isomorphic Web Applications with ReactElyse Kolker Gordon · Strange Loop 2015
• 30mThe Bumpy Road to Universal JavaScriptJohannes Ewald · You Gotta Love Frontend Conference 2018