SEO와 렌더링 전략 (SSR/SSG/ISR/Cache Components 관점)

src/
├── pages/
│   ├── index.jsx                // 마케팅 랜딩
│   └── dashboard.jsx            // 사용자 대시보드
├── components/
│   ├── LandingHero.jsx
│   └── DashboardContent.jsx
├── App.jsx
└── main.jsx

// src/pages/index.jsx
import { useEffect } from "react";
import { Helmet } from "react-helmet"; // 별도 라이브러리 필요
 
export function LandingPage() {
  useEffect(() => {
    // 클라이언트에서 메타 태그 동적 설정
    document.title = "우리 서비스 - 혁신적인 솔루션";
  }, []);
 
  return (
    <>
      <Helmet>
        <title>우리 서비스 - 혁신적인 솔루션</title>
        <meta name="description" content="최신 기술로 비즈니스를 혁신하세요" />
        <meta property="og:image" content="/hero-image.jpg" /> // OG(Open Graph: 오픈 그래프) 이미지
      </Helmet>
 
      <div>
        <h1>혁신적인 솔루션</h1>
        <p>최신 기술로 비즈니스를 혁신하세요</p>
        <img src="/hero-image.jpg" alt="히어로 이미지" />
      </div>
    </>
  );
}

// src/pages/dashboard.jsx
import { useState, useEffect } from "react";
 
export function DashboardPage() {
  const [userData, setUserData] = useState(null);
 
  useEffect(() => {
    // 클라이언트에서 API 호출
    fetch("/api/user-data")
      .then((res) => res.json())
      .then(setUserData);
  }, []);
 
  if (!userData) return <div>로딩 중...</div>;
 
  return (
    <div>
      <h1>{userData.name}님의 대시보드</h1>
      <div>통계: {userData.stats}</div>
    </div>
  );
}

app/
├── marketing/
│   └── page.tsx               // SSG: 마케팅 랜딩
├── blog/
│   ├── page.tsx               // ISR: 블로그 목록
│   └── [slug]/
│       └── page.tsx           // ISR: 블로그 상세
├── dashboard/
│   ├── page.tsx               // SSR: 사용자 대시보드
│   └── layout.tsx             // 보호 레이아웃
├── products/
│   └── page.tsx               // Cache Components: 상품 목록
├── globals.css
└── layout.tsx

// app/marketing/page.tsx
import { Metadata } from "next";
 
// 정적 메타데이터 - 빌드 시점에 결정됨
export const metadata: Metadata = {
  title: "우리 서비스 - 혁신적인 솔루션",
  description: "최신 기술로 비즈니스를 혁신하세요",
  openGraph: {
    images: ["/hero-image.jpg"],
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
  },
};
 
export default function MarketingPage() {
  return (
    <div>
      <h1>혁신적인 솔루션</h1>
      <p>최신 기술로 비즈니스를 혁신하세요</p>
      <img src="/hero-image.jpg" alt="히어로 이미지" />
    </div>
  );
}

// app/blog/page.tsx
import { Metadata } from "next";
 
// 1시간마다 재생성
export const revalidate = 3600;
 
export const metadata: Metadata = {
  title: "블로그 | 우리 서비스",
  description: "최신 기술 트렌드와 인사이트를 공유합니다",
};
 
async function getPosts() {
  const res = await fetch("https://api.example.com/posts");
  return res.json();
}
 
export default async function BlogPage() {
  const posts = await getPosts();
 
  return (
    <div>
      <h1>블로그</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

// app/blog/[slug]/page.tsx
import { Metadata } from "next";
 
export const revalidate = 3600; // 1시간마다 재생성
 
// 동적 메타데이터 생성
export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const post = await getPost(params.slug);
 
  return {
    title: `${post.title} | 블로그`,
    description: post.excerpt,
    openGraph: {
      images: [post.image],
    },
  };
}
 
export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
 
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

// app/dashboard/page.tsx
import { Metadata } from "next";
import { getCurrentUser } from "../lib/auth";
 
// 요청별 동적 메타데이터
export async function generateMetadata(): Promise<Metadata> {
  const user = await getCurrentUser();
 
  return {
    title: `${user?.name || "사용자"}의 대시보드 | 우리 서비스`,
    description: "개인화된 대시보드에서 비즈니스 현황을 확인하세요",
  };
}
 
export default async function DashboardPage() {
  const user = await getCurrentUser();
 
  if (!user) {
    redirect("/login");
  }
 
  // 서버에서 실시간 데이터 조회
  const userData = await db.user.findUnique({
    where: { id: user.id },
    select: { name: true, stats: true },
  });
 
  return (
    <div>
      <h1>{userData.name}님의 대시보드</h1>
      <div>통계: {userData.stats}</div>
    </div>
  );
}

// app/products/page.tsx
import { Suspense } from "react";
import { cacheLife } from "next/cache";
 
export const metadata: Metadata = {
  title: "제품 목록 | 우리 서비스",
  description: "다양한 제품을 만나보세요",
};
 
// 정적 부분: 제품 목록 (자주 변경되지 않음)
async function ProductList() {
  "use cache";
  cacheLife("hours"); // 1시간 캐시
 
  const products = await db.product.findMany({
    select: { id: true, name: true, price: true },
  });
 
  return (
    <div>
      {products.map((product) => (
        <div key={product.id}>
          <h3>{product.name}</h3>
          <p>가격: {product.price}원</p>
        </div>
      ))}
    </div>
  );
}
 
// 동적 부분: 사용자별 추천 상품
async function RecommendedProducts() {
  const user = await getCurrentUser();
  const recommendations = await getRecommendations(user?.id);
 
  return (
    <div>
      <h3>추천 상품</h3>
      {recommendations.map((product) => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  );
}
 
export default function ProductsPage() {
  return (
    <div>
      <h1>제품 목록</h1>
 
      {/* 정적 부분 - 캐시됨 */}
      <ProductList />
 
      {/* 동적 부분 - Suspense로 처리 */}
      <Suspense fallback={<div>로딩 중...</div>}>
        <RecommendedProducts />
      </Suspense>
    </div>
  );
}