도장콕은 웹 배포만 진행하며 앱스토어 유입이 없다. 사용자의 주요 유입 경로는 검색엔진이므로 "전세 계약서 분석", "월세 계약 주의사항"과 같은 키워드 검색 시 서비스가 노출되어야 한다.
특히 도장콕의 핵심 기능은 매물 단위 정보 제공이기 때문에, /listing/[id] 형태의 매물 상세 페이지가 검색 결과에 직접 노출되는 구조가 필수적이다. 이를 위해서는 크롤러가 즉시 해석 가능한 HTML을 제공하는 서버 렌더링 기반 SEO 전략이 요구된다.
React 단독으로 SEO를 보완하는 방식은 존재하지만, 구조적인 한계가 있다.
| 방식 | 설명 | 한계 |
|---|---|---|
| react-helmet-async | JS 실행 후 메타태그 삽입 | 크롤러가 JS 실행에 의존 |
| 빌드 타임 프리렌더링 | 빌드 시 HTML 생성 | 매물 수 증가 시 빌드 비용 급증 |
| 런타임 프리렌더링 | 크롤러 요청 시 Headless 브라우저 렌더링 | 별도 인프라 필요, 응답 지연 |
| Dynamic Rendering | 유저 CSR / 크롤러 SSR 분기 | Google에서도 임시 해결책으로만 권장 |
도장콕의 매물 상세 페이지는 동적 URL을 가지며, 가격·상태·계약 조건 변경이 잦다. SEO 보완 방식은 데이터 최신성, 운영 복잡도, 안정성 측면에서 적합하지 않으며, 서버에서 HTML을 직접 생성하는 SSR 중심 구조가 더 적합하다.
React 19는 서버 컴포넌트와 renderToPipeableStream API를 통해 SSR을 지원한다. 그러나 이는 "렌더링 메커니즘" 제공에 가깝고, 실제 서비스에 필요한 다음 요소들은 직접 구현해야 한다.
| 항목 | React 직접 구현 | Next.js |
|---|---|---|
| 서버 환경 | Express 등 직접 구성 | 프레임워크 내장 |
| 라우팅 | 서버·클라이언트 동기화 필요 | App Router 내장 |
| 데이터 패칭 | 직접 hydration 설계 | 서버 컴포넌트에서 async/await |
| 렌더링 전략 | 직접 분기 처리 | SSR·SSG·ISR 자동 지원 |
| 메타데이터 | 직접 관리 | generateMetadata 제공 |
| 번들링 | Webpack/Vite 직접 설정 | Webpack/Turbopack 내장 |
| 이미지 최적화 | 별도 라이브러리 필요 | next/image 기본 제공 |
React로 SSR을 직접 구성하면 높은 자유도를 얻을 수 있으며, 마이크로 프론트엔드, 특수 인프라 연동, 극단적인 성능 최적화에는 적합하다.
그러나 도장콕은 다음 조건을 가지므로, SSR·라우팅·데이터 패칭·메타데이터 관리가 통합된 Next.js가 생산성과 안정성 측면에서 더 적합하다고 판단했다.
Next.js는 다양한 기능을 제공하지만, 이는 실행 비용 증가로 직결되지 않는다.