{"id":9842,"date":"2026-06-16T16:13:45","date_gmt":"2026-06-16T07:13:45","guid":{"rendered":"https:\/\/fastcoding.jp\/blog\/?p=9842"},"modified":"2026-06-16T16:13:52","modified_gmt":"2026-06-16T07:13:52","slug":"nextjs-rsc-data-fetching","status":"publish","type":"post","link":"https:\/\/fastcoding.jp\/blog\/all\/frontend\/nextjs-rsc-data-fetching\/","title":{"rendered":"AI\u99c6\u52d5\u958b\u767a\u3067React Server Components\u306e\u30c7\u30fc\u30bf\u53d6\u5f97\u30d1\u30bf\u30fc\u30f3\u3092\u8a2d\u8a08\u3059\u308b"},"content":{"rendered":"
\n

\u3053\u3093\u306b\u3061\u306f\u3001\u682a\u5f0f\u4f1a\u793e\u30d5\u30a1\u30b9\u30c8\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u306e\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u30a8\u30f3\u30b8\u30cb\u30a2\u3001\u72ec\u8eab\u8cb4\u65cfFire\u3067\u3059\u3002<\/p>\n\n\n\n

\u5148\u9031\u672b\u3001\u30ed\u30c3\u30af\u30d5\u30a7\u30b9\u306e\u30c1\u30b1\u30c3\u30c8\u30922\u679a\u53d6\u3063\u305f\u3093\u3067\u3059\u3002\u53cb\u4eba\u3068\u884c\u304f\u4e88\u5b9a\u3060\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u53cb\u4eba\u304c\u300c\u5f53\u65e5\u306e\u5929\u6c17\u3092\u898b\u3066\u304b\u3089\u6c7a\u3081\u305f\u3044\u300d\u3068\u3002\u305d\u308c\u306a\u3089\u5148\u306b\u4f1a\u5834\u306e\u30a2\u30af\u30bb\u30b9\u3060\u3051\u8abf\u3079\u3066\u304a\u3044\u3066\u3001\u5929\u6c17\u4e88\u5831\u306f\u5f53\u65e5\u671d\u306b\u78ba\u8a8d\u3057\u3088\u3046\u3001\u3068\u6bb5\u53d6\u308a\u3092\u5206\u3051\u307e\u3057\u305f\u3002<\/p>\n\n\n\n

\u30c7\u30fc\u30bf\u53d6\u5f97\u3082\u540c\u3058\u3067\u3059\u3002\u5168\u90e8\u4e00\u5ea6\u306b\u53d6\u308b\u5fc5\u8981\u306f\u306a\u3044\u3002\u5148\u306b\u53d6\u308c\u308b\u3082\u306e\u3068\u5f8c\u3067\u53d6\u308c\u3070\u3044\u3044\u3082\u306e\u3092\u5206\u3051\u308b\u306e\u304c\u8a2d\u8a08\u306e\u57fa\u672c\u3067\u3059\u3002<\/small><\/p>\n\n\n\n

AI\u99c6\u52d5\u958b\u767a\u3067Next.js App Router\u306eReact Server Components\uff08RSC\uff09\u306b\u304a\u3051\u308b\u30c7\u30fc\u30bf\u53d6\u5f97\u30d1\u30bf\u30fc\u30f3\u3092\u8a2d\u8a08\u3057\u307e\u3057\u305f\u3002AI\u306f\u57fa\u672c\u7684\u306afetch\u30d1\u30bf\u30fc\u30f3\u3092\u63d0\u6848\u3057\u307e\u3059\u304c\u3001\u300c\u4f55\u3092\u4e26\u5217\u3067\u53d6\u5f97\u3057\u3066\u4f55\u3092\u76f4\u5217\u306b\u3059\u308b\u304b\u300d\u300cServer Component\u3068Client Component\u306e\u3069\u3061\u3089\u3067\u30c7\u30fc\u30bf\u3092\u6301\u3064\u304b\u300d\u306e\u5224\u65ad\u306b\u306f\u3001\u753b\u9762\u306e\u8981\u4ef6\u306b\u5bfe\u3059\u308b\u7406\u89e3\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n\n\n\n

Server Components\u3067\u306e\u30c7\u30fc\u30bf\u53d6\u5f97\u306e\u57fa\u672c<\/h2>\n\n\n\n

Next.js App Router\u306eServer Components\u3067\u306f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u3067\u76f4\u63a5async\/await<\/code>\u3092\u4f7f\u3063\u3066\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3067\u304d\u307e\u3059\u3002API\u30eb\u30fc\u30c8\u7d4c\u7531\u3067\u306f\u306a\u304f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u81ea\u4f53\u304c\u975e\u540c\u671f\u95a2\u6570\u306b\u306a\u308b\u306e\u304c\u7279\u5fb4\u3067\u3059\u3002<\/p>\n\n\n\n

async function getUser(id: string) {\n  const res = await fetch(`https:\/\/api.example.com\/users\/${id}`, {\n    next: { revalidate: 3600 },\n  });\n  if (!res.ok) throw new Error('Failed to fetch user');\n  return res.json();\n}\n\nexport default async function UserPage({\n  params,\n}: {\n  params: Promise<{ id: string }>;\n}) {\n  const { id } = await params;\n  const user = await getUser(id);\n  return <div>{user.name}<\/div>;\n}<\/code><\/pre>\n\n\n\n
next: { revalidate: 3600 }<\/code>\u306fISR\uff08Incremental Static Regeneration\uff09\u306e\u8a2d\u5b9a\u3067\u3059\u30021\u6642\u9593\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u3066\u3001\u6b21\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u3067\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u3067\u518d\u691c\u8a3c\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
AI\u306b\u8a2d\u8a08\u3092\u4f9d\u983c\u3059\u308b\uff1a\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u753b\u9762<\/h2>\n\n\n\n
\u7ba1\u7406\u753b\u9762\u306e\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u3092\u4f8b\u306b\u3001AI\u306b\u30c7\u30fc\u30bf\u53d6\u5f97\u30d1\u30bf\u30fc\u30f3\u306e\u8a2d\u8a08\u3092\u4f9d\u983c\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
\n\n\n\n
\u30bb\u30af\u30b7\u30e7\u30f3<\/th>\u30c7\u30fc\u30bf<\/th>\u66f4\u65b0\u983b\u5ea6<\/th><\/tr>\n<\/thead>\n
\u30d8\u30c3\u30c0\u30fc<\/td>\u30ed\u30b0\u30a4\u30f3\u30e6\u30fc\u30b6\u30fc\u60c5\u5831<\/td>\u307b\u307c\u5909\u308f\u3089\u306a\u3044<\/td><\/tr>\n
KPI\u30ab\u30fc\u30c9<\/td>\u58f2\u4e0a\u30fb\u6ce8\u6587\u6570\u30fb\u30e6\u30fc\u30b6\u30fc\u6570<\/td>1\u6642\u9593\u304a\u304d<\/td><\/tr>\n
\u6700\u8fd1\u306e\u6ce8\u6587<\/td>\u76f4\u8fd110\u4ef6\u306e\u6ce8\u6587\u4e00\u89a7<\/td>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u8fd1\u3044<\/td><\/tr>\n
\u304a\u77e5\u3089\u305b<\/td>\u904b\u55b6\u304b\u3089\u306e\u304a\u77e5\u3089\u305b<\/td>1\u65e51\u56de<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n\n\n\n
AI\u306e\u63d0\u6848\uff1a\u5168\u90e8\u76f4\u5217\u3067\u53d6\u5f97<\/h2>\n\n\n\n
AI\u306e\u6700\u521d\u306e\u63d0\u6848\u306f4\u3064\u306eAPI\u547c\u3073\u51fa\u3057\u304c\u76f4\u5217\u3067\u5b9f\u884c\u3055\u308c\u308b\u30b3\u30fc\u30c9\u3067\u3057\u305f\u3002\u5404API\u304c200ms\u304b\u304b\u308b\u3068\u3059\u308b\u3068\u5408\u8a08800ms\u3002\u30e6\u30fc\u30b6\u30fc\u306f800ms\u5f85\u305f\u306a\u3044\u3068\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
\u4fee\u6b631\uff1a\u4e26\u5217\u53d6\u5f97\u306b\u5909\u66f4<\/h2>\n\n\n\n
\u72ec\u7acb\u3057\u305f\u30c7\u30fc\u30bf\u30bd\u30fc\u30b9\u306fPromise.all<\/code>\u3067\u4e26\u5217\u53d6\u5f97\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
export default async function DashboardPage() {\n  const [user, kpi, orders, notices] = await Promise.all([\n    getUser(),\n    getKPI(),\n    getRecentOrders(),\n    getNotices(),\n  ]);\n\n  return (\n    <div>\n      <Header user={user} \/>\n      <KPICards kpi={kpi} \/>\n      <RecentOrders orders={orders} \/>\n      <Notices notices={notices} \/>\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
4\u3064\u306eAPI\u304c\u4e26\u5217\u3067\u5b9f\u884c\u3055\u308c\u308b\u305f\u3081\u3001\u5408\u8a08\u306e\u5f85\u3061\u6642\u9593\u306f\u6700\u3082\u9045\u3044API\u306e\u6642\u9593\uff08200ms\uff09\u306b\u306a\u308a\u307e\u3059\u3002800ms\u304b\u3089200ms\u3078\u300175%\u306e\u6539\u5584\u3067\u3059\u3002<\/p>\n\n\n\n
\u305f\u3060\u3057\u3001Promise.all<\/code>\u306f1\u3064\u3067\u3082\u5931\u6557\u3059\u308b\u3068\u5168\u4f53\u304c\u5931\u6557\u3057\u307e\u3059\u30024\u3064\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u3046\u30611\u3064\u3060\u3051API\u30a8\u30e9\u30fc\u304c\u8d77\u304d\u305f\u5834\u5408\u3001\u753b\u9762\u5168\u4f53\u304c\u8868\u793a\u3055\u308c\u306a\u304f\u306a\u308b\u554f\u984c\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\u4fee\u6b632\uff1aSuspense\u3068\u30b9\u30c8\u30ea\u30fc\u30df\u30f3\u30b0SSR<\/h2>\n\n\n\n
Next.js App Router\u3067\u306f\u3001Suspense\u3092\u4f7f\u3063\u3066\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5358\u4f4d\u3067\u6bb5\u968e\u7684\u306b\u8868\u793a\u3067\u304d\u307e\u3059\u3002\u5404\u30bb\u30af\u30b7\u30e7\u30f3\u3092\u72ec\u7acb\u3057\u305fServer Component\u306b\u3057\u3066\u3001Suspense\u3067\u56f2\u307f\u307e\u3059\u3002<\/p>\n\n\n\n
\/\/ app\/dashboard\/page.tsx \u2014 Suspense + \u30b9\u30c8\u30ea\u30fc\u30df\u30f3\u30b0\nimport { Suspense } from 'react';\n\nexport default async function DashboardPage() {\n  return (\n    <div className=\"p-6 space-y-6\">\n      <Suspense fallback={<HeaderSkeleton \/>}>\n        <HeaderSection \/>\n      <\/Suspense>\n      <Suspense fallback={<KPISkeleton \/>}>\n        <KPISection \/>\n      <\/Suspense>\n      <Suspense fallback={<OrdersSkeleton \/>}>\n        <RecentOrdersSection \/>\n      <\/Suspense>\n      <Suspense fallback={<NoticesSkeleton \/>}>\n        <NoticesSection \/>\n      <\/Suspense>\n    <\/div>\n  );\n}\n\nasync function HeaderSection() {\n  const user = await getUser();\n  return <Header user={user} \/>;\n}\n\nasync function KPISection() {\n  const kpi = await getKPI();\n  return <KPICards kpi={kpi} \/>;\n}\n\nasync function RecentOrdersSection() {\n  const orders = await getRecentOrders();\n  return <RecentOrders orders={orders} \/>;\n}\n\nasync function NoticesSection() {\n  const notices = await getNotices();\n  return <Notices notices={notices} \/>;\n}<\/code><\/pre>\n\n\n\n
\u3053\u306e\u30d1\u30bf\u30fc\u30f3\u306e\u30e1\u30ea\u30c3\u30c8\u306f3\u3064\u3067\u3059\u3002<\/p>\n\n\n\n
    \n
  1. \u6bb5\u968e\u7684\u306a\u8868\u793a<\/strong>\u3002\u30c7\u30fc\u30bf\u304c\u8fd4\u3063\u3066\u304d\u305f\u30bb\u30af\u30b7\u30e7\u30f3\u304b\u3089\u9806\u306b\u8868\u793a\u3055\u308c\u308b\u3002\u30e6\u30fc\u30b6\u30fc\u306f\u30b9\u30b1\u30eb\u30c8\u30f3UI\u3092\u898b\u306a\u304c\u3089\u5f85\u3066\u308b<\/li>\n
  2. \u30a8\u30e9\u30fc\u306e\u5c40\u6240\u5316<\/strong>\u30021\u3064\u306eAPI\u304c\u5931\u6557\u3057\u3066\u3082\u3001\u4ed6\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306f\u8868\u793a\u3055\u308c\u308b\u3002\u5404Suspense\u306e\u4e2d\u306berror.tsx\u3092\u914d\u7f6e\u3059\u308c\u3070\u3001\u30bb\u30af\u30b7\u30e7\u30f3\u5358\u4f4d\u3067\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u3067\u304d\u308b<\/li>\n
  3. \u4e26\u5217\u5b9f\u884c<\/strong>\u3002\u72ec\u7acb\u3057\u305fSuspense\u30d0\u30a6\u30f3\u30c0\u30ea\u3067\u56f2\u307e\u308c\u305f\u5404\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c7\u30fc\u30bf\u53d6\u5f97\u306f\u3001\u4e92\u3044\u306b\u30d6\u30ed\u30c3\u30af\u305b\u305a\u4e26\u5217\u306b\u5b9f\u884c\u3055\u308c\u308b<\/li>\n<\/ol>\n\n\n\n
    \u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565\u306e\u8a2d\u8a08<\/h2>\n\n\n\n
    AI\u306e\u63d0\u6848\u306b\u306f\u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565\u304c\u542b\u307e\u308c\u3066\u3044\u307e\u305b\u3093\u3067\u3057\u305f\u3002\u30c7\u30fc\u30bf\u306e\u66f4\u65b0\u983b\u5ea6\u306b\u5fdc\u3058\u3066\u30ad\u30e3\u30c3\u30b7\u30e5\u6642\u9593\u3092\u5909\u3048\u308b\u3079\u304d\u3067\u3059\u3002<\/p>\n\n\n\n
    \/\/ \u30c7\u30fc\u30bf\u306e\u66f4\u65b0\u983b\u5ea6\u306b\u5fdc\u3058\u305f\u30ad\u30e3\u30c3\u30b7\u30e5\u8a2d\u5b9a\nasync function getUser() {\n  const res = await fetch('https:\/\/api.example.com\/user', {\n    next: { revalidate: 3600 },  \/\/ 1\u6642\u9593\u30ad\u30e3\u30c3\u30b7\u30e5\n  });\n  if (!res.ok) throw new Error('Failed to fetch user');\n  return res.json();\n}\n\nasync function getKPI() {\n  const res = await fetch('https:\/\/api.example.com\/kpi', {\n    next: { revalidate: 3600 },  \/\/ 1\u6642\u9593\u30ad\u30e3\u30c3\u30b7\u30e5\n  });\n  if (!res.ok) throw new Error('Failed to fetch KPI');\n  return res.json();\n}\n\nasync function getRecentOrders() {\n  const res = await fetch('https:\/\/api.example.com\/orders\/recent', {\n    cache: 'no-store',  \/\/ \u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u306a\u3044\uff08\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\uff09\n  });\n  if (!res.ok) throw new Error('Failed to fetch orders');\n  return res.json();\n}\n\nasync function getNotices() {\n  const res = await fetch('https:\/\/api.example.com\/notices', {\n    next: { revalidate: 86400 },  \/\/ 24\u6642\u9593\u30ad\u30e3\u30c3\u30b7\u30e5\n  });\n  if (!res.ok) throw new Error('Failed to fetch notices');\n  return res.json();\n}<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    \u30c7\u30fc\u30bf<\/th>\u30ad\u30e3\u30c3\u30b7\u30e5\u8a2d\u5b9a<\/th>\u7406\u7531<\/th><\/tr>\n<\/thead>\n
    \u30e6\u30fc\u30b6\u30fc\u60c5\u5831<\/td>revalidate: 3600<\/td>\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u5909\u66f4\u306f\u5c11\u306a\u3044<\/td><\/tr>\n
    KPI<\/td>revalidate: 3600<\/td>1\u6642\u9593\u3054\u3068\u306e\u96c6\u8a08\u3067\u5341\u5206<\/td><\/tr>\n
    \u6700\u8fd1\u306e\u6ce8\u6587<\/td>cache: ‘no-store’<\/td>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u8fd1\u3044\u60c5\u5831\u304c\u5fc5\u8981<\/td><\/tr>\n
    \u304a\u77e5\u3089\u305b<\/td>revalidate: 86400<\/td>1\u65e51\u56de\u306e\u66f4\u65b0\u3067\u5341\u5206<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n\n\n\n
    \u306a\u304a\u3001Next.js 15\u3067\u306ffetch\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u304cno-store<\/code>\uff08\u30ad\u30e3\u30c3\u30b7\u30e5\u306a\u3057\uff09\u306b\u5909\u66f4\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u305d\u306e\u305f\u3081\u3001\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u305f\u3044\u30c7\u30fc\u30bf\u306b\u306f\u660e\u793a\u7684\u306brevalidate<\/code>\u3092\u6307\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002AI\u306f\u5168\u3066\u306efetch\u306b\u540c\u3058\u30ad\u30e3\u30c3\u30b7\u30e5\u8a2d\u5b9a\u3092\u9069\u7528\u3059\u308b\u50be\u5411\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u753b\u9762\u306e\u8981\u4ef6\u306b\u5fdc\u3058\u3066\u30c7\u30fc\u30bf\u3054\u3068\u306b\u30ad\u30e3\u30c3\u30b7\u30e5\u6642\u9593\u3092\u5909\u3048\u308b\u306e\u306f\u3001\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u3092\u7406\u89e3\u3057\u3066\u3044\u308b\u4eba\u9593\u306e\u4ed5\u4e8b\u3067\u3059\u3002<\/p>\n\n\n\n
    Server Component\u3068Client Component\u306e\u5883\u754c<\/h2>\n\n\n\n
    AI\u304c\u898b\u843d\u3068\u3057\u3066\u3044\u305f\u91cd\u8981\u306a\u30dd\u30a4\u30f3\u30c8\u306e1\u3064\u304c\u3001Server Component\u3068Client Component\u306e\u5883\u754c\u8a2d\u8a08\u3067\u3059\u3002\u300c\u6700\u8fd1\u306e\u6ce8\u6587\u300d\u30bb\u30af\u30b7\u30e7\u30f3\u306b\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u81ea\u52d5\u66f4\u65b0\u3059\u308b\u6a5f\u80fd\u3092\u3064\u3051\u305f\u3044\u5834\u5408\u3001Server Component\u306f\u30ea\u30af\u30a8\u30b9\u30c8\u6642\u306b1\u56de\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u3060\u3051\u3067\u3001\u30d6\u30e9\u30a6\u30b6\u5074\u3067\u306e\u81ea\u52d5\u66f4\u65b0\u306f\u3067\u304d\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
    \u6700\u521d\u306e\u30c7\u30fc\u30bf\u3092Server Component\u3067\u53d6\u5f97\u3057\u3001Client Component\u306b\u6e21\u3057\u3066\u81ea\u52d5\u66f4\u65b0\u3055\u305b\u308b\u30d1\u30bf\u30fc\u30f3\u304c\u52b9\u679c\u7684\u3067\u3059\u3002<\/p>\n\n\n\n
    \/\/ Server Component\uff1a\u521d\u56de\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066Client Component\u306b\u6e21\u3059\nasync function RecentOrdersSection() {\n  const initialOrders = await getRecentOrders();\n  return <RecentOrdersClient initialOrders={initialOrders} \/>;\n}<\/code><\/pre>\n\n\n\n
    \/\/ RecentOrdersClient.tsx\n'use client';\n\nimport { useState, useEffect } from 'react';\n\ntype Order = {\n  id: string;\n  amount: number;\n  status: string;\n  createdAt: string;\n};\n\nexport function RecentOrdersClient({\n  initialOrders,\n}: {\n  initialOrders: Order[];\n}) {\n  const [orders, setOrders] = useState(initialOrders);\n\n  useEffect(() => {\n    const interval = setInterval(async () => {\n      const res = await fetch('\/api\/orders\/recent');\n      if (res.ok) {\n        const data = await res.json();\n        setOrders(data);\n      }\n    }, 30000);  \/\/ 30\u79d2\u3054\u3068\u306b\u66f4\u65b0\n\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <div>\n      <h2 className=\"text-lg font-bold mb-4\">\u6700\u8fd1\u306e\u6ce8\u6587<\/h2>\n      <table className=\"w-full\">\n        <thead>\n          <tr className=\"border-b\">\n            <th className=\"text-left p-2\">\u6ce8\u6587ID<\/th>\n            <th className=\"text-left p-2\">\u91d1\u984d<\/th>\n            <th className=\"text-left p-2\">\u30b9\u30c6\u30fc\u30bf\u30b9<\/th>\n          <\/tr>\n        <\/thead>\n        <tbody>\n          {orders.map((order) => (\n            <tr key={order.id} className=\"border-b\">\n              <td className=\"p-2\">{order.id}<\/td>\n              <td className=\"p-2\">\u00a5{order.amount.toLocaleString()}<\/td>\n              <td className=\"p-2\">{order.status}<\/td>\n            <\/tr>\n          ))}\n        <\/tbody>\n      <\/table>\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
    \u3053\u306e\u30d1\u30bf\u30fc\u30f3\u306e\u30e1\u30ea\u30c3\u30c8\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n