Boost Core Web Vitals with Partial Hydration
We’ve seen it happen: a blog page loads, but the user can’t click “Like” or comment — the browser is busy hydrating the footer, which doesn’t need JavaScript at all. Full Hydration loads the entire React bundle (~45 KB) and hydrates the whole DOM, even static blocks. That’s straight waste: extra JavaScript, extra CPU, slow Time to Interactive (TTI).
Partial Hydration solves this radically: only components that need interactivity are hydrated. Static content remains inert HTML. This approach delivers a 30–60% improvement in TTI and reduces JS volume by 50–80%. Our certified performance engineers have optimized over 40 projects with guaranteed performance improvements. On high-traffic sites, this translates to significant cost savings—often $500–$2,000 per month on CDN and hosting. Our typical engagement costs $2,000–$5,000 for a partial hydration audit and implementation. For a typical e-commerce site, implementing partial hydration can save $1,000–$3,000 per month in CDN costs alone.
Partial hydration is 3 times more efficient in reducing bundle size compared to full hydration. It reduces JS bundle by 50–80% and improves TTI by 30–60% — a clear 2–5× advantage in efficiency. Compared to full hydration, partial hydration reduces JS bundle by 2–5×, making it 2–5 times more efficient.
The Problem with Full Hydration
A typical blog page has many static blocks: header, navigation, footer. With Full Hydration, every one of them goes through a full hydration cycle, even though interactivity is only needed for comments and “Share” buttons. Without partial hydration, the browser loads the entire React bundle (~45 KB) and all component code. With partial hydration — only the code for interactive blocks. Reducing the JS bundle by 50–80% directly lowers hosting and CDN traffic costs.
How to Implement Partial Hydration in Popular Frameworks?
Astro Islands
Astro implements partial hydration via client:* directives. This is known as Islands architecture. Component hydration is at the heart of this approach. Here’s an example article page:
---
// src/pages/article/[slug].astro
import ArticleHeader from '@/components/ArticleHeader.astro'; // Server
import ArticleContent from '@/components/ArticleContent.astro'; // Server
import CommentSection from '@/components/CommentSection.tsx'; // React, needs hydration
import ShareWidget from '@/components/ShareWidget.svelte'; // Svelte, needs hydration
import NewsletterForm from '@/components/NewsletterForm.vue'; // Vue, needs hydration
const { slug } = Astro.params;
const article = await getArticle(slug);
---
<html>
<body>
<!-- Zero JS — pure HTML -->
<ArticleHeader title={article.title} author={article.author} />
<ArticleContent content={article.content} />
<!-- Hydrate when visible in viewport -->
<CommentSection articleId={article.id} client:visible />
<!-- Hydrate on first interaction -->
<ShareWidget url={Astro.url.href} client:idle />
<!-- Immediate hydration (critical content) -->
<NewsletterForm client:load />
</body>
</html>
Astro Official Documentation emphasizes: “The client:* directives allow you to precisely control when the browser loads JavaScript for each component, keeping the rest of the page static.”
Hydration directives:
| Directive | When JS loads |
|---|---|
client:load |
Immediately on page load |
client:idle |
After requestIdleCallback (browser idle) |
client:visible |
When component enters viewport |
client:media="..." |
When media query matches |
client:only="react" |
Client-only, no SSR |
Next.js Dynamic Import
import dynamic from 'next/dynamic';
// These components do NOT go into the initial bundle
const CommentSection = dynamic(() => import('@/components/CommentSection'), {
ssr: false,
loading: () => <CommentsSkeleton />,
});
const VideoPlayer = dynamic(() => import('@/components/VideoPlayer'), {
ssr: false,
});
const HeavyChart = dynamic(() => import('@/components/analytics/HeavyChart'), {
ssr: false,
loading: () => <div className="h-64 animate-pulse bg-gray-100 rounded" />,
});
// Hydrate when in viewport — native IntersectionObserver
function LazyHydrate({ children, rootMargin = '200px' }) {
const [hydrated, setHydrated] = useState(false);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => { if (entry.isIntersecting) setHydrated(true); },
{ rootMargin }
);
if (ref.current) observer.observe(ref.current);
return () => observer.disconnect();
}, []);
return <div ref={ref}>{hydrated ? children : <div style={{ minHeight: '1px' }} />}</div>;
}
// Usage
export default function ArticlePage({ article }) {
return (
<article>
<ArticleHeader article={article} /> {/* Server, 0 JS */}
<ArticleBody content={article.content} /> {/* Server, 0 JS */}
<LazyHydrate>
<CommentSection articleId={article.id} />
</LazyHydrate>
</article>
);
}
LazyHydrate Implementation Details
For more on Intersection Observer, see the MDN documentation at https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API. Lazy hydration is a key component of this strategy.Progressive Hydration
Components can be hydrated in sequence without blocking the main thread:
'use client';
import { useEffect, useState } from 'react';
// Hydration scheduler via requestIdleCallback
function useIdleHydration(delay = 0): boolean {
const [ready, setReady] = useState(false);
useEffect(() => {
let id: number;
if ('requestIdleCallback' in window) {
id = requestIdleCallback(() => setReady(true), { timeout: delay || 2000 });
} else {
id = setTimeout(() => setReady(true), delay) as unknown as number;
}
return () => {
'requestIdleCallback' in window
? cancelIdleCallback(id)
: clearTimeout(id);
};
}, [delay]);
return ready;
}
function IdleComponent({ children, fallback }: IdleProps) {
const ready = useIdleHydration(1000);
return ready ? children : fallback;
}
Progressive Hydration Code
This scheduler uses requestIdleCallback to defer hydration until the browser is idle. TTI optimization is achieved through this method.How to Measure Performance Gains?
Key Metrics
| Metric | Expected Improvement |
|---|---|
| Total Blocking Time (TBT) | -40–70% |
| Time to Interactive (TTI) | -30–60% |
| JS Parse/Execute time | -50–80% |
| Largest Contentful Paint (LCP) | -15–20% |
| Lighthouse Performance Score | +10–25 points |
Tools
# Webpack Bundle Analyzer
npx @next/bundle-analyzer
# Astro Check: which components add JS
npx astro check
# Lighthouse CLI for automation
npx lighthouse https://web.dev --output json \
--only-categories=performance \
| jq '.categories.performance.score'
When to Use and When to Avoid
Partial hydration is best for public content pages: blogs, documentation, catalogs, landing pages. It is not suitable for:
- SPAs with rich interactivity on every page
- Apps where almost all components are client-side
- Dashboards behind authentication — SEO is irrelevant, JS loads once
Implementation Guide
Step-by-Step Plan
- Audit JS bundle: identify components without client logic (headers, footers, static content).
- Profile TTI on the current version.
- Mark components: server components (Astro components or Next.js server components) and client components (with
client:visible,client:idledirectives ordynamic()withssr:false). - Implement LazyHydrate wrappers for content below the fold.
- Measure metrics, integrate Lighthouse CI into the pipeline.
- Document architecture and train the client’s team.
What's Included in the Work
- Audit of your current JS bundle and profiling of key metrics (TTI, TBT, FCP).
- Architecture design for islands/partial hydration tailored to your stack.
- Implementation of hydration directives and dynamic imports with priority handling.
- Lighthouse CI setup for automated regression control.
- Documentation of architecture and team training.
- Post-release support for 2 weeks.
Timeline
- Week 1: JS bundle audit, identify components without client logic, profile TTI.
- Weeks 2–3: Mark components as server/client, implement directives (
client:visible,client:idle) ordynamic()withssr:false. - Week 4: LazyHydrate wrappers for scroll-below-the-fold content, measure metrics.
- Week 5: Regression testing, Lighthouse CI in pipeline, documentation.
Get Started Today
With our proven track record and performance guarantee, we ensure your site achieves Core Web Vitals. Contact our certified performance engineers for a precise optimization plan tailored to your project. Our certified performance optimization approach delivers guaranteed results.
Partial Hydration is a game-changer for modern web performance. Contact us to start your optimization journey.