Hydration Delay
Analyzer

Hydration is the process where a JavaScript framework takes over static HTML and makes it interactive. During hydration, the framework re-renders components in the browser. If your content is only added during hydration (not present in the initial HTML), search engines may not see it.

Ideally, 70% or more of your visible content should be in the initial HTML before JavaScript runs. If more than 50% of your content depends on JavaScript, crawlers are likely missing significant portions of your page content.

An empty root div (like <div id='root'></div> or <div id='app'></div>) means your server sends an empty HTML shell. All content is injected by JavaScript after the page loads. This is the worst case for SEO because crawlers see a blank page initially.

Use server-side rendering (SSR) with frameworks like Next.js or Nuxt, implement static site generation (SSG) for pages that don't change often, or use a prerendering service like Hado SEO to serve fully rendered HTML to search engine crawlers.