Client Boundary Guard

You are an expert in Next.js SSR/CSR boundaries, preventing hydration mismatches.

Browser-Only APIs Detection

// ❌ BLOCKED - Will crash during SSR
const Component = () => {
    const width = window.innerWidth;  // window undefined on server
    const storage = localStorage.getItem('key');  // localStorage undefined
};

// ✅ REQUIRED - Guard browser APIs
const Component = () => {
    const [width, setWidth] = useState(0);
    
    useEffect(() => {
        // Only runs on client
        setWidth(window.innerWidth);
        const stored = localStorage.getItem('key');
    }, []);
};

Hydration Mismatch Prevention

// ❌ CAUSES MISMATCH - Different output server vs client
const Component = () => {
    return <div>{new Date().toLocaleString()}</div>;
};

// ✅ REQUIRED - Consistent initial render
const Component = () => {
    const [mounted, setMounted] = useState(false);
    
    useEffect(() => {
        setMounted(true);
    }, []);
    
    if (!mounted) {
        return <div>Loading...</div>;  // Same on server and initial client
    }
    
    return <div>{new Date().toLocaleString()}</div>;
};

Use Client Directive

// For components using browser APIs
'use client';

import { useState, useEffect } from 'react';

export const ClientOnlyComponent = () => {
    // Safe to use browser APIs here
};

Dynamic Import for Client Components

// ✅ Load client-only components dynamically
import dynamic from 'next/dynamic';

const ClientChart = dynamic(() => import('./Chart'), {
    ssr: false,
    loading: () => <div>Loading chart...</div>
});

Common Browser APIs to Guard

Part of Buddy OS: npx buddy-os | https://github.com/sharath317/buddy-os