SSR vs SSG: Choosing the Optimal Rendering Strategy：Claude Code 实战指南

SSR と SSG の基本

Web应用の渲染方式は、性能と用户体験に大きく影響します。借助 Claude Code，项目に最適な渲染戦略を设计・实现可以。

特性	SSR	SSG
渲染タイミング	请求時	构建時
TTFB	やや遅い	非常に速い
数据の鮮度	常に最新	构建時点
服务器負荷	高い	低い（CDN配信）
向いている内容	動的内容	静的内容

SSR の实现（Next.js）

// app/products/[id]/page.tsx
import { notFound } from "next/navigation";

interface ProductPageProps {
  params: { id: string };
}

// SSR: 请求ごとに実行
export default async function ProductPage({
  params,
}: ProductPageProps) {
  const product = await fetch(
    `https://api.example.com/products/${params.id}`,
    { cache: "no-store" } // SSR: 缓存しない
  ).then((res) => res.json());

  if (!product) {
    notFound();
  }

  return (
    <div>
      <h1>{product.name}</h1>
      <p>価格: ${product.price.toLocaleString()}</p>
      <p>在庫: {product.stock}個</p>
      <p>最終更新: {new Date().toLocaleString("ja-JP")}</p>
    </div>
  );
}

SSG の实现（Next.js）

// app/blog/[slug]/page.tsx
import { getAllPosts, getPostBySlug } from "@/lib/posts";

// SSG: 构建時に全页面を生成
export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

export default async function BlogPost({
  params,
}: {
  params: { slug: string };
}) {
  const post = await getPostBySlug(params.slug);

  return (
    <article>
      <h1>{post.title}</h1>
      <time>{post.publishedAt}</time>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

ISR（Incremental Static Regeneration）

SSGとSSRの良いところ取りができるISRも选择肢です。

// app/news/page.tsx
export const revalidate = 60; // 60秒ごとに再生成

export default async function NewsPage() {
  const news = await fetch("https://api.example.com/news").then(
    (res) => res.json()
  );

  return (
    <div>
      <h1>最新ニュース</h1>
      {news.map((item: any) => (
        <article key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.summary}</p>
        </article>
      ))}
    </div>
  );
}

Astro での SSG

---
// src/pages/blog/[slug].astro
import { getCollection } from "astro:content";
import BlogLayout from "@/layouts/BlogLayout.astro";

export async function getStaticPaths() {
  const posts = await getCollection("blog");
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await post.render();
---

<BlogLayout title={post.data.title}>
  <article>
    <h1>{post.data.title}</h1>
    <Content />
  </article>
</BlogLayout>

ハイブリッド戦略

1つの项目内でSSR・SSG・ISRを使い分ける実践的なパターンです。

// 页面ごとの最適な戦略
const renderingStrategy = {
  // SSG: 更新頻度が低い
  "/about": "SSG",
  "/blog/*": "SSG",
  "/docs/*": "SSG",

  // ISR: 定期的に更新
  "/products/*": "ISR (60s)",
  "/categories/*": "ISR (300s)",

  // SSR: 实时性が必要
  "/dashboard": "SSR",
  "/search": "SSR",
  "/cart": "SSR",
};

性能比較

让 Claude Code性能の計測と优化を依頼可以。

各ページのレンダリング方式を分析して最適化して。
- LighthouseスコアをSSR/SSG/ISRで比較
- TTFBとLCPの改善提案
- 静的化できるページを特定して SSG に変更
- 動的ページにはISRの適切なrevalidate値を設定

判断フローチャート

渲染方式を選ぶ際の判断基準です。代码分割と組み合わせた优化は代码分割・懒加载を、边缘での配信相关内容请参阅边缘コンピューティング也请参阅。

内容は静的か → SSG
数分の遅延は許容できるか → ISR
实时性が必要か → SSR
用户固有の数据か → SSR + 客户端フェッチ

详细信息请参阅Next.jsの渲染指南。Claude Code的用法请参阅官方文档を确认吧。

总结

SSR・SSG・ISRはどれかひとつに決める必要はなく、页面の特性に応じて使い分けるのが最適です。让 Claude Code项目全体を分析させて、每个页面に最適な渲染方式を提案してもらいましょう。