Skip to main content
Alvin QuachFull Stack Developer
HomeProjectsExperienceBlog
HomeProjectsExperienceBlog
alvinquach

Full Stack Developer building systems that respect complexity.

Open to opportunities

AQ

Projects

  • All Projects
  • Hoparc Physical Therapy
  • OpportunIQ
  • Hoop Almanac
  • SculptQL

Knowledge

  • Blog
  • Experience
  • Interview Prep

Connect

  • Contact
  • LinkedIn
  • GitHub
  • X

Resources

  • Resume
© 2026All rights reserved.
Back to Blogs
Bug Fix
Depth: ●●○○○

Hydration Mismatch Bug in Next.js with Dynamic Imports

Debugging a frustrating hydration error caused by client-only libraries loaded via dynamic imports.

Published September 5, 20241 min readImportance: ★★★★☆
Next.js
React
Performance
Share:

The Problem

Console error: 'Text content does not match server-rendered HTML'. Appeared randomly on page load. Component worked fine in development but failed in production.

Investigation

The chart library (Recharts) was being imported normally but accessed browser APIs during render. Server rendered null, client rendered the chart, causing mismatch.

Solution

Used dynamic import with ssr: false. Also added a loading skeleton to prevent layout shift. Key lesson: any library that touches window/document needs ssr: false.