How would you implement partial hydration or Islands Architecture in Next.js?

Question

Accepted Answer

Partial hydration and Islands Architecture represent a shift from monolithic client-side applications to a model where most of the page is static HTML, with only isolated interactive 'islands' that hydrate independently. In Next.js, you can implement this pattern through a combination of built-in features: React Server Components for static content, Client Components with strategic 'use client' boundaries, dynamic imports with SSR disabled, and libraries that provide granular control over when and how components hydrate. The goal is to reduce JavaScript execution during page load, improving metrics like Time to Interactive (TTI) and First Input Delay (FID). Core concept: A page is primarily server-rendered static HTML (the 'sea'), with isolated interactive components ('islands') that hydrate independently. Benefits: Reduces JavaScript payload, eliminates unnecessary hydration of static content, improves performance on low-end devices, and maintains SEO benefits of server rendering. Contrast with traditional SSR: Standard Next.js Pages Router hydrates the entire application at once, blocking interactivity until all JavaScript loads and executes. Islands can be loaded based on triggers: viewport visibility, user interaction, idle time, or media queries. // components/HeavyComponent.tsx // This component contains interactive logic and large dependencies 'use client'; import confetti from 'canvas-confetti'; import { useState } from 'react'; export default function HeavyComponent() { const [count, setCount] = useState(0); const handleCelebrate = () => { confetti(); setCount(c => c + 1); }; return ( ); } // app/page.tsx // Parent page - mostly static HTML import dynamic from 'next/dynamic'; // This component's JavaScript will ONLY load on the client // and won't be included in the initial bundle const HeavyComponent = dynamic( () => import('@/components/HeavyComponent'), { ssr: false, // Don't render on server - pure client island loading: () =>

Loading interactive button...

} ); export default function Page() { return (

{/* This is static HTML - no JavaScript */}

Welcome to my site

This is static content that doesn't need hydration.

{/* This is an interactive island - loads separately */}

); } // Result: Initial page load has minimal JS, interactive island loads separately Next.js App Router's React Server Components (RSC) provide a natural foundation for Islands Architecture. By default, all components are Server Components that render on the server and send zero JavaScript to the client. Only components marked with 'use client' become interactive islands that hydrate. This means you can build pages where 90% of the UI is static HTML, and only the truly interactive pieces (buttons, forms, carousels) become client components. The key insight is that Server Components can render Client Components, creating clear boundaries where hydration occurs. // app/page.tsx - Server Component (default) // This file has NO 'use client' directive - it's pure server-rendered HTML import { Suspense } from 'react'; import NewsletterForm from '@/components/NewsletterForm'; import ProductCarousel from '@/components/ProductCarousel'; // This entire page is server-rendered HTML except the explicit client islands export default function HomePage() { return (

{/* All this markup is static HTML - zero JavaScript */}

My Store

Best products online

{/* Static content section */}

Welcome to our store. We sell amazing things.

{/* Interactive island - this component hydrates */} Loading carousel...

}> {/* More static content */}

Customer reviews

★★★★★ - Great store!

{/* Another interactive island - form with validation */} ); } // components/NewsletterForm.tsx 'use client'; // This file becomes an interactive island import { useState } from 'react'; export default function NewsletterForm() { const [email, setEmail] = useState(''); const [submitted, setSubmitted] = useState(false); const handleSubmit = (e) => { e.preventDefault(); // submit logic setSubmitted(true); }; return submitted ?

Thanks for subscribing!

: (

How would you implement partial hydration or Islands Architecture in Next.js?

Implement partial hydration in Next.js using client component boundaries, dynamic imports with SSR, and third-party libraries like next-lazy-hydrate to defer hydration of non-critical UI islands

How would you implement partial hydration or Islands Architecture in Next.js?

Implement partial hydration in Next.js using client component boundaries, dynamic imports with SSR, and third-party libraries like next-lazy-hydrate to defer hydration of non-critical UI islands

Scenario Questions

Follow-up Questions