React 19 SuspenseとConcurrent Rendering完全ガイド：Streaming SSRと面接対策2026年版

// 従来のアプローチ：命令的なデータフェッチング
function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<Error | null>(null)

  useEffect(() => {
    setLoading(true)
    fetchUser(userId)
      .then(setUser)
      .catch(setError)
      .finally(() => setLoading(false))
  }, [userId])

  if (loading) return <Skeleton />
  if (error) return <ErrorMessage error={error} />
  if (!user) return null

  return <div>{user.name}</div>
}

// React 19：宣言的なデータフェッチング
import { use, Suspense } from 'react'

function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise)
  return <div>{user.name}</div>
}

// 親コンポーネントでSuspenseバウンダリを設定
function App() {
  const userPromise = fetchUser('123')
  
  return (
    <Suspense fallback={<Skeleton />}>
      <UserProfile userPromise={userPromise} />
    </Suspense>
  )
}

import { useState, useTransition } from 'react'

function SearchPage() {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState<SearchResult[]>([])
  const [isPending, startTransition] = useTransition()

  function handleSearch(e: React.ChangeEvent<HTMLInputElement>) {
    const value = e.target.value
    setQuery(value) // 高優先度：即座にインプットを更新

    startTransition(() => {
      // 低優先度：検索結果の更新は遅延可能
      const searchResults = performExpensiveSearch(value)
      setResults(searchResults)
    })
  }

  return (
    <div>
      <input value={query} onChange={handleSearch} />
      {isPending && <Spinner />}
      <SearchResults results={results} />
    </div>
  )
}

import { useDeferredValue, useMemo } from 'react'

function ProductList({ products, filter }: Props) {
  const deferredFilter = useDeferredValue(filter)
  
  // 遅延した値を使用して重い計算を実行
  const filteredProducts = useMemo(() => {
    return products.filter(p => 
      p.name.toLowerCase().includes(deferredFilter.toLowerCase())
    )
  }, [products, deferredFilter])

  // フィルターが最新でない場合の視覚的フィードバック
  const isStale = filter !== deferredFilter

  return (
    <div style={{ opacity: isStale ? 0.7 : 1 }}>
      {filteredProducts.map(p => <ProductCard key={p.id} product={p} />)}
    </div>
  )
}

import { Suspense } from 'react'
import { UserStats, RecentActivity, Recommendations } from './components'

export default function DashboardPage() {
  return (
    <div className="dashboard">
      <h1>ダッシュボード</h1>
      
      {/* 重要なコンテンツは即座に表示 */}
      <Suspense fallback={<StatsSkeleton />}>
        <UserStats />
      </Suspense>

      <div className="grid grid-cols-2 gap-4">
        {/* 独立したSuspenseバウンダリで並行読み込み */}
        <Suspense fallback={<ActivitySkeleton />}>
          <RecentActivity />
        </Suspense>

        <Suspense fallback={<RecommendationsSkeleton />}>
          <Recommendations />
        </Suspense>
      </div>
    </div>
  )
}

import { getServerSession } from 'next-auth'
import { prisma } from '@/lib/prisma'

export async function UserStats() {
  const session = await getServerSession()
  
  const stats = await prisma.userStats.findUnique({
    where: { userId: session?.user?.id },
    select: {
      totalPosts: true,
      totalViews: true,
      totalLikes: true,
      memberSince: true,
    },
  })

  return (
    <div className="stats-grid">
      <StatCard label="投稿数" value={stats?.totalPosts ?? 0} />
      <StatCard label="総閲覧数" value={stats?.totalViews ?? 0} />
      <StatCard label="いいね数" value={stats?.totalLikes ?? 0} />
      <StatCard label="会員歴" value={formatDate(stats?.memberSince)} />
    </div>
  )
}

'use client'

import { Component, ReactNode } from 'react'

interface Props {
  children: ReactNode
  fallback: (error: Error, reset: () => void) => ReactNode
}

interface State {
  error: Error | null
}

class ErrorBoundary extends Component<Props, State> {
  state: State = { error: null }

  static getDerivedStateFromError(error: Error): State {
    return { error }
  }

  reset = () => {
    this.setState({ error: null })
  }

  render() {
    if (this.state.error) {
      return this.props.fallback(this.state.error, this.reset)
    }
    return this.props.children
  }
}

// 使用例
function App() {
  return (
    <ErrorBoundary
      fallback={(error, reset) => (
        <div className="error-container">
          <p>エラーが発生しました: {error.message}</p>
          <button onClick={reset}>再試行</button>
        </div>
      )}
    >
      <Suspense fallback={<Loading />}>
        <DataComponent />
      </Suspense>
    </ErrorBoundary>
  )
}

// 推奨：意味のある単位でグループ化
function Dashboard() {
  return (
    <div>
      {/* ヘッダーとナビゲーションは常に表示 */}
      <Header />
      <Navigation />

      {/* メインコンテンツは1つのSuspenseでラップ */}
      <Suspense fallback={<MainContentSkeleton />}>
        <MainContent />
      </Suspense>

      {/* サイドバーは独立して読み込み可能 */}
      <Suspense fallback={<SidebarSkeleton />}>
        <Sidebar />
      </Suspense>
    </div>
  )
}

const cache = new Map<string, Promise<unknown>>()

export function preload<T>(key: string, fetcher: () => Promise<T>): Promise<T> {
  if (!cache.has(key)) {
    cache.set(key, fetcher())
  }
  return cache.get(key) as Promise<T>
}

// 使用例：ページ読み込み時に並行してプリロード
function prefetchDashboardData(userId: string) {
  preload(`user-${userId}`, () => fetchUser(userId))
  preload(`stats-${userId}`, () => fetchStats(userId))
  preload(`notifications-${userId}`, () => fetchNotifications(userId))
}