Keeping Static Site Rendering Cool with React Hydration
summary
Server-rendered React claims faster initial content and better SEO but hydration often breaks when browser-only data or JS-delivered CSS appear. Demonstrated tools and fixes include gatsby and react-dom hydrate, diagnosing with webpagetest filmstrips, removing font awesome external CSS and inlining equivalent styles to stop icon layout shifts, and using fresno or gatsby-image and HTML art direction to let CSS handle layouts and responsive images. The replicated CSS fix removes the jump and the site loads consistently as expected.
AI-written summary · about
chapters (15)
- 0:00Intro
- 3:39WHAT IS SERVER-SIDE RENDERING (SSR)?
- 4:07WHY SERVER-SIDER RENDERING (SSR)?
- 4:26WHAT IS CLIENT-SIDE RENDERING (CSR)?
- 4:50CLIENT-SIDE RENDERED INITIAL DOM
- 5:23OVERVIEW OF SSR (IN STATIC CONTEXT)
- 8:10DEBUGGING SSG HYDRATION ISSUES
- 10:46IMMUTABLE LAYOUT
- 11:18CONDITIONAL RENDERING
- 13:25ERROR: WINDOW IS UNDEFINED
- 14:41SAFELY ACCESS BROWSER ELEMENTS
- 15:08USEEFFECT EXAMPLE
- 16:55ART DIRECTION: HTML OR JAVASCRIPT?
- 17:46ART DIRECTION IN HTML
- 20:23RESOURCES + FURTHER READING
related talks
27mOptimizing the Critical Rendering Path in React
10mServer Rendering & Suspense, Hydration Improvement
31mFaster content websites via SSR and progressive hydration of Web Components
32mStay Away From My Path!
25mThe first two seconds: Faster page loads with React
45mGive Me Back My Frontend!
06mDemystifying server-rendered React apps: Performance & Security
17mThe Client-Side Revolution, Brought to You by React