import { Suspense } from 'react';

export default function Dashboard () {
  return (
    <div>
      <h1>Dashboard</h1>
      <Suspense fallback={<DashboardSkeleton />}>
        <DashboardContent />
      </Suspense>
      <Suspense fallback={<ChartSkeleton />}>
        <AnalyticsChart />
      </Suspense>
    </div>
  );
}

// 首次訪問(wèn)：服務(wù)器承擔(dān)所有繁重工作
export async function getServerSideProps() {
  // 這在服務(wù)器上運(yùn)行，會(huì)阻塞響應(yīng)
  const userData = await fetchUser();
  const dashboardData = await fetchDashboard(userData.id);
  const notifications = await fetchNotifications(userData.id);

  return {
    props: {
      userData,
      dashboardData,
      notifications
    }
  };
}

// 后續(xù)導(dǎo)航：純 SPA 行為
function Dashboard({ userData }) {
  const router = useRouter();

  const goToProfile = () => {
    // 不訪問(wèn)服務(wù)器——純客戶端導(dǎo)航
    router.push('/profile');
  };

  return (
    <div>
      <h1>Welcome, {userData.name}</h1>
      <button onClick={goToProfile}>View Profile</button>
    </div>
  );
}

// 性能陷阱：繁重的客戶端頁(yè)面
import HeavyChart from './HeavyChart'; // 500KB
import ComplexTable from './ComplexTable'; // 300KB
import RichEditor from './RichEditor'; // 400KB

export default function Dashboard () {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 導(dǎo)航后在客戶端獲取數(shù)據(jù)
    fetchDashboardData().then(setData);
  }, []);

  // 用戶需要等待包加載 + 數(shù)據(jù)加載
  if (!data) return <div>Loading...</div>;

  return (
    <div>
      <HeavyChart data={data.charts} />
      <ComplexTable data={data.tables} />
      <RichEditor content={data.content} />
    </div>
  );
}

// 慢方法——每個(gè)請(qǐng)求都要等前一個(gè)完成
export async function getServerSideProps({ req }) {
  // 步驟 1：獲取用戶（300ms）
  const user = await fetchUser(req.session.userId);

  // 步驟 2：等用戶數(shù)據(jù)，再獲取個(gè)人資料（400ms）
  const profile = await fetchUserProfile(user.id);

  // 步驟 3：等個(gè)人資料，再獲取儀表盤數(shù)據(jù)（600ms）
  const dashboardData = await fetchDashboardData(user.id, profile.preferences);

  // 步驟 4：等儀表盤數(shù)據(jù)，再獲取通知（200ms）
  const notifications = await fetchNotifications(user.id);

  // 總時(shí)間：300 + 400 + 600 + 200 = 1500ms（1.5 秒?。?
  return {
    props: {
      user,
      profile,
      dashboardData,
      notifications
    }
  };
}

export async function getServerSideProps({ req }) {
  // 步驟 1：先獲取用戶（仍然是其他請(qǐng)求所需要的）
  const user = await fetchUser(req.session.userId);

  // 步驟 2：并行獲取其他所有數(shù)據(jù)
  const [profile, dashboardData, notifications] = await Promise.all([
    fetchUserProfile(user.id),          // 400ms
    fetchDashboardData(user.id),        // 600ms
    fetchNotifications(user.id)         // 200ms
  ]);

  // 總時(shí)間：300ms（用戶） + 600ms（最長(zhǎng)的并行請(qǐng)求） = 900ms
  // 我們節(jié)省了 600ms！

  return {
    props: {
      user,
      profile,
      dashboardData,
      notifications
    }
  };
}

export async function getServerSideProps({ req }) {
  // 并行獲取與用戶無(wú)關(guān)的數(shù)據(jù)和用戶數(shù)據(jù)
  const [user, globalSettings, systemStatus] = await Promise.all([
    fetchUser(req.session.userId),
    fetchGlobalSettings(),              // 不需要用戶數(shù)據(jù)
    fetchSystemStatus()                 // 不需要用戶數(shù)據(jù)
  ]);

  // 現(xiàn)在并行獲取依賴于用戶的數(shù)據(jù)
  const [profile, dashboardData, notifications] = await Promise.all([
    fetchUserProfile(user.id),
    fetchDashboardData(user.id),
    fetchNotifications(user.id)
  ]);

  return {
    props: {
      user,
      profile,
      dashboardData,
      notifications,
      globalSettings,
      systemStatus
    }
  };
}

// app/products/[id]/page.js
// 每次訪問(wèn)產(chǎn)品頁(yè)面時(shí)，這都會(huì)在服務(wù)器上運(yùn)行
export default async function ProductPage({ params }) {
  // 每次導(dǎo)航都向服務(wù)器發(fā)起網(wǎng)絡(luò)請(qǐng)求
  const product = await fetchProduct(params.id);
  const reviews = await fetchReviews(params.id);
  const recommendations = await fetchRecommendations(params.id);

  return (
    <div>
      <ProductDetails product={product} />
      <ReviewsList reviews={reviews} />
      <RecommendationGrid recommendations={recommendations} />
    </div>
  );
}

// app/products/[id]/page.js
'use client'; // 這使其成為客戶端渲染

import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';

export default function ProductPage () {
  const params = useParams();
  const [product, setProduct] = useState(null);
  const [reviews, setReviews] = useState(null);

  useEffect(() => {
    // 在客戶端獲取數(shù)據(jù)——沒(méi)有服務(wù)器往返
    Promise.all([
      fetch(`/api/products/${params.id}`).then(res => res.json()),
      fetch(`/api/reviews/${params.id}`).then(res => res.json())
    ]).then(([productData, reviewsData]) => {
      setProduct(productData);
      setReviews(reviewsData);
    });
  }, [params.id]);

  if (!product) return <ProductSkeleton />;

  return (
    <div>
      <ProductDetails product={product} />
      <ReviewsList reviews={reviews} />
    </div>
  );
}

// app/products/[id]/page.js
// 為 SEO 進(jìn)行服務(wù)器渲染初始頁(yè)面
export default async function ProductPage({ params }) {
  const initialProduct = await fetchProduct(params.id);

  return (
    <div>
      <ProductClient initialData={initialProduct} productId={params.id} />
    </div>
  );
}

// components/ProductClient.js
'use client';

export default function ProductClient({ initialData, productId }) {
  const [product, setProduct] = useState(initialData);

  // 后續(xù)導(dǎo)航在客戶端進(jìn)行
  const router = useRouter();

  const navigateToProduct = async (newId) => {
    // 立即更新 URL（感覺(jué)是即時(shí)的）
    router.push(`/products/${newId}`);

    // 在后臺(tái)獲取新數(shù)據(jù)
    const newProduct = await fetch(`/api/products/${newId}`).then(res => res.json());
    setProduct(newProduct);
  };

  return (
    <div>
      <ProductDetails product={product} />
      <RelatedProducts onProductClick={navigateToProduct} />
    </div>
  );
}

// 第一個(gè)包膨脹器：導(dǎo)入整個(gè)庫(kù)
import _ from 'lodash'; // 導(dǎo)入整個(gè) 70KB 的庫(kù)
import * as dateFns from 'date-fns'; // 另一個(gè)大型導(dǎo)入

// 第二個(gè)包膨脹器：在各處導(dǎo)入重型組件
import { DataVisualization } from './DataVisualization'; // 500KB 組件
import { VideoPlayer } from './VideoPlayer'; // 300KB 組件
import { RichTextEditor } from './RichTextEditor'; // 400KB 組件

export default function HomePage () {
  return (
    <div>
      <h1>Welcome</h1>
      {/* 這些組件可能在初始加載時(shí)甚至不可見(jiàn) */}
      <DataVisualization />
      <VideoPlayer />
      <RichTextEditor />
    </div>
  );
}

// pages/dashboard.js - 僅當(dāng)用戶訪問(wèn) /dashboard 時(shí)加載
import dynamic from 'next/dynamic';

// 僅在需要時(shí)加載重型組件
const AnalyticsChart = dynamic(() => import('../components/AnalyticsChart'), {
  loading: () => <ChartSkeleton />,
  ssr: false // 對(duì)僅客戶端組件跳過(guò)服務(wù)器端渲染
});

const DataExporter = dynamic(() => import('../components/DataExporter'), {
  loading: () => <p>Loading exporter...</p>
});

export default function Dashboard() {
  const [showAnalytics, setShowAnalytics] = useState(false);
  const [showExporter, setShowExporter] = useState(false);

  return (
    <div>
      <h1>Dashboard</h1>

      <button onClick={() => setShowAnalytics(true)}>
        View Analytics
      </button>

      {showAnalytics && <AnalyticsChart />}

      <button onClick={() => setShowExporter(true)}>
        Export Data
      </button>

      {showExporter && <DataExporter />}
    </div>
  );
}

// components/ConditionalFeatures.js
import dynamic from 'next/dynamic';

// 僅當(dāng)用戶有高級(jí)訂閱時(shí)加載
const PremiumChart = dynamic(() => import('./PremiumChart'), {
  loading: () => <div>Loading premium features...</div>
});

// 僅當(dāng)用戶點(diǎn)擊“高級(jí)設(shè)置”時(shí)加載
const AdvancedSettings = dynamic(() => import('./AdvancedSettings'));

export function ConditionalFeatures({ user, showAdvanced }) {
  return (
    <div>
      {user.isPremium && <PremiumChart />}
      {showAdvanced && <AdvancedSettings />}
    </div>
  );
}

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true'
});

module.exports = withBundleAnalyzer({
  // 你的 Next.js 配置
});

// 傳統(tǒng) Next.js 頁(yè)面，存在水合瓶頸
export default function ProductPage({ products }) {
  return (
    <div>
      <Header /> {/* 必須先水合，用戶才能交互 */}
      <ProductGrid products={products} /> {/* 大型組件樹(shù) */}
      <FilterSidebar /> {/* 復(fù)雜的交互組件 */}
      <Footer /> {/* 不需要 JS 的靜態(tài)內(nèi)容 */}

      {/* 所有內(nèi)容同時(shí)水合，阻塞交互性 */}
    </div>
  );
}

// app/products/page.js - 服務(wù)器組件（不向客戶端發(fā)送 JS）
import { ProductGrid } from './components/ProductGrid';
import { ClientSideFilter } from './components/ClientSideFilter';

// 這個(gè)組件在服務(wù)器上運(yùn)行，只發(fā)送 HTML
export default async function ProductPage () {
  // 數(shù)據(jù)獲取在服務(wù)器上進(jìn)行
  const products = await fetchProducts();

  return (
    <div>
      <h1>Products</h1>
      {/* 靜態(tài)部分僅作為 HTML 存在 */}
      <ProductGrid products={products} />

      {/* 僅交互部分需要水合 */}
      <ClientSideFilter products={products} />
    </div>
  );
}

// components/ClientSideFilter.js
'use client'; // 標(biāo)記為需要水合

export function ClientSideFilter({ products }) {
  const [filters, setFilters] = useState({});
  // 交互組件邏輯...
}

export default function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  // 每次組件掛載時(shí)運(yùn)行——沒(méi)有緩存！
  useEffect(() => {
    fetch(`/api/users/${userId}`).then(res => res.json()).then(setUser);
  }, [userId]);

  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

export async function getServerSideProps({ params }) {
  // 每次請(qǐng)求都訪問(wèn)數(shù)據(jù)庫(kù)
  const posts = await db.posts.findMany({
    where: { published: true },
    orderBy: { createdAt: 'desc' }
  });

  return { props: { posts } };
}

// pages/blog/[slug].js
export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);

  return {
    props: { post },
    revalidate: 3600, // 最多每小時(shí)再生一次
  };
}

export async function getStaticPaths() {
  // 為熱門帖子生成路徑
  const popularPosts = await fetchPopularPosts();

  return {
    paths: popularPosts.map((post) => ({
      params: { slug: post.slug }
    })),
    fallback: 'blocking' // 按需生成其他頁(yè)面
  };
}

// pages/api/posts.js
import { unstable_cache } from 'next/cache';

const getCachedPosts = unstable_cache(
  async () => {
    // 消耗大的數(shù)據(jù)庫(kù)查詢
    return await db.posts.findMany({
      include: {
        author: true,
        comments: { take: 5 },
        tags: true
      },
      orderBy: { createdAt: 'desc' }
    });
  },
  ['posts-list'],
  {
    revalidate: 300, // 緩存 5 分鐘
    tags: ['posts']
  }
);

export default async function handler(req, res) {
  const posts = await getCachedPosts();
  res.setHeader('Cache-Control', 'public, s-maxage=300, stale-while-revalidate=600');
  res.json(posts);
}

export default function ProductCard({ product }) {
  return (
    <div className="product-card">
      {/* 沒(méi)有優(yōu)化，沒(méi)有懶加載，導(dǎo)致布局偏移 */}
      <img src={product.imageUrl} alt={product.name} />
      <h3>{product.name}</h3>
      <p>${product.price}</p>
    </div>
  );
}

export default function Gallery({ images }) {
  return (
    <div className="gallery">
      {images.map((image, index) => (
        // 所有 50 張圖像同時(shí)加載，即使用戶只看到 6 張
        <img key={index} src={image.url} alt={image.caption} />
      ))}
    </div>
  );
}

// components/ProductCard.js
import Image from 'next/image';

export default function ProductCard({ product }) {
  return (
    <div className="product-card">
      <Image
        src={product.imageUrl}
        alt={product.name}
        width={300}
        height={200}
        priority={product.featured} // 立即加載精選產(chǎn)品
        placeholder="blur"
        blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
        className="rounded-lg object-cover"
      />
      <h3>{product.name}</h3>
      <p>${product.price}</p>
    </div>
  );
}

// components/HeroSection.js
import Image from 'next/image';

export default function HeroSection () {
  return (
    <div className="hero relative h-screen">
      <Image
        src="/hero-image.jpg"
        alt="Hero image"
        fill
        priority
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        className="object-cover"
      />
      <div className="absolute inset-0 flex items-center justify-center">
        <h1 className="text-white text-6xl font-bold">Welcome</h1>
      </div>
    </div>
  );
}

// components/ImageGallery.js
import Image from 'next/image';
import { useState } from 'react';

export default function ImageGallery({ images }) {
  const [visibleCount, setVisibleCount] = useState(6);

  const loadMore = () => {
    setVisibleCount(prev => Math.min(prev + 6, images.length));
  };

  return (
    <div className="gallery">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {images.slice(0, visibleCount).map((image, index) => (
          <div key={image.id} className="aspect-square relative">
            <Image
              src={image.url}
              alt={image.caption}
              fill
              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
              className="object-cover rounded-lg"
              priority={index < 6} // 優(yōu)先加載前 6 張圖像
            />
          </div>
        ))}
      </div>

      {visibleCount < images.length && (
        <button
          onClick={loadMore}
          className="mt-8 px-6 py-3 bg-blue-600 text-white rounded-lg"
        >
          Load More ({images.length - visibleCount} remaining)
        </button>
      )}
    </div>
  );
}