Next.js INP 폭증? React 렌더 병목 7단계 진단

// app/vitals.ts (또는 lib/vitals.ts)
import { onINP, type Metric } from 'web-vitals';

function sendToAnalytics(metric: Metric) {
  // 예: /api/vitals로 전송
  navigator.sendBeacon(
    '/api/vitals',
    JSON.stringify({
      name: metric.name,
      value: metric.value,
      id: metric.id,
      rating: metric.rating,
      navigationType: metric.navigationType,
      // 커스텀 필드(라우트/유저/실험군 등)
      path: location.pathname,
      ts: Date.now(),
    })
  );
}

export function reportVitals() {
  onINP(sendToAnalytics);
}

'use client';
import React, { createContext, useMemo, useState, useContext } from 'react';

type Ctx = { query: string; setQuery: (v: string) => void };
const SearchContext = createContext<Ctx | null>(null);

export function SearchProvider({ children }: { children: React.ReactNode }) {
  const [query, setQuery] = useState('');

  // ⚠️ query 변경 시 Provider value 객체가 매번 새로 만들어져
  // 하위 트리 전체가 리렌더될 수 있음
  const value = useMemo(() => ({ query, setQuery }), [query]);

  return <SearchContext.Provider value={value}>{children}</SearchContext.Provider>;
}

export function useSearch() {
  const ctx = useContext(SearchContext);
  if (!ctx) throw new Error('SearchProvider missing');
  return ctx;
}

'use client';
import { useMemo, useState } from 'react';

export function SearchList({ items }: { items: string[] }) {
  const [q, setQ] = useState('');

  const filtered = useMemo(() => {
    // q가 바뀔 때마다 큰 배열을 전수 검사
    return items
      .filter((x) => x.toLowerCase().includes(q.toLowerCase()))
      .sort();
  }, [items, q]);

  return (
    <>
      <input value={q} onChange={(e) => setQ(e.target.value)} />
      <ul>
        {filtered.map((x) => (
          <li key={x}>{x}</li>
        ))}
      </ul>
    </>
  );
}

'use client';
import { useDeferredValue, useMemo, useState } from 'react';

export function SearchList({ items }: { items: string[] }) {
  const [q, setQ] = useState('');
  const dq = useDeferredValue(q); // 입력 반응성을 우선

  const filtered = useMemo(() => {
    return items.filter((x) => x.toLowerCase().includes(dq.toLowerCase()));
  }, [items, dq]);

  return (
    <>
      <input value={q} onChange={(e) => setQ(e.target.value)} />
      <ul>{filtered.map((x) => <li key={x}>{x}</li>)}</ul>
    </>
  );
}

'use client';
import { startTransition, useMemo, useState } from 'react';

export function SearchList({ items }: { items: string[] }) {
  const [q, setQ] = useState('');
  const [query, setQuery] = useState('');

  const filtered = useMemo(
    () => items.filter((x) => x.toLowerCase().includes(query.toLowerCase())),
    [items, query]
  );

  return (
    <>
      <input
        value={q}
        onChange={(e) => {
          const v = e.target.value;
          setQ(v);
          startTransition(() => setQuery(v));
        }}
      />
      <ul>{filtered.map((x) => <li key={x}>{x}</li>)}</ul>
    </>
  );
}

'use client';
import { FixedSizeList as List, ListChildComponentProps } from 'react-window';

export function VirtualizedList({ items }: { items: string[] }) {
  const Row = ({ index, style }: ListChildComponentProps) => (
    <div style={style}>{items[index]}</div>
  );

  return (
    <List height={400} width={'100%'} itemCount={items.length} itemSize={36}>
      {Row}
    </List>
  );
}

// app/products/page.tsx (Server Component)
import Filters from './Filters.client';

export default async function Page() {
  const products = await fetch('https://example.com/api/products', { cache: 'no-store' })
    .then((r) => r.json());

  return (
    <div>
      <h1>Products</h1>
      {/* 상호작용 영역만 client */}
      <Filters initialCount={products.length} />
      {/* 나머지는 서버 렌더 */}
      <ul>
        {products.slice(0, 50).map((p: any) => (
          <li key={p.id}>{p.name}</li>
        ))}
      </ul>
    </div>
  );
}

// app/products/Filters.client.tsx
'use client';
import { useState } from 'react';

export default function Filters({ initialCount }: { initialCount: number }) {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen((v) => !v)}>
        Filters ({initialCount})
      </button>
      {open && <div>...</div>}
    </div>
  );
}

import Script from 'next/script';

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}

        {/* 초기 상호작용 전에 필요 없다면 afterInteractive/idle로 */}
        <Script
          src="https://example.com/heavy-sdk.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}