Claude Code के साथ SSR vs SSG: Choosing the Optimal Rendering Strategy

SSR と SSG の基本

Webapplicationのレンダリング方式は、performanceとuser体験に大きく影響し है।Claude Code का उपयोग करके、Projectに最適なレンダリング戦略を設計・implementationでき है।

特性	SSR	SSG
レンダリングタイミング	request時	build時
TTFB	やや遅い	非常に速い
dataの鮮度	常に最新	build時点
server負荷	高い	低い（CDN配信）
向いているコンテンツ	動的コンテンツ	静的コンテンツ

SSR のimplementation（Next.js）

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

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

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

  if (!product) {
    notFound();
  }

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

SSG のimplementation（Next.js）

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

// SSG: build時に全page generate
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秒ごとに再generate

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>

ハイブリッド戦略

एकのProject内でSSR・SSG・ISR use करके分ける実践的なpattern है।

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

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

  // SSR: リアルタイム性がज़रूरी
  "/dashboard": "SSR",
  "/search": "SSR",
  "/cart": "SSR",
};

performance比較

Claude Codeにperformanceの計測とoptimizationを依頼でき है।

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

判断フローチャート

レンダリング方式を選ぶ際の判断基準 है।code分割 के साथ combineたoptimizationはcode分割・遅延読み込みを、エッジでの配信के बारे मेंはエッジコンピューティングもदेखें。

1. コンテンツは静的か → SSG
2. 数分の遅延は許容できるか → ISR
3. リアルタイム性がज़रूरीか → SSR
4. user固有のdataか → SSR + clientフェッチ

詳細はNext.jsのレンダリングガイドをदेखें。Claude Codeのutilization法はofficial documentation confirm करें।

Summary

SSR・SSG・ISRはどれかひとつに決めるज़रूरीはなく、pageの特性に応じて使い分けるのが最適 है।Claude CodeにProject全体を分析させて、各pageに最適なレンダリング方式を提案してもらいましょう。