React/Next.js 프론트 최적화로 INP 200ms 달성

// pages/_app.tsx (Next.js pages router)
import type { AppProps, NextWebVitalsMetric } from 'next/app'

export function reportWebVitals(metric: NextWebVitalsMetric) {
  // metric.name: 'INP' | 'LCP' | 'CLS' ...
  // metric.value: ms
  // metric.id: unique
  // metric.label: 'web-vital' | 'custom'

  if (metric.name === 'INP') {
    navigator.sendBeacon(
      '/api/vitals',
      JSON.stringify({
        name: metric.name,
        value: metric.value,
        id: metric.id,
        route: location.pathname,
        ua: navigator.userAgent,
      })
    )
  }
}

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

// workers/filterSort.worker.ts
self.onmessage = (e) => {
  const { items, query } = e.data

  // 무거운 작업(정렬/필터)
  const filtered = items
    .filter((x: any) => x.name.includes(query))
    .sort((a: any, b: any) => a.score - b.score)

  // 결과 반환
  ;(self as any).postMessage({ filtered })
}

// components/Search.tsx
import { useEffect, useMemo, useState, useTransition } from 'react'

export function Search({ items }: { items: any[] }) {
  const [query, setQuery] = useState('')
  const [result, setResult] = useState<any[]>([])
  const [isPending, startTransition] = useTransition()

  const worker = useMemo(() => {
    if (typeof window === 'undefined') return null
    return new Worker(new URL('../workers/filterSort.worker.ts', import.meta.url))
  }, [])

  useEffect(() => {
    if (!worker) return
    worker.onmessage = (e) => {
      // React 업데이트는 transition으로 낮은 우선순위 처리
      startTransition(() => setResult(e.data.filtered))
    }
    return () => worker.terminate()
  }, [worker, startTransition])

  const onChange = (v: string) => {
    setQuery(v)
    worker?.postMessage({ items, query: v })
  }

  return (
    <div>
      <input value={query} onChange={(e) => onChange(e.target.value)} />
      {isPending ? <p>Updating…</p> : null}
      <ul>
        {result.map((x) => (
          <li key={x.id}>{x.name}</li>
        ))}
      </ul>
    </div>
  )
}

import { useDeferredValue, useMemo, useState } from 'react'

export function SearchLite({ items }: { items: { id: string; name: string }[] }) {
  const [q, setQ] = useState('')
  const dq = useDeferredValue(q)

  const filtered = useMemo(() => {
    // dq 기준으로 필터 → 타이핑 자체는 덜 막힘
    return items.filter((x) => x.name.toLowerCase().includes(dq.toLowerCase()))
  }, [items, dq])

  return (
    <>
      <input value={q} onChange={(e) => setQ(e.target.value)} />
      <div>results: {filtered.length}</div>
    </>
  )
}

import React, { memo, useCallback, useMemo, useState } from 'react'

type Row = { id: string; name: string; score: number }

const ItemRow = memo(function ItemRow({ row, onSelect }: { row: Row; onSelect: (id: string) => void }) {
  return (
    <li>
      <button onClick={() => onSelect(row.id)}>{row.name} ({row.score})</button>
    </li>
  )
})

export function List({ rows }: { rows: Row[] }) {
  const [selectedId, setSelectedId] = useState<string | null>(null)

  const sorted = useMemo(() => {
    // rows가 바뀔 때만 정렬
    return [...rows].sort((a, b) => b.score - a.score)
  }, [rows])

  const onSelect = useCallback((id: string) => {
    setSelectedId(id)
  }, [])

  return (
    <div>
      <p>selected: {selectedId ?? 'none'}</p>
      <ul>
        {sorted.map((r) => (
          <ItemRow key={r.id} row={r} onSelect={onSelect} />
        ))}
      </ul>
    </div>
  )
}

import { FixedSizeList as VList, ListChildComponentProps } from 'react-window'

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

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

import dynamic from 'next/dynamic'

const HeavyChart = dynamic(() => import('./HeavyChart'), {
  ssr: false,
  loading: () => <p>Loading chart…</p>,
})

export function Dashboard() {
  return (
    <section>
      <h2>Dashboard</h2>
      <HeavyChart />
    </section>
  )
}

import Link from 'next/link'

<Link href="/heavy" prefetch={false}>Go heavy</Link>

import Script from 'next/script'

export function ThirdParty() {
  return (
    <>
      {/* 초기 렌더에 꼭 필요 없다면 afterInteractive / lazyOnload 고려 */}
      <Script
        src="https://example.com/sdk.js"
        strategy="lazyOnload"
        onLoad={() => {
          // 초기 상호작용 이후에 초기화
          ;(window as any).SDK?.init?.()
        }}
      />
    </>
  )
}