Next.js Render Analyzer

Next.js 프로젝트의 렌더링 전략(SSG/SSR/ISR/CSR)과 컴포넌트 타입(서버/클라이언트)을 분석하는 CLI 도구입니다.

왜 만들었나요?

Next.js App Router를 사용하면서 이런 고민을 해본 적 있으신가요?

• "이 컴포넌트가 서버에서 돌아가는 거야, 클라이언트에서 돌아가는 거야?"
• "use client를 어디에 붙여야 하지?"
• "우리 프로젝트에 클라이언트 컴포넌트가 너무 많은 건 아닐까?"
• "이 페이지는 SSG야 SSR이야? ISR은 제대로 설정된 거 맞아?"

Next.js 13+ App Router는 강력하지만, 프로젝트가 커지면 각 컴포넌트가 어디서 실행되는지 파악하기 어려워집니다.

해결하고자 하는 문제

1. 컴포넌트 타입 파악의 어려움

   • 파일을 하나하나 열어서 'use client'가 있는지 확인해야 함
   • 부모가 클라이언트 컴포넌트면 자식도 자동으로 클라이언트가 되는데, 이걸 추적하기 어려움

2. 렌더링 전략 혼란

   • revalidate 등 설정이 분산되어 있음
   • 실제로 어떤 전략으로 렌더링되는지 한눈에 보기 어려움

이 도구가 제공하는 것

• 프로젝트 전체 스캔: 모든 페이지와 컴포넌트를 자동으로 찾아서 분석
• 컴포넌트 타입 분류: 서버/클라이언트 컴포넌트 자동 분류
• 렌더링 전략 감지: SSG, SSR, ISR, CSR 자동 감지
• 분류 이유 설명: 왜 그렇게 분류되었는지 이유 제공
• 컴포넌트 트리 시각화: 의존성 관계를 트리로 표시

설치

npm install next-render-analyzer

로컬 개발용 설치

git clone https://github.com/khwww/render-analyzer.git
cd render-analyzer
npm install
npm run build
npm link

사용법

# 기본 분석
next-render-analyzer ./my-next-app
# 상세 정보 출력
next-render-analyzer ./my-next-app --detailed
# 컴포넌트 트리 출력
next-render-analyzer ./my-next-app --tree
# JSON 형식 출력
next-render-analyzer ./my-next-app --json

또는 빌드 없이 개발 모드로 실행:

npm run dev -- ./my-next-app

출력 예시

============================================================
Next.js Render Analyzer
============================================================
[ 페이지별 렌더링 방식 ]
------------------------------------------------------------
app/page.tsx
-> SSG (Static Site Generation)
app/blog/[slug]/page.tsx
-> ISR (Incremental Static Regeneration)
-> revalidate: 60초
[ 서버 컴포넌트 ]
------------------------------------------------------------
[S] Header
파일: components/Header.tsx
async 컴포넌트
[ 클라이언트 컴포넌트 ]
------------------------------------------------------------
[C] SearchBar
파일: components/SearchBar.tsx
Hooks: useState, useEffect
[ 통계 ]
------------------------------------------------------------
총 컴포넌트: 15개
서버 컴포넌트: 10개
클라이언트 컴포넌트: 5개

분석 항목

렌더링 전략

전략	설명	감지 방법
SSG	빌드 시 정적 생성	기본값, dynamic = 'force-static'
SSR	요청 시 서버 렌더링	cookies(), headers(), searchParams, fetch no-store, dynamic = 'force-dynamic'
ISR	주기적 재생성	revalidate export
CSR	클라이언트에서 렌더링	'use client' + Hooks

컴포넌트 타입

타입	설명	감지 방법
Server	서버에서만 실행	기본값 (use client 없음)
Client	브라우저에서 실행	'use client' 지시어

감지 기능

컴포넌트 분석

• 'use client' 지시어 감지
• React Hook 사용 감지 (useState, useEffect 등)
• async 컴포넌트 감지
• 이벤트 핸들러 감지 (onClick 등)

렌더링 전략 감지

• export const revalidate 감지 (ISR)
• export const dynamic 감지 (force-dynamic, force-static)
• cookies() 함수 사용 감지 (SSR)
• headers() 함수 사용 감지 (SSR)
• searchParams 파라미터 사용 감지 (SSR)
• fetch with cache: 'no-store' 감지 (SSR)

라이브러리로 사용하기

import{analyzeProject,analyzeFile,analyzePage}from"next-render-analyzer";// 프로젝트 전체 분석constresult=analyzeProject("./my-next-app");console.log(result.pages);// PageAnalysis[]console.log(result.components);// FileAnalysis[]// 단일 파일 분석constfile=analyzeFile("./components/Button.tsx");console.log(file.componentType);// "SERVER" | "CLIENT"// 페이지 분석constpage=analyzePage("./app/page.tsx");console.log(page.renderStrategy);// "SSG" | "SSR" | "ISR" | "CSR"

기술 스택

• AST 파싱: Babel Parser로 코드를 파싱하여 정확한 분석
• TypeScript: 타입 안정성 보장
• Jest: 유닛 테스트
• Dual Package: CommonJS와 ESM 모두 지원

개발

# 의존성 설치
npm install
# 개발 모드 실행
npm run dev
# 빌드
npm run build
# 테스트
npm test# 린트
npm run lint

라이선스

MIT