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 />

      {/* 메인 콘텐츠는 하나의 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))
}