[Feat] 페이지 별 렌더링 전략 수정

[bae-suho]

CSR

브라우저 요청 → 빈 HTML 전송 → 브라우저에서 JS 실행 → API 호출 → UI 렌더

• 인터랙션, 실시간 업데이트, 인증 상태 접근이 필요한 페이지에 사용
• 단점: SEO 불리, 초기 로딩 느림 (JS 번들 다운로드 필요)

SSR

요청마다 서버에서 HTML 생성. Next.js App Router에서 기본 서버 컴포넌트.

• SEO 유리, 항상 최신 데이터, 초기 로딩 빠름 (JS 번들 다운로드 불필요)
• 단점: 서버 부하 증가, TTFB 증가 (브라우저 요청 → 서버 처리 시간 → 첫 바이트
  도착)

SSG

빌드 타임에 HTML 생성. 빌드 후 콘텐츠가 변경되지 않는 페이지에 사용.

• CDN 캐싱으로 초고속, 서버 부하 없음
• 단점: 데이터 변경 시 재빌드 필요

ISR

SSG + 주기적 재생성. revalidate 시간을 설정해 일정 주기마다 백그라운드에서
HTML을 재생성.

• SSG의 속도 + 주기적 데이터 갱신 가능
• 단점: 갱신 주기 동안 오래된 데이터가 노출될 수 있음

On-demand Revalidation

데이터 변경 이벤트 발생 시 즉시 캐시 무효화. revalidateTag, revalidatePath
사용.

• ISR과 달리 원하는 시점에 정확하게 업데이트 가능
• 단점: Server Action 또는 API Route 구현 필요

페이지별 렌더링 전략

/signin → SSG
SEO 불필요, 콘텐츠 변경 없음. 카카오 버튼은 단순 URL 이동이라 정적으로 처리
가능.

/terms, /privacy → SSG
완전 정적 콘텐츠. 변경 시 재배포로 충분.

/property (매물 목록) → CSR
검색/필터 파라미터 기반 실시간 조회, 무한스크롤, 낙관적 북마크 업데이트 등
클라이언트 전용 기능이 많아 CSR 유지. 단, 기본 목록(파라미터 없음)의 초기
데이터는 서버 컴포넌트에서 fetch해 SSR처럼 빠른 첫 렌더 가능.

/property/[id] (매물 상세) → SSG(dynamicParams) + On-demand Revalidation
공개 콘텐츠이므로 첫 요청 시 서버에서 렌더링 후 캐싱. 매물 수정/삭제/상태 변경
시 revalidateTag로 즉시 캐시 무효화.

그 외 인증 필요 페이지 (/home-notes, /storage, /mypage, /loading-analysis 등)
→ CSR
개인 데이터 또는 SSE 실시간 연결 필요. 서버 캐싱 불가.