SSR vs SSG: Choosing the Optimal Rendering Strategy dengan Claude Code

dasar SSR と SSG

Webaplikasi rendering方式 、performa dan pengguna体験 大きく影響.Claude Code 使えば、proyek 最適なrendering戦略 設計・implementasi bisa dilakukan.

特性	SSR	SSG
renderingタイミング	request時	build時
TTFB	やや遅い	非常 速い
データ 鮮度	常 最新	build時点
server負荷	高い	低い（CDNdistribusi）
向いてkonten	動的konten	静的konten

implementasi（Next.js） SSR

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

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

// SSR: requestご dan 実行
export default async function ProductPage({
  params,
}: ProductPageProps) {
  const product = await fetch(
    `https://api.example.com/products/${params.id}`,
    { cache: "no-store" } // SSR: cacheし tidak
  ).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>
  );
}

implementasi（Next.js） SSG

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

// SSG: build時 全halaman 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 dan SSR 良い dan ころ取り きるISR juga 選択肢.

// app/news/page.tsx
export const revalidate = 60; // 60秒ご dan 再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>
  );
}

SSG Astro

---
// 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つ proyek内 SSR・SSG・ISR 使い分けるpraktisなpola.

// halamanご dan 最適な戦略
const renderingStrategy = {
  // SSG: pembaruan頻度 低い
  "/about": "SSG",
  "/blog/*": "SSG",
  "/docs/*": "SSG",

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

  // SSR: リアルタイム性 diperlukan
  "/dashboard": "SSR",
  "/search": "SSR",
  "/cart": "SSR",
};

Perbandingan Performa

Claude Code performa 計測 dan optimasi 依頼 bisa dilakukan.

各halaman rendering方式 分析してoptimasiして。
- Lighthouseスコア SSR/SSG/ISR dengan 比較
- TTFB dan LCP peningkatan提案
- 静的化 dengan きるhalaman 特定して SSG 変更
- 動的halaman ISR tepatなrevalidate値 pengaturan

判断フローchart

rendering方式 選ぶ際 判断基準.コード分割 dan 組み合わせたoptimasi コード分割・遅延loading 、エッジ distribusi mengenai エッジコンピューティング juga bisa dijadikan referensi.

1. konten 静的か → SSG
2. 数分 遅延 許容 きるか → ISR
3. リアルタイム性 diperlukanか → SSR
4. pengguna固有 データか → SSR + clientフェッチ

詳細 Next.js renderingpanduan silakan lihat.Claude Code pemanfaatan法 公式dokumen konfirmasiし.

Summary

SSR・SSG・ISR どれかひ dan つ 決めるdiperlukan tidak 、halaman 特性 応じて使い分ける 最適.Claude Code proyek全体 分析させて、各halaman 最適なrendering方式 提案 juga らい.