Next.js 렌더링 성능 최적화: React 화면이 느릴 때 기준

학습 목표·선수 지식: 입력 상태를 필요한 하위 트리에 두고 렌더 비용을 비교합니다. 선수 지식: React props·state.

입력 반응과 초기 응답은 따로 측정합니다

SSR은 서버에서 HTML을 만드는 방식입니다. 서버 조회가 느리면 초기 응답도 느릴 수 있고, HTML이 빨리 도착해도 큰 클라이언트 렌더가 입력을 막을 수 있습니다. 화면이 느린 순간이 첫 방문인지 검색어 입력인지 먼저 구분합니다.

검색 상태를 사용하는 컴포넌트에 둡니다

아래는 기존 App Router 프로젝트의 app/page.tsx 전체 교체 예제입니다. 입력하면 대소문자를 무시한 목록과 건수가 바뀝니다. Summary는 SearchPanel의 형제이므로 검색 state 업데이트로 부모 Page가 다시 실행되지 않습니다. 항목이 세 개뿐이라 메모이제이션부터 추가하지 않습니다.

app/page.tsx · 전체 파일

"use client";
import { useState } from "react";
const items = ["App Router", "Server Component", "Suspense"];
function SearchPanel() {
  const [keyword, setKeyword] = useState("");
  const visible = items.filter((item) =>
    item.toLowerCase().includes(keyword.toLowerCase()),
  );
  return (
    <section>
      <label>
        검색{" "}
        <input
          value={keyword}
          onChange={(event) => setKeyword(event.target.value)}
        />
      </label>
      <ul>
        {visible.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <p>{visible.length}건</p>
    </section>
  );
}
function Summary() {
  return <aside>입력 상태와 무관한 안내</aside>;
}
export default function Page() {
  return (
    <main>
      <h1>렌더 범위 비교</h1>
      <SearchPanel />
      <Summary />
    </main>
  );
}

수정 전과 후를 같은 조작으로 비교합니다

비교 전에는 keyword를 Page에 두고 SearchPanel에 props로 전달해 보세요. React DevTools Profiler 기록을 시작하고 같은 문자열 router를 입력합니다. Summary가 어느 커밋에 렌더됐는지 기록한 뒤 state를 위 코드처럼 옮겨 다시 측정합니다. React Compiler 사용 여부, Strict Mode, 기기와 목록 크기를 고정하세요. 개발 측정과 production 응답 속도를 섞지 않습니다.

관찰	다음 수정	기대 변화
형제 컴포넌트가 입력마다 렌더	상태 소유 위치 축소	관련 없는 형제 렌더 감소
필터 계산 자체가 오래 걸림	측정 후 useMemo·알고리즘 비교	같은 의존성에서 계산 재사용
긴 목록 DOM 생성이 지배적	페이지네이션·가상화 검토	동시에 만드는 요소 감소
큰 초기 JS 다운로드	클라이언트 경계·지연 로딩 검토	초기 전송량 감소

메모이제이션은 어떤 값을 재사용할까요?

API	재사용 대상	한계
memo	같은 props의 컴포넌트 결과	자체 state·context 변경은 렌더될 수 있음
useMemo	의존성이 같은 계산 결과	검색어가 바뀌면 필터 계산도 다시 필요
useCallback	함수 참조	함수 호출 비용 자체를 없애지 않음