Next.js에서 SEO 최적의 렌더링 전략

Next.js 14의 App Router 환경에서는 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR), 정적 생성(SSG), ISR 등 다양한 렌더링 방식을 상황에 맞게 조합할 수 있다. 특히 App Router는 서버 컴포넌트와 클라이언트 컴포넌트를 구분하고, 내장 fetch의 캐시 전략과 메타데이터 설정이 유연해지면서 SEO 대응 방식도 훨씬 정교해졌다.

 

그중 하나가 searchParams 기반 SSR이다. 기존의 다이나믹 라우트 방식과 달리, URL의 query string을 기반으로 서버에서 데이터를 받아 페이지를 렌더링하는 방식이다. 이 방식은 필터형 상품 페이지나 SKU 조합 페이지에서 매우 유용하다. 하지만 SEO 관점에서 보면 몇 가지 주의할 점이 있다.

 

---

렌더링 방식별 SEO 적절성 비교

렌더링 방식	HTML 내 콘텐츠 포함 여부	URL 구조	SEO 적합성
다이나믹 라우트 SSR /sku/[id]	O (SSR)	고유한 path	가장 우수
searchParams 기반 SSR /sku?plan=lte&color=black	O (SSR)	query string	우수하나 상대적으로 약함
CSR 클라이언트에서만 fetch	X	URL은 다양해도 HTML엔 없음	매우 낮음

---

 

searchParams 기반 SSR은 왜 다이나믹 라우트 SSR보다 SEO에 약할까?

1. 검색엔진의 인식 방식

검색엔진은 보통 URL path가 다른 페이지를 별개의 콘텐츠로 인식하고 인덱싱하지만,
query string 기반 URL은 같은 페이지의 파생된 버전으로 간주하는 경향이 있다.
예를 들어 /sku?color=black&plan=lte와 /sku?color=white&plan=lte는
검색엔진 입장에선 동일한 /sku의 일부로 판단될 수 있다.

 

2. 중복 콘텐츠 리스크

searchParams 조합이 많아질수록 검색엔진이 이를 중복 콘텐츠로 간주할 가능성도 커진다.
따라서 각 조합별 페이지가 독립적인 콘텐츠임을 명확하게 하기 위해 canonical 설정, 메타 태그 차별화가 필요하다.

 

3. sitemap 자동 생성의 한계

다이나믹 라우트는 generateStaticParams() 등을 활용해 sitemap을 자동으로 생성할 수 있다.
반면 searchParams는 조합이 너무 많기 때문에 URL을 수동으로 선정하거나 별도로 sitemap을 구성해야 한다.

---

 

그렇다면 searchParams 기반 SSR은 SEO에 부적합할까?

그렇지 않다. CSR에 비해서는 훨씬 SEO에 적합하다.

• 서버 컴포넌트에서 fetch()로 데이터를 받아 렌더링하면, HTML 응답에 실질적인 콘텐츠가 포함된다.
• generateMetadata()를 통해 query string 기반으로 동적인 메타태그(title, description 등)를 만들 수 있다.
• 초기 렌더링 시점에 콘텐츠가 완전하게 포함되므로 Googlebot 등은 렌더링 없이도 인덱싱이 가능하다.

즉, CSR보다는 SEO에 훨씬 유리하며, 다이나믹 라우트만큼의 정밀도는 아니지만 실용적 수준의 대응은 충분히 가능하다.

---

실제 적용 전략: 하이브리드 구조 + SEO 대응

searchParams 기반의 필터/조합 페이지에서 다음과 같은 전략이 유효하다.

 

1. SSR로 초기 진입 시 콘텐츠 포함

서버 컴포넌트에서 searchParams를 기반으로 fetch하고, 그 결과를 HTML에 포함한다.

export default async function Page({ searchParams }) {
  const data = await fetchSku(searchParams)
  return <SkuList data={data} />
}

 

 

2. 메타데이터는 searchParams 기반으로 동적 생성

export async function generateMetadata({ searchParams }) {
  const { plan, color } = searchParams
  return {
    title: `${plan} 요금제 - ${color} 색상 기기`,
    description: `${plan} 요금제와 ${color} 색상의 기기를 조합한 구성입니다.`,
  }
}

 

3. 주요 조합만 선택적으로 sitemap에 포함

SEO에서 주요 조합만 노출하면 된다면, sitemap 생성 시 조합 리스트를 별도로 관리하여 명시적으로 URL을 포함시키면 된다.

 

---

결론

• searchParams 기반 SSR은 SEO에 충분히 대응할 수 있는 방식이다.
• 다이나믹 라우트 SSR보다는 구조적으로 인덱싱에 불리할 수 있지만, CSR보다는 확연히 낫다.
• 중요한 것은 콘텐츠가 HTML에 렌더링되어 포함되어야 하고, generateMetadata, canonical, sitemap 등의 보완 요소를 함께 적용하는 것이다.
• 유저 인터랙션 중심의 페이지에서는 하이브리드 전략이 적절하며, SEO가 중요한 조합만 선택적으로 대응하는 것이 실용적인 방법이다.