vercel-labs/vercel-react-모범-사례

vercel-react-모범-사례은(는) 무엇을 하나요?

Vercel 엔지니어링 팀이 제공하는 React 및 Next.js 성능 최적화 가이드라인입니다. React 컴포넌트, Next.js 페이지, 데이터 페칭, 번들 최적화 또는 성능 개선과 관련된 작업을 작성, 검토, 리팩토링할 때 이 스킬을 사용하세요.

주요 원칙

• 메모이제이션: 불필요한 리렌더링을 방지하기 위해 React.memo, useMemo, useCallback을 적절히 사용합니다.
• 서버 컴포넌트: 가능한 경우 서버 컴포넌트를 사용하여 클라이언트 번들 크기를 줄입니다.
• 스트리밍: Next.js App Router의 loading.js와 Suspense 경계를 활용하여 스트리밍 및 점진적 렌더링을 구현합니다.
• 동적 가져오기: next/dynamic과 React.lazy를 사용하여 코드 분할을 적용하고 초기 로딩 시간을 최적화합니다.
• 효율적인 데이터 페칭: 데이터 캐싱, 재검증, 병렬 데이터 페칭을 통해 성능을 향상시킵니다.

코드 예시

올바른 메모이제이션 사용

import { memo, useMemo, useCallback } from 'react';

// 리렌더링 방지를 위해 컴포넌트를 메모이제이션
const ExpensiveComponent = memo(({ data, onAction }: { data: Item[]; onAction: (id: string) => void }) => {
  // 비용이 많이 드는 연산 결과를 메모이제이션
  const sortedData = useMemo(() => {
    return data.sort((a, b) => a.name.localeCompare(b.name));
  }, [data]);

  // 콜백 함수 메모이제이션
  const handleAction = useCallback((id: string) => {
    onAction(id);
  }, [onAction]);

  return (
    <ul>
      {sortedData.map(item => (
        <li key={item.id} onClick={() => handleAction(item.id)}>{item.name}</li>
      ))}
    </ul>
  );
});

서버 컴포넌트 활용

// app/page.tsx (서버 컴포넌트)
import { Suspense } from 'react';
import Loading from './loading';

async function getData() {
  const res = await fetch('https://api.example.com/data', { next: { revalidate: 60 } });
  return res.json();
}

// 클라이언트에 전송되는 JavaScript를 최소화하기 위해 서버에서 데이터 페칭
export default async function Page() {
  const data = await getData();

  return (
    <div>
      <h1>내 데이터</h1>
      <Suspense fallback={<Loading />}>
        <DataList data={data} />
      </Suspense>
    </div>
  );
}

동적 가져오기로 번들 크기 최적화

import dynamic from 'next/dynamic';

// 무거운 컴포넌트를 동적으로 가져와 초기 번들에서 제외
const HeavyChart = dynamic(() => import('../components/HeavyChart'), {
  loading: () => <p>차트 로딩 중...</p>,
  ssr: false, // 클라이언트 사이드에서만 렌더링
});

export default function Dashboard() {
  return (
    <div>
      <h1>대시보드</h1>
      <HeavyChart />
    </div>
  );
}

동기

이 스킬은 React 및 Next.js 애플리케이션에서 일반적인 성능 문제를 방지하고 Vercel 엔지니어링 모범 사례를 일관되게 적용하기 위해 설계되었습니다. 초점을 맞추는 영역:

• 클라이언트 자바스크립트 번들 크기를 최소화하여 초기 로딩 시간 단축
• 서버 리소스를 효율적으로 사용하여 응답 시간 향상
• 리렌더링 패턴을 최적화하여 애플리케이션의 응답성 유지

관련 리소스

• Next.js 공식 문서 - 성능 최적화
• React 공식 문서 - 메모이제이션 및 코드 분할
• Vercel 성능 모범 사례