Next.js SEO SSR 적용법: 검색 노출과 렌더링 구조 잡기

학습 목표·선수 지식: App Router의 초기 HTML과 요청별 SSR을 구분합니다. 선수 지식: React·HTTP·라우팅.

SEO에 필요한 것은 읽을 수 있는 본문과 올바른 URL입니다

App Router의 Server Component는 서버에서 실행됩니다. 실행 시점은 빌드 때일 수도 요청 때일 수도 있으므로 Server Component를 요청별 SSR과 같은 뜻으로 쓰지 않습니다. 공개 글은 사전 렌더링해도 검색에 필요한 HTML을 제공할 수 있습니다. 로그인 여부에 따라 바뀌는 화면은 요청 시점 데이터가 필요합니다. SSR 자체가 검색 순위나 빠른 응답을 보장하지 않습니다.

App Router와 Pages Router를 먼저 구분합니다

목적	App Router	Pages Router
문서 제목	metadata / generateMetadata	next/head
공통 HTML 골격	app/layout.tsx	pages/_document.tsx
요청별 데이터	서버 page에서 요청 API·동적 읽기	getServerSideProps
사전 생성	정적 page·generateStaticParams	getStaticProps·getStaticPaths

app/guides/rendering/page.tsx · 전체 파일

import type { Metadata } from "next";
export const metadata: Metadata = {
  title: "렌더링 가이드",
  description: "초기 HTML과 요청별 SSR을 구분합니다.",
  alternates: { canonical: "https://example.com/guides/rendering" },
};
export default function Page() {
  return (
    <main>
      <h1>렌더링 가이드</h1>
      <p>이 본문은 서버가 만드는 HTML에 들어갑니다.</p>
    </main>
  );
}

본문을 서버에 두고 상호작용을 나눕니다

검색에 필요한 글 제목과 본문은 서버 page의 데이터로 그립니다. 좋아요 버튼은 별도 Client Component로 두고 필요한 문자열·숫자 props를 전달합니다. use client만으로 초기 HTML이 사라지는 것은 아닙니다. 반면 Effect 뒤에만 가져오는 본문은 초기 응답에 로딩 화면만 남을 수 있습니다.

렌더링 결과를 확인합니다

기존 App Router 프로젝트에 위 파일을 추가하고 npm run build, npm run start 후 /guides/rendering을 엽니다. example.com canonical은 운영 도메인으로 바꾸세요. HTTP 응답에 H1과 본문이 있는지 확인하고, 브라우저에서 상호작용 이후 DOM도 검사합니다. 동적 metadata는 스트리밍될 수 있으므로 응답 head 조각만으로 누락을 판정하지 않습니다.

터미널 명령 · 실행 명령

curl -sS -D response-headers.txt -o response.html http://localhost:3000/guides/rendering

갱신 정책을 SEO와 연결합니다

정적 생성은 재배포 또는 재검증 정책이 있어야 변경 글을 반영합니다. 클라이언트 TanStack Query 캐시와 Next.js 서버 캐시는 별개입니다. Redux Toolkit 같은 상태 도구를 도입하는 것은 SSR·SEO의 필수 조건이 아닙니다. canonical·사이트맵·내부 링크는 최종 공개 URL로 맞추고 색인 반영은 검색 도구에서 별도로 확인합니다.

관련 자료와 원문 연결 기록

아래에는 기존 URL 연결을 보존하기 위한 Tailwind·상태 관리·jQuery 자료도 포함합니다. 이 글의 SSR/SEO 실습에 필요한 설치나 우선 학습 경로를 뜻하지 않습니다. 먼저 Metadata API와 SEO 대표 가이드를 확인하세요.

• Next.js SEO 가이드
• 별도 설치 방식
• Next.js 공식 문서 – SEO
• Vercel – Speed Insights
• Tailwind CSS 공식 문서
• SWR 공식 문서
• TanStack Query 공식 문서
• Redux Toolkit 공식 문서
• Next.js App Router metadata 설정 기준
• Next.js SEO 현장 점검 체크리스트
• Next.js useSearchParams Suspense 오류 해결
• Next.js Image remotePatterns 오류 해결
• jQuery 4.0 변경 사항: IE 지원 종료와 Slim 빌드 기준

공식 기준과 확인 범위

확인일: 2026-09-12. API 설명은 Next.js 16 App Router 기준이며 과거 릴리스 글은 본문의 태그 범위를 유지합니다. 부분 API 코드는 기존 프로젝트에 통합하는 예시입니다.

• https://nextjs.org/docs/app/api-reference/functions/generate-metadata
• https://nextjs.org/docs/app/getting-started/server-and-client-components

공식 자료 재확인: 2026-09-12. 이 글의 실행하지 않은 브라우저/배포 점검은 독자 확인 과제로 구분합니다.