优化 Next.js 13 应用首屏加载性能：避免数据请求瀑布流效应-js教程-PHP中文网

优化 Next.js 13 应用首屏加载性能：避免数据请求瀑布流效应

本文旨在解决 next.js 13 应用首屏加载缓慢的问题，尤其是在 `rootlayout` 中进行大量串行数据请求时导致的“瀑布流效应”。我们将深入分析问题根源，并提供两种主要的优化策略：将动态数据获取转移至客户端（使用 `useeffect` 或 `swr` 库），以及通过细化组件粒度实现并行数据加载，从而显著提升用户体验和页面响应速度。

在构建 Next.js 13 应用程序时，开发者经常会遇到首屏加载时间过长的问题，尤其是在部署到资源有限的服务器（如 AWS EC2 实例）上时。尽管进行了代码分割、移除冗余依赖和图像优化等常规操作，但首次渲染耗时依然显著，这严重影响了用户体验。本文将详细探讨导致这一问题的核心原因，并提供切实可行的优化方案。

问题根源分析：服务器端数据获取的“瀑布流效应”

Next.js 13 引入的 App Router 架构中，默认情况下，RootLayout 及其内部的异步组件都在服务器端渲染。当 RootLayout 中包含多个使用 await 关键字进行串行 API 调用时，就会产生所谓的“数据请求瀑布流效应”（Data Fetching Waterfall Effect）。这意味着在所有这些异步请求都完成并返回数据之前，服务器无法生成完整的 HTML 响应。

考虑以下代码片段：

export default async function RootLayout({ children }) {
  // ... 其他代码 ...

  // 串行数据请求示例
  const categories = await getCategory(
    { page: 1, limit: 1000000 },
    token,
    cookie
  );
  const product = await getProduct(
    {
      page: 1,
      limit: 100000,
    },
    token,
    cookie
  );
  const cartList = await getCartList({}, token, cookie);
  const contact_us = await getContactUs({}, token, cookie);
  const contact_number = await getContactNumber({}, token, cookie);
  let searchProducts = await getProductBySearch({}, token, cookie);
  let coupons = await getCoupons({}, token, cookie);
  let userdetails = await getUser({}, token, cookie);
  const recent = await getRecentViews({}, token, cookie);

  // ... 将数据传递给 Providers 组件 ...
  return (
    <html lang="en">
      {/* ... */}
      <body>
        <Providers
          data={{
            coupons,
            categories,
            product,
            cartList,
            searchProducts,
            userdetails,
            contact_us,
            contact_number,
            cartDetails,
            recent,
          }}
        >
          {children}
        </Providers>
      </body>
    </html>
  );
}

登录后复制

在上述 RootLayout 中，getCategory、getProduct、getCartList 等一系列 API 调用是同步且串行执行的。这意味着 getProduct 必须等待 getCategory 完成，getCartList 必须等待 getProduct 完成，以此类推。如果每个 API 调用都需要几百毫秒甚至更长时间，那么所有这些请求的总耗时将累加起来，导致服务器生成初始 HTML 的时间大大延长，从而表现为首屏加载缓慢。即使这些数据最终通过 Providers 组件传递给子组件，服务器端等待所有数据完成这一事实并未改变。

优化策略

为了解决服务器端数据获取的瀑布流效应，核心思路是将非关键或动态变化的数据获取逻辑从服务器端 RootLayout 转移到客户端组件，或者利用并行请求机制。

策略一：将数据获取转移至客户端

将部分数据获取逻辑从服务器端转移到客户端组件，可以允许服务器快速返回一个基础的 HTML 结构，而动态内容则在客户端加载完成后再填充。这能显著改善用户的感知加载速度。

1. 使用 useEffect Hook 进行客户端数据获取

useEffect 是 React 中用于处理副作用的 Hook，非常适合在组件挂载后进行数据获取。

import { useState, useEffect } from 'react';

function Profile() {
  const [data, setData] = useState(null);
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    // 组件挂载后执行数据获取
    fetch('/api/profile-data')
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        console.error('Failed to fetch profile data:', error);
        setLoading(false); // 即使出错也停止加载
      });
  }, []); // 空数组表示只在组件挂载和卸载时执行

  if (isLoading) return <p>加载中...</p>;
  if (!data) return <p>无个人资料数据</p>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  );
}

登录后复制

优点：

Symanto Text Insights

基于心理语言学分析的数据分析和用户洞察

查看详情

服务器可以更快地响应，提供基础页面结构。
用户可以更快地看到页面内容，即使部分动态数据仍在加载中。

缺点：

首次加载时，数据区域可能显示加载状态或空白。
对搜索引擎优化（SEO）可能不如服务器端渲染的数据友好，尽管现代搜索引擎对客户端渲染的内容抓取能力有所提升。

2. 使用 SWR 库进行客户端数据获取

SWR 是 Next.js 团队开发的一个 React Hooks 库，用于数据获取。它提供了开箱即用的缓存、重新验证、焦点重新验证、错误重试等高级功能，能极大简化客户端数据获取的复杂性并提升性能。

import useSWR from 'swr';

// 定义一个通用的数据获取器
const fetcher = (...args) => fetch(...args).then((res) => res.json());

function Profile() {
  // useSWR 接收请求的 key 和 fetcher 函数
  const { data, error, isLoading } = useSWR('/api/profile-data', fetcher);

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>加载失败: {error.message}</div>;
  if (!data) return <div>无数据</div>; // SWR 内部处理了初始状态，但可以添加以防万一

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  );
}

登录后复制

优点：

内置缓存和智能重新验证策略，提升用户体验和应用性能。
简化了加载、错误和数据状态管理。
支持并发请求。

缺点：

需要引入额外的库。
与 useEffect 类似，首次加载时数据区域可能显示加载状态。

策略二：细化组件粒度与数据获取

与其在顶层 RootLayout 中一次性获取所有数据，不如将数据获取逻辑下放到需要这些数据的子组件中。这样，不同的组件可以独立地并行获取它们所需的数据。

例如，如果 Categories 组件只需要分类数据，ProductList 组件只需要产品数据，那么可以将 getCategory 放在 Categories 组件中，getProduct 放在 ProductList 组件中。

// app/components/CategoryList.js (客户端组件或服务器组件，取决于具体需求)
async function CategoryList() {
  // 假设这是一个服务器组件，或者在客户端组件中使用 useEffect/SWR
  const categories = await getCategory({ page: 1, limit: 1000000 }, token, cookie);
  return (
    <ul>
      {categories.map(cat => <li key={cat.id}>{cat.name}</li>)}
    </ul>
  );
}

// app/components/ProductDisplay.js
async function ProductDisplay() {
  const products = await getProduct({ page: 1, limit: 100000 }, token, cookie);
  return (
    <div>
      {products.map(prod => <div key={prod.id}>{prod.name}</div>)}
    </div>
  );
}

// app/layout.js (精简后的 RootLayout)
export default async function RootLayout({ children }) {
  // 仅获取全局、非阻塞或静态数据
  // const globalConfig = await getGlobalConfig(); // 示例

  return (
    <html lang="en">
      <body>
        <Providers> {/* Providers 内部不再依赖大量 RootLayout 获取的数据 */}
          {children}
        </Providers>
      </body>
    </html>
  );
}

// app/page.js (示例)
import CategoryList from '../components/CategoryList';
import ProductDisplay from '../components/ProductDisplay';

export default function Page() {
  return (
    <main>
      <CategoryList />
      <ProductDisplay />
      {/* 其他内容 */}
    </main>
  );
}

登录后复制

通过这种方式，Next.js 的渲染机制可以并行处理这些独立组件的数据请求，而不是等待一个巨大的串行瀑布流。对于服务器组件，Next.js 甚至支持流式 SSR，这意味着在数据准备就绪时，页面的不同部分可以逐步发送到客户端，进一步提升感知性能。

结合 React Suspense (仅限客户端组件)：对于客户端组件，可以结合 React 的 Suspense 组件，在数据加载时显示一个回退 UI，从而提供更流畅的用户体验。

import { Suspense } from 'react';
import Profile from '../components/Profile'; // 假设 Profile 使用 SWR 或 useEffect

export default function Page() {
  return (
    <main>
      <h1>欢迎来到我的网站</h1>
      <Suspense fallback={<div>加载个人资料中...</div>}>
        <Profile />
      </Suspense>
      {/* 其他内容 */}
    </main>
  );
}

登录后复制

注意事项与总结

区分服务器组件和客户端组件的数据获取：
- 服务器组件：可以直接使用 await 进行数据获取，但应避免串行请求，考虑使用 Promise.all 并行处理多个独立的服务器端数据请求，或将数据获取下沉到更细粒度的组件。
- 客户端组件：必须在 useEffect 或 SWR/React Query 等库中进行数据获取，以避免阻塞服务器渲染。

合理利用 Promise.all：如果确实需要在服务器端组件中获取多个相互不依赖的数据，可以使用 Promise.all 来并行执行这些请求，缩短总等待时间。

// 在服务器组件中并行获取数据
const [categories, products, cartList] = await Promise.all([
  getCategory({ page: 1, limit: 1000000 }, token, cookie),
  getProduct({ page: 1, limit: 100000 }, token, cookie),
  getCartList({}, token, cookie),
]);

登录后复制

缓存策略：Next.js 13 提供了内置的 fetch 缓存机制。确保你的 API 调用能够被正确缓存，或者在必要时使用 revalidate 选项来控制缓存行为。对于客户端数据，SWR 等库也提供了强大的客户端缓存能力。
资源优化：除了数据获取，传统的性能优化手段依然重要，例如：
- 减少 JS 包大小：分析并移除未使用的依赖，进行代码分割。
- 图片优化：使用 Next.js 的 Image 组件和 sharp 等工具进行图片压缩和懒加载。
- CSS 优化：使用 Tailwind CSS 或 CSS Modules 减少 CSS 体积。
- 服务器资源：确保 EC2 实例的 CPU、内存和网络带宽足以支撑应用负载，特别是对于需要处理大量并发请求的场景。