// Vite + React での SPA 構成
 
// main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';
 
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000,
      retry: 3,
    },
  },
});
 
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </QueryClientProvider>
  </StrictMode>,
);
 
// App.tsx - ルーティング
import { Routes, Route, Navigate } from 'react-router-dom';
import { lazy, Suspense } from 'react';
import { AuthProvider, RequireAuth } from './features/auth';
import { AppLayout } from './shared/layouts/AppLayout';
import { PageSkeleton } from './shared/components/PageSkeleton';
 
// コード分割: 各ページを遅延ロード
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Users = lazy(() => import('./pages/Users'));
const UserDetail = lazy(() => import('./pages/UserDetail'));
const Settings = lazy(() => import('./pages/Settings'));
const Login = lazy(() => import('./pages/Login'));
 
function App() {
  return (
    <AuthProvider>
      <Suspense fallback={<PageSkeleton />}>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route element={<RequireAuth><AppLayout /></RequireAuth>}>
            <Route path="/" element={<Navigate to="/dashboard" replace />} />
            <Route path="/dashboard" element={<Dashboard />} />
            <Route path="/users" element={<Users />} />
            <Route path="/users/:id" element={<UserDetail />} />
            <Route path="/settings" element={<Settings />} />
          </Route>
        </Routes>
      </Suspense>
    </AuthProvider>
  );
}

// SPA でのデータフェッチング（TanStack Query）
// pages/Users.tsx
import { useQuery } from '@tanstack/react-query';
import { useState } from 'react';
 
function Users() {
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState('');
 
  const { data, isLoading, error } = useQuery({
    queryKey: ['users', { page, search }],
    queryFn: () =>
      fetch(`/api/users?page=${page}&search=${search}`).then(r => r.json()),
    staleTime: 30 * 1000,
  });
 
  if (isLoading) return <UserListSkeleton />;
  if (error) return <ErrorDisplay error={error} />;
 
  return (
    <div>
      <h1>ユーザー一覧</h1>
      <SearchInput value={search} onChange={setSearch} />
      <UserTable users={data.users} />
      <Pagination
        currentPage={page}
        totalPages={data.totalPages}
        onPageChange={setPage}
      />
    </div>
  );
}

// react-helmet-async でのメタタグ管理
import { Helmet } from 'react-helmet-async';
 
function ProductPage({ product }: { product: Product }) {
  return (
    <>
      <Helmet>
        <title>{product.name} | MyStore</title>
        <meta name="description" content={product.description} />
        <meta property="og:title" content={product.name} />
        <meta property="og:description" content={product.description} />
        <meta property="og:image" content={product.imageUrl} />
        <meta property="og:type" content="product" />
        <link rel="canonical" href={`https://mystore.com/products/${product.slug}`} />
      </Helmet>
 
      <div>
        <h1>{product.name}</h1>
        {/* ... */}
      </div>
    </>
  );
}

<!-- htmx: MPAにSPAライクな動作を追加 -->
<!-- ページ全体のリロードなしで部分更新 -->
 
<!-- 基本的なhtmx使用例 -->
<div id="user-list">
  <!-- ユーザー検索: 入力のたびにサーバーにリクエスト -->
  <input
    type="search"
    name="search"
    hx-get="/api/users/search"
    hx-trigger="input changed delay:300ms"
    hx-target="#user-results"
    hx-indicator="#search-spinner"
    placeholder="ユーザーを検索..."
  >
  <span id="search-spinner" class="htmx-indicator">🔍</span>
 
  <div id="user-results">
    <!-- サーバーから返されるHTMLフラグメントで置換 -->
  </div>
</div>
 
<!-- 無限スクロール -->
<div id="posts">
  <article>Post 1</article>
  <article>Post 2</article>
  <!-- 最後の要素が表示されたら次のページを取得 -->
  <div hx-get="/api/posts?page=2"
       hx-trigger="revealed"
       hx-swap="afterend"
       hx-select="article">
    Loading...
  </div>
</div>
 
<!-- View Transitions API（MPA でもスムーズな遷移） -->
<style>
  /* ページ遷移のアニメーション */
  @view-transition {
    navigation: auto;
  }
 
  ::view-transition-old(root) {
    animation: 0.3s ease-out fade-out;
  }
 
  ::view-transition-new(root) {
    animation: 0.3s ease-in fade-in;
  }
 
  @keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }
 
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
</style>

// Express + htmx のサーバー実装
import express from 'express';
 
const app = express();
 
// ユーザー検索 API（HTMLフラグメントを返す）
app.get('/api/users/search', async (req, res) => {
  const { search } = req.query;
 
  const users = await prisma.user.findMany({
    where: {
      OR: [
        { name: { contains: search as string, mode: 'insensitive' } },
        { email: { contains: search as string, mode: 'insensitive' } },
      ],
    },
    take: 20,
  });
 
  // HTMLフラグメントを返す（JSON ではなく）
  const html = users.map(user => `
    <div class="user-card" id="user-${user.id}">
      <h3>${user.name}</h3>
      <p>${user.email}</p>
      <button
        hx-delete="/api/users/${user.id}"
        hx-target="#user-${user.id}"
        hx-swap="outerHTML"
        hx-confirm="本当に削除しますか？"
      >削除</button>
    </div>
  `).join('');
 
  res.send(html);
});

// Next.js App Router での SSR
 
// app/users/page.tsx
// デフォルトで Server Component = SSR
 
import { prisma } from '@/shared/lib/prisma';
import { UserList } from '@/features/users';
import { Metadata } from 'next';
 
// 動的メタデータ生成
export async function generateMetadata(): Promise<Metadata> {
  return {
    title: 'ユーザー一覧 | MyApp',
    description: '登録ユーザーの一覧を表示します',
    openGraph: {
      title: 'ユーザー一覧',
      description: '登録ユーザーの一覧',
      type: 'website',
    },
  };
}
 
// SSR: リクエストのたびにデータ取得 + HTML生成
export default async function UsersPage() {
  const users = await prisma.user.findMany({
    orderBy: { createdAt: 'desc' },
    take: 50,
    select: {
      id: true,
      name: true,
      email: true,
      avatar: true,
      createdAt: true,
    },
  });
 
  return (
    <main>
      <h1>ユーザー一覧</h1>
      <UserList users={users} />
    </main>
  );
}
 
// force-dynamic: キャッシュなし、常にSSR
export const dynamic = 'force-dynamic';

// Next.js Pages Router での SSR（getServerSideProps）
 
import { GetServerSideProps } from 'next';
 
interface Props {
  users: User[];
  totalCount: number;
}
 
export const getServerSideProps: GetServerSideProps<Props> = async (context) => {
  const { page = '1', search = '' } = context.query;
 
  const [users, totalCount] = await Promise.all([
    prisma.user.findMany({
      where: search
        ? { name: { contains: String(search), mode: 'insensitive' } }
        : {},
      orderBy: { createdAt: 'desc' },
      take: 20,
      skip: (Number(page) - 1) * 20,
    }),
    prisma.user.count({
      where: search
        ? { name: { contains: String(search), mode: 'insensitive' } }
        : {},
    }),
  ]);
 
  return {
    props: {
      users: JSON.parse(JSON.stringify(users)), // Date型のシリアライズ
      totalCount,
    },
  };
};
 
export default function UsersPage({ users, totalCount }: Props) {
  return (
    <div>
      <h1>ユーザー一覧 ({totalCount}件)</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

// Hydration Mismatch の回避
 
// 悪い例: サーバーとクライアントで異なる出力
function Greeting() {
  // ✗ サーバーとクライアントで異なる時刻
  const now = new Date();
  return <p>現在時刻: {now.toLocaleTimeString()}</p>;
}
 
// 良い例: クライアントでのみ実行
'use client';
import { useState, useEffect } from 'react';
 
function Greeting() {
  const [time, setTime] = useState<string>('');
 
  useEffect(() => {
    // クライアントでのみ時刻を設定
    setTime(new Date().toLocaleTimeString());
    const timer = setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);
    return () => clearInterval(timer);
  }, []);
 
  return <p>現在時刻: {time || '読み込み中...'}</p>;
}
 
// suppressHydrationWarning の使用（最終手段）
function ThemeProvider({ children }: { children: React.ReactNode }) {
  return (
    // サーバーとクライアントで異なるクラスが付く場合
    <html suppressHydrationWarning>
      <body>{children}</body>
    </html>
  );
}

// Next.js App Router での SSG
 
// app/blog/[slug]/page.tsx
 
import { notFound } from 'next/navigation';
import { getAllPosts, getPostBySlug } from '@/features/blog/api';
import { Metadata } from 'next';
 
// ビルド時に生成するパスを定義
export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({
    slug: post.slug,
  }));
}
 
// 動的メタデータ
export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const post = await getPostBySlug(params.slug);
  if (!post) return {};
 
  return {
    title: `${post.title} | Blog`,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: 'article',
      publishedTime: post.publishedAt,
      authors: [post.author.name],
      images: [{ url: post.ogImage }],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.ogImage],
    },
  };
}
 
// ページコンポーネント
export default async function BlogPost({
  params,
}: {
  params: { slug: string };
}) {
  const post = await getPostBySlug(params.slug);
 
  if (!post) {
    notFound();
  }
 
  return (
    <article>
      <header>
        <time dateTime={post.publishedAt}>
          {new Date(post.publishedAt).toLocaleDateString('ja-JP')}
        </time>
        <h1>{post.title}</h1>
        <p>{post.excerpt}</p>
      </header>
      <div
        className="prose prose-lg"
        dangerouslySetInnerHTML={{ __html: post.contentHtml }}
      />
    </article>
  );
}

---
// src/pages/blog/[slug].astro
import { getCollection, getEntry } from 'astro:content';
import BlogLayout from '../../layouts/BlogLayout.astro';
import TableOfContents from '../../components/TableOfContents.astro';
// React コンポーネントも使える（Islands Architecture）
import ShareButton from '../../components/ShareButton.tsx';
 
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, headings } = await post.render();
---
 
<BlogLayout title={post.data.title} description={post.data.description}>
  <article>
    <h1>{post.data.title}</h1>
    <time datetime={post.data.publishedAt.toISOString()}>
      {post.data.publishedAt.toLocaleDateString('ja-JP')}
    </time>
 
    <TableOfContents headings={headings} />
 
    <div class="prose">
      <Content />
    </div>
 
    <!-- Islands Architecture: このコンポーネントだけがインタラクティブ -->
    <ShareButton
      client:visible
      title={post.data.title}
      url={Astro.url.href}
    />
  </article>
</BlogLayout>

// Next.js App Router での ISR
 
// app/products/[id]/page.tsx
import { notFound } from 'next/navigation';
 
// ISR: 60秒ごとに再検証
export const revalidate = 60;
 
// ビルド時に生成するページ（人気商品のみ）
export async function generateStaticParams() {
  // 上位100商品のみビルド時に生成
  const topProducts = await prisma.product.findMany({
    orderBy: { salesCount: 'desc' },
    take: 100,
    select: { id: true },
  });
 
  return topProducts.map((p) => ({
    id: p.id,
  }));
  // ビルド時に生成されなかったページは、初回アクセス時に生成
}
 
export default async function ProductPage({
  params,
}: {
  params: { id: string };
}) {
  const product = await prisma.product.findUnique({
    where: { id: params.id },
    include: {
      category: true,
      reviews: {
        orderBy: { createdAt: 'desc' },
        take: 10,
      },
    },
  });
 
  if (!product) notFound();
 
  return (
    <div>
      <ProductHeader product={product} />
      <ProductGallery images={product.images} />
      <ProductInfo product={product} />
      <ReviewList reviews={product.reviews} />
    </div>
  );
}

// オンデマンド ISR（On-demand Revalidation）
 
// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache';
import { NextRequest, NextResponse } from 'next/server';
 
// Webhook で特定ページを即座に再生成
export async function POST(request: NextRequest) {
  const secret = request.headers.get('x-revalidation-secret');
 
  if (secret !== process.env.REVALIDATION_SECRET) {
    return NextResponse.json({ error: 'Invalid secret' }, { status: 401 });
  }
 
  const body = await request.json();
 
  // パスベースの再検証
  if (body.path) {
    revalidatePath(body.path);
    return NextResponse.json({ revalidated: true, path: body.path });
  }
 
  // タグベースの再検証
  if (body.tag) {
    revalidateTag(body.tag);
    return NextResponse.json({ revalidated: true, tag: body.tag });
  }
 
  return NextResponse.json({ error: 'Missing path or tag' }, { status: 400 });
}
 
// CMS の Webhook でオンデマンド再生成
// POST /api/revalidate
// Body: { "path": "/products/123" }
// or:   { "tag": "products" }
 
// タグベースのキャッシュ管理
// app/products/[id]/page.tsx
async function getProduct(id: string) {
  const res = await fetch(`${API_URL}/products/${id}`, {
    next: { tags: [`product-${id}`, 'products'] },
  });
  return res.json();
}
 
// product-123 タグを再検証 → /products/123 ページが再生成
// products タグを再検証 → 全商品ページが再生成

// Next.js App Router での Streaming SSR
 
// app/products/[id]/page.tsx
import { Suspense } from 'react';
import { ProductHeader } from '@/features/products';
import { ReviewsSkeleton, RecommendationsSkeleton } from '@/shared/components/skeletons';
 
export default async function ProductPage({
  params,
}: {
  params: { id: string };
}) {
  // 即座にレスポンスを開始（商品の基本情報は高速に取得可能）
  const product = await getProduct(params.id);
 
  return (
    <div>
      {/* 即座に表示される（First Chunk） */}
      <ProductHeader product={product} />
      <ProductGallery images={product.images} />
      <ProductPrice price={product.price} />
 
      {/* レビュー: 別のDBクエリが必要 → Suspense で遅延 */}
      <Suspense fallback={<ReviewsSkeleton />}>
        <ProductReviews productId={params.id} />
      </Suspense>
 
      {/* おすすめ: ML推論が必要 → Suspense で遅延 */}
      <Suspense fallback={<RecommendationsSkeleton />}>
        <Recommendations productId={params.id} />
      </Suspense>
 
      {/* 在庫情報: 外部API → Suspense で遅延 */}
      <Suspense fallback={<StockSkeleton />}>
        <StockInfo productId={params.id} />
      </Suspense>
    </div>
  );
}
 
// ProductReviews は async Server Component
async function ProductReviews({ productId }: { productId: string }) {
  // この取得に2秒かかっても、ページ全体はブロックされない
  const reviews = await prisma.review.findMany({
    where: { productId },
    orderBy: { createdAt: 'desc' },
    take: 20,
    include: { user: { select: { name: true, avatar: true } } },
  });
 
  return (
    <section>
      <h2>レビュー ({reviews.length}件)</h2>
      {reviews.map(review => (
        <ReviewCard key={review.id} review={review} />
      ))}
    </section>
  );
}

// loading.tsx による自動Streaming
 
// app/dashboard/loading.tsx
// → /dashboard へのナビゲーション時に自動表示
export default function DashboardLoading() {
  return (
    <div className="space-y-4">
      <div className="h-8 w-48 bg-gray-200 animate-pulse rounded" />
      <div className="grid grid-cols-3 gap-4">
        {[1, 2, 3].map(i => (
          <div key={i} className="h-32 bg-gray-200 animate-pulse rounded" />
        ))}
      </div>
      <div className="h-64 bg-gray-200 animate-pulse rounded" />
    </div>
  );
}
 
// app/dashboard/page.tsx
// loading.tsx があると自動的に Suspense 境界が設定される
export default async function DashboardPage() {
  const [stats, recentOrders, topProducts] = await Promise.all([
    getStats(),
    getRecentOrders(),
    getTopProducts(),
  ]);
 
  return (
    <div>
      <StatsCards stats={stats} />
      <RecentOrdersTable orders={recentOrders} />
      <TopProductsChart products={topProducts} />
    </div>
  );
}

// Server Component（デフォルト）
// features/users/components/UserList.tsx
 
import { prisma } from '@/shared/lib/prisma';
import { UserCard } from './UserCard';
import { UserSearchInput } from './UserSearchInput'; // Client Component
 
// async Server Component: 直接DBアクセス
export async function UserList({
  searchParams,
}: {
  searchParams: { q?: string; page?: string };
}) {
  const query = searchParams.q || '';
  const page = Number(searchParams.page || '1');
 
  // サーバーで直接データ取得（API不要）
  const [users, total] = await Promise.all([
    prisma.user.findMany({
      where: query
        ? { name: { contains: query, mode: 'insensitive' } }
        : {},
      orderBy: { createdAt: 'desc' },
      take: 20,
      skip: (page - 1) * 20,
      select: {
        id: true,
        name: true,
        email: true,
        avatar: true,
        role: true,
        createdAt: true,
      },
    }),
    prisma.user.count({
      where: query
        ? { name: { contains: query, mode: 'insensitive' } }
        : {},
    }),
  ]);
 
  return (
    <div>
      {/* Client Component: インタラクション必要 */}
      <UserSearchInput defaultValue={query} />
 
      {/* Server Component: 静的な表示 */}
      <p>{total}件のユーザー</p>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {users.map((user) => (
          <UserCard key={user.id} user={user} />
        ))}
      </div>
 
      <ServerPagination total={total} page={page} perPage={20} />
    </div>
  );
}
 
// Client Component
// features/users/components/UserSearchInput.tsx
'use client';
 
import { useRouter, useSearchParams } from 'next/navigation';
import { useTransition, useState } from 'react';
import { useDebouncedCallback } from 'use-debounce';
 
export function UserSearchInput({ defaultValue }: { defaultValue: string }) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [isPending, startTransition] = useTransition();
  const [value, setValue] = useState(defaultValue);
 
  const handleSearch = useDebouncedCallback((term: string) => {
    const params = new URLSearchParams(searchParams);
    if (term) {
      params.set('q', term);
    } else {
      params.delete('q');
    }
    params.set('page', '1');
 
    startTransition(() => {
      router.push(`/users?${params.toString()}`);
    });
  }, 300);
 
  return (
    <div className="relative">
      <input
        type="search"
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
          handleSearch(e.target.value);
        }}
        placeholder="ユーザーを検索..."
        className="w-full px-4 py-2 border rounded-lg"
      />
      {isPending && (
        <div className="absolute right-3 top-3">
          <Spinner size="sm" />
        </div>
      )}
    </div>
  );
}

// Server Component から Client Component へのデータの渡し方
 
// 1. Props として渡す（シリアライズ可能なデータのみ）
// Server Component
async function ProductPage({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);
 
  return (
    <div>
      <h1>{product.name}</h1>
      {/* シリアライズ可能な値のみ渡す */}
      <AddToCartButton
        productId={product.id}
        price={product.price}
        inStock={product.stock > 0}
      />
    </div>
  );
}
 
// 2. children パターン（Server Component を Client Component に渡す）
// Client Component
'use client';
function TabPanel({ children, tabs }: { children: React.ReactNode; tabs: string[] }) {
  const [activeTab, setActiveTab] = useState(0);
  return (
    <div>
      <div className="flex gap-2">
        {tabs.map((tab, i) => (
          <button key={tab} onClick={() => setActiveTab(i)}>{tab}</button>
        ))}
      </div>
      {children} {/* Server Component の子要素をそのまま表示 */}
    </div>
  );
}
 
// Server Component
async function ProductDetailPage() {
  return (
    <TabPanel tabs={['詳細', 'レビュー', '仕様']}>
      {/* これらは Server Component として実行される */}
      <ProductDetails />
      <ProductReviews />
      <ProductSpecs />
    </TabPanel>
  );
}
 
// 3. 渡せないもの
// ✗ 関数（onClick等）: シリアライズ不可
// ✗ Date オブジェクト: string/number に変換が必要
// ✗ Map, Set: 配列/オブジェクトに変換が必要
// ✗ クラスインスタンス: プレーンオブジェクトに変換が必要

---
// src/pages/index.astro
import Layout from '../layouts/Layout.astro';
import Hero from '../components/Hero.astro';
import Features from '../components/Features.astro';
// インタラクティブ島（React コンポーネント）
import ContactForm from '../components/ContactForm.tsx';
import TestimonialCarousel from '../components/TestimonialCarousel.tsx';
import PricingCalculator from '../components/PricingCalculator.tsx';
---
 
<Layout title="MyService">
  <!-- 静的HTML: JSなし -->
  <Hero />
 
  <!-- 静的HTML: JSなし -->
  <Features />
 
  <!-- Island: ビューポートに入った時にHydration -->
  <TestimonialCarousel client:visible />
 
  <!-- Island: ページロード時にHydration（重要なインタラクション） -->
  <PricingCalculator client:load />
 
  <!-- Island: アイドル時にHydration（優先度低） -->
  <ContactForm client:idle />
 
  <!-- Island: メディアクエリでHydration -->
  <MobileMenu client:media="(max-width: 768px)" />
</Layout>

// React 18 の Selective Hydration
// Suspense 境界ごとに独立してHydration
 
// ユーザーがクリックした領域を優先的にHydration
import { Suspense } from 'react';
 
function App() {
  return (
    <div>
      {/* この部分は先にHydration */}
      <Header />
      <Navigation />
 
      <main>
        {/* Hydration中にクリックされたら優先される */}
        <Suspense fallback={<ProductListSkeleton />}>
          <ProductList />
        </Suspense>
 
        <Suspense fallback={<SidebarSkeleton />}>
          <Sidebar />
        </Suspense>
      </main>
 
      {/* 最後にHydration */}
      <Suspense fallback={<FooterSkeleton />}>
        <Footer />
      </Suspense>
    </div>
  );
}
 
// 仕組み:
// 1. サーバーがストリームでHTMLを送信
// 2. 各 Suspense 境界は独立してHydration
// 3. ユーザーが ProductList をクリック
// 4. React は ProductList を優先的にHydration
// 5. クリックイベントはHydration完了後にリプレイ

// SSG: ビルド時に全ページを生成
export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map(post => ({ slug: post.slug }));
}
 
// ISR: 60秒ごとに再生成 + On-demand Revalidation
export const revalidate = 60;
 
export default async function Page({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}
 
// On-demand Revalidation（CMS Webhookから呼び出し）
// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';
 
export async function POST(request: Request) {
  const { path } = await request.json();
  revalidatePath(path);
  return Response.json({ revalidated: true });
}

// app/blog/[slug]/page.tsx (Next.js App Router)
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 getPost(params.slug);
  return <Article post={post} />;
}

// app/products/[id]/page.tsx
export const revalidate = 3600; // 1時間ごとに再生成
 
export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);
  return <ProductDetail product={product} />;
}