React 19 Suspense và Concurrent Rendering: Streaming SSR cùng Câu hỏi Phỏng vấn 2026

import { Suspense } from 'react';
import { UserProfile } from './UserProfile';
import { LoadingSkeleton } from './LoadingSkeleton';

function ProfilePage({ userId }: { userId: string }) {
  return (
    <Suspense fallback={<LoadingSkeleton />}>
      <UserProfile userId={userId} />
    </Suspense>
  );
}

import { useTransition, useState } from 'react';

function SearchResults() {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const value = e.target.value;
    setQuery(value);
    
    startTransition(() => {
      // Update không urgent
      setSearchResults(filterResults(value));
    });
  }

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending && <span>Đang tải...</span>}
      <ResultsList />
    </div>
  );
}

import { Suspense } from 'react';
import { ProductList } from './ProductList';
import { RecommendationEngine } from './RecommendationEngine';

export default function HomePage() {
  return (
    <main>
      <h1>Chào mừng</h1>
      
      <Suspense fallback={<ProductSkeleton />}>
        <ProductList />
      </Suspense>
      
      <Suspense fallback={<RecommendationSkeleton />}>
        <RecommendationEngine />
      </Suspense>
    </main>
  );
}

import { use } from 'react';

interface User {
  id: string;
  name: string;
  email: string;
}

async function fetchUser(id: string): Promise<User> {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error('Không thể tải dữ liệu người dùng');
  return res.json();
}

function UserDetails({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise);
  
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

// Sử dụng
function UserPage({ userId }: { userId: string }) {
  const userPromise = fetchUser(userId);
  
  return (
    <Suspense fallback={<UserSkeleton />}>
      <UserDetails userPromise={userPromise} />
    </Suspense>
  );
}

import { Component, Suspense, ReactNode } from 'react';

interface ErrorBoundaryState {
  hasError: boolean;
  error: Error | null;
}

class ErrorBoundary extends Component<
  { children: ReactNode; fallback: ReactNode },
  ErrorBoundaryState
> {
  state: ErrorBoundaryState = { hasError: false, error: null };

  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }
    return this.props.children;
  }
}

function DataSection() {
  return (
    <ErrorBoundary fallback={<ErrorMessage />}>
      <Suspense fallback={<LoadingSpinner />}>
        <AsyncDataComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

function DashboardPage() {
  return (
    <div className="dashboard">
      <Suspense fallback={<HeaderSkeleton />}>
        <DashboardHeader />
      </Suspense>
      
      <div className="dashboard-content">
        <Suspense fallback={<StatsSkeleton />}>
          <StatsPanel />
        </Suspense>
        
        <Suspense fallback={<ChartSkeleton />}>
          <AnalyticsChart />
        </Suspense>
        
        <Suspense fallback={<TableSkeleton />}>
          <RecentActivityTable />
        </Suspense>
      </div>
    </div>
  );
}

import { useDeferredValue, useState, useMemo } from 'react';

function ProductSearch({ products }: { products: Product[] }) {
  const [searchTerm, setSearchTerm] = useState('');
  const deferredSearchTerm = useDeferredValue(searchTerm);
  
  const filteredProducts = useMemo(() => {
    return products.filter(product =>
      product.name.toLowerCase().includes(deferredSearchTerm.toLowerCase())
    );
  }, [products, deferredSearchTerm]);

  const isStale = searchTerm !== deferredSearchTerm;

  return (
    <div>
      <input
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Tìm sản phẩm..."
      />
      
      <div style={{ opacity: isStale ? 0.7 : 1 }}>
        {filteredProducts.map(product => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
}

import { Suspense } from 'react';
import { ProductGrid } from './ProductGrid';
import { FilterPanel } from './FilterPanel';

// Server Component
async function ProductGridServer() {
  const products = await db.products.findMany({
    take: 20,
    orderBy: { createdAt: 'desc' }
  });
  
  return <ProductGrid products={products} />;
}

export default function ProductsPage() {
  return (
    <div className="products-layout">
      <FilterPanel />
      
      <Suspense fallback={<ProductGridSkeleton />}>
        <ProductGridServer />
      </Suspense>
    </div>
  );
}

function OptimalSuspenseLayout() {
  return (
    <div>
      {/* Boundary riêng cho nội dung độc lập */}
      <Suspense fallback={<NavSkeleton />}>
        <Navigation />
      </Suspense>
      
      {/* Boundary chung cho nội dung liên quan */}
      <Suspense fallback={<ContentSkeleton />}>
        <MainContent />
        <RelatedContent />
      </Suspense>
    </div>
  );
}

// 2. Sử dụng skeleton có ý nghĩa
function ArticleSkeleton() {
  return (
    <article className="animate-pulse">
      <div className="h-8 bg-gray-200 rounded w-3/4 mb-4" />
      <div className="h-4 bg-gray-200 rounded w-full mb-2" />
      <div className="h-4 bg-gray-200 rounded w-5/6 mb-2" />
      <div className="h-4 bg-gray-200 rounded w-4/6" />
    </article>
  );
}

// 3. Kết hợp với Error Boundary
function RobustDataSection() {
  return (
    <ErrorBoundary fallback={<ErrorRecovery />}>
      <Suspense fallback={<DataSkeleton />}>
        <DataComponent />
      </Suspense>
    </ErrorBoundary>
  );
}