Building Isomorphic Web Applications with React
summary
Claims that server + client code reuse improves SEO, perceived load and maintainability and that React can run on Node; demos an isomorphic board‑game app (GitHub repo), using React with renderToString, Node, Webpack, React Router, BrowserSync and EJS. Server rendering works in production but server DOM rendering proves slow at scale so a server-side cache and careful bootstrapping/serialization of data for rehydration via serialized data are required. The implementation succeeds but adds complexity and developer overhead.
AI-written summary · about
chapters (31)
- 0:00Building Isomorphic Web Apps with React
- 1:12Practical Isomorphic
- 1:43Why Isomorphic?
- 4:20Syntax
- 5:53Apps and Libraries With React
- 7:17React Isomorphic frameworks
- 8:02React makes isomorphic possible
- 10:13Folder structure
- 11:12Build tools
- 11:45Webpack lets you
- 13:36Abstract server/browser differences
- 14:05Defining environments
- 14:15Gulp + Browser Sync
- 15:01Shared routes
- 15:53Client Router
- 16:33Server Router
- 16:58Render the view
- 17:10Building the view
- 17:55Child Views
- 18:14Render the cards
- 18:38Detail page code
- 19:51Higher Order Component
- 20:48Render on the server
- 22:59Getting the data to the client
- 23:25Reading the data on the client
- 23:58Handling node vs browser
- 25:42Pros of building an isomorphic App
- 26:11Cons of building an isomorphic app
- 28:27The future of isomorphic
- 29:46Recommendations
- 30:32Questions?
related talks
24mUniversal Applications
39mIsomorphic React Applications
39mIsomorphic React Applications
21mReact Server Components
53mBuilding Web Apps with React.js
54mReact Server Components: A New Way to Build Fast and Interactive Web Apps
23mMastering Server-rendered Apps
48mReact Server Components: A New Way to Build Fast and Interactive Web Apps