use cache: remote

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  cacheComponents: true,
}
 
export default nextConfig

import { Suspense } from 'react'
import { connection } from 'next/server'
import { cacheTag, cacheLife } from 'next/cache'
 
export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
 
  return (
    <div>
      <ProductDetails id={id} />
      <Suspense fallback={<div>Loading price...</div>}>
        <ProductPrice productId={id} />
      </Suspense>
    </div>
  )
}
 
function ProductDetails({ id }: { id: string }) {
  return <div>Product: {id}</div>
}
 
async function ProductPrice({ productId }: { productId: string }) {
  // connection()を呼び出すと、このコンポーネントが動的になり、
  // 静的シェルに含まれるのを防ぎます。これにより、価格が
  // 常にリクエスト時に取得されることが保証されます。
  await connection()
 
  // これでリモートキャッシュハンドラーに価格をキャッシュできます。
  // 動的コンテキストにいるため、通常の'use cache'はここでは機能しません。
  const price = await getProductPrice(productId)
 
  return <div>Price: ${price}</div>
}
 
async function getProductPrice(productId: string) {
  'use cache: remote'
  cacheTag(`product-price-${productId}`)
  cacheLife({ expire: 3600 }) // 1時間
 
  // このデータベースクエリはキャッシュされ、すべてのユーザー間で共有されます
  return db.products.getPrice(productId)
}

async function UserDashboard() {
  // connection()を呼び出すとコンテキストが動的になります
  await connection()
 
  // キャッシングディレクティブなしでは、これはすべてのリクエストで実行されます
  const stats = await getStats()
 
  // 'use cache: remote'では、これはリモートハンドラーでキャッシュされます
  const analytics = await getAnalytics()
 
  return (
    <div>
      <Stats data={stats} />
      <Analytics data={analytics} />
    </div>
  )
}
 
async function getAnalytics() {
  'use cache: remote'
  cacheLife({ expire: 300 }) // 5分
 
  // この高コストの操作はキャッシュされ、すべてのリクエスト間で共有されます
  return fetchAnalyticsData()
}

// 有効：リモート内のリモート
async function outerRemote() {
  'use cache: remote'
  const result = await innerRemote()
  return result
}
 
async function innerRemote() {
  'use cache: remote'
  return getData()
}
 
// 有効：通常のキャッシュ内のリモート
async function outerCache() {
  'use cache'
  // これが動的コンテキストにある場合、内部リモートキャッシュが機能します
  const result = await innerRemote()
  return result
}
 
async function innerRemote() {
  'use cache: remote'
  return getData()
}
 
// 無効：プライベート内のリモート
async function outerPrivate() {
  'use cache: private'
  const result = await innerRemote() // エラー！
  return result
}
 
async function innerRemote() {
  'use cache: remote'
  return getData()
}
 
// 無効：リモート内のプライベート
async function outerRemote() {
  'use cache: remote'
  const result = await innerPrivate() // エラー！
  return result
}
 
async function innerPrivate() {
  'use cache: private'
  return getData()
}

import { connection } from 'next/server'
import { cacheLife, cacheTag } from 'next/cache'
 
export default async function DashboardPage() {
  // コンテキストを動的にします
  await connection()
 
  const stats = await getGlobalStats()
 
  return <StatsDisplay stats={stats} />
}
 
async function getGlobalStats() {
  'use cache: remote'
  cacheTag('global-stats')
  cacheLife({ expire: 60 }) // 1分
 
  // この高コストのデータベースクエリはキャッシュされ、すべてのユーザー間で共有されます
  // データベースの負荷を軽減します
  const stats = await db.analytics.aggregate({
    total_users: 'count',
    active_sessions: 'count',
    revenue: 'sum',
  })
 
  return stats
}

import { Suspense } from 'react'
import { connection } from 'next/server'
import { cacheLife, cacheTag } from 'next/cache'
 
export default async function FeedPage() {
  return (
    <div>
      <Suspense fallback={<Skeleton />}>
        <FeedItems />
      </Suspense>
    </div>
  )
}
 
async function FeedItems() {
  // 動的コンテキスト
  await connection()
 
  const items = await getFeedItems()
 
  return items.map((item) => <FeedItem key={item.id} item={item} />)
}
 
async function getFeedItems() {
  'use cache: remote'
  cacheTag('feed-items')
  cacheLife({ expire: 120 }) // 2分
 
  // このAPIコールはキャッシュされ、外部サービスへのリクエストを削減します
  const response = await fetch('https://api.example.com/feed')
  return response.json()
}

import { connection } from 'next/server'
import { cacheLife } from 'next/cache'
 
export default async function ReportsPage() {
  // 動的セキュリティチェック
  await connection()
 
  const report = await generateReport()
 
  return <ReportViewer report={report} />
}
 
async function generateReport() {
  'use cache: remote'
  cacheLife({ expire: 3600 }) // 1時間
 
  // この高コストの計算はキャッシュされ、権限を持つすべてのユーザー間で共有されます
  // 繰り返しの計算を回避します
  const data = await db.transactions.findMany()
 
  return {
    totalRevenue: calculateRevenue(data),
    topProducts: analyzeProducts(data),
    trends: calculateTrends(data),
  }
}

import { Suspense } from 'react'
import { connection } from 'next/server'
import { cookies } from 'next/headers'
import { cacheLife, cacheTag } from 'next/cache'
 
// 静的商品データ - ビルド時にプリレンダリング
async function getProduct(id: string) {
  'use cache'
  cacheTag(`product-${id}`)
 
  // これはビルド時にキャッシュされ、すべてのユーザー間で共有されます
  return db.products.find({ where: { id } })
}
 
// 共有価格データ - ランタイムでリモートハンドラーにキャッシュ
async function getProductPrice(id: string) {
  'use cache: remote'
  cacheTag(`product-price-${id}`)
  cacheLife({ expire: 300 }) // 5分
 
  // これはランタイムでキャッシュされ、すべてのユーザー間で共有されます
  return db.products.getPrice({ where: { id } })
}
 
// ユーザー固有の推奨事項 - ユーザーごとのプライベートキャッシュ
async function getRecommendations(productId: string) {
  'use cache: private'
  cacheLife({ expire: 60 }) // 1分
 
  const sessionId = (await cookies()).get('session-id')?.value
 
  // これはユーザーごとにキャッシュされ、共有されることはありません
  return db.recommendations.findMany({
    where: { productId, sessionId },
  })
}
 
export default async function ProductPage({ params }) {
  const { id } = await params
 
  // 静的商品データ
  const product = await getProduct(id)
 
  return (
    <div>
      <ProductDetails product={product} />
 
      {/* 動的共有価格 */}
      <Suspense fallback={<PriceSkeleton />}>
        <ProductPriceComponent productId={id} />
      </Suspense>
 
      {/* 動的パーソナライズ推奨事項 */}
      <Suspense fallback={<RecommendationsSkeleton />}>
        <ProductRecommendations productId={id} />
      </Suspense>
    </div>
  )
}
 
function ProductDetails({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  )
}
 
async function ProductPriceComponent({ productId }) {
  // このコンポーネントを動的にします
  await connection()
 
  const price = await getProductPrice(productId)
  return <div>Price: ${price}</div>
}
 
async function ProductRecommendations({ productId }) {
  const recommendations = await getRecommendations(productId)
  return <RecommendationsList items={recommendations} />
}
 
function PriceSkeleton() {
  return <div>Loading price...</div>
}
 
function RecommendationsSkeleton() {
  return <div>Loading recommendations...</div>
}
 
function RecommendationsList({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  )
}