如何在Next.js 14中实现Suspense页面初始加载效果

首先，你当前的代码把Header、Footer和children一起包在了Suspense里，这会导致页面头尾也跟着等待children加载完成才显示。其实只需要单独对{children}做Suspense包裹，这样Header和Footer可以直接渲染，只有内容区域在加载时显示状态：

export default function RootLayout({ children }) {
  return (
    <html translate="no">
      <head></head>
      <body>
        <Header />
        <Suspense fallback={<div>加载中...</div>}>
          {children}
        </Suspense>
        <Footer />
      </body>
    </html>
  );
}

针对图片资源的优化 #

如果children里的图片用的是Next.js的Image组件，还可以结合以下方式强化加载体验：

• 用placeholder="blur"搭配blurDataURL，给图片添加模糊占位图，替代单调的文字提示
• 首屏关键图片设置priority属性，让浏览器优先加载，Suspense会在图片加载完成前保持fallback状态
• 非首屏图片用loading="lazy"，配合Suspense实现按需加载

示例（在children页面中使用Image组件）：

import Image from 'next/image';

export default function Home() {
  return (
    <div>
      <h1>首页</h1>
      <Image
        src="/hero.jpg"
        alt="首页英雄图"
        width={800}
        height={600}
        priority
        placeholder="blur"
        blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg=="
      />
    </div>
  );
}

如果用普通img标签，可以给图片加加载状态的CSS样式，比如默认显示灰色占位块，图片加载完成后再显示：

.img-container {
  width: 800px;
  height: 600px;
  background-color: #f0f0f0;
  position: relative;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div className="img-container">
  <img src="/hero.jpg" alt="首页英雄图" onLoad={(e) => e.target.parentElement.style.backgroundColor = 'transparent'} />
</div>

内容的提问来源于stack exchange，提问作者Yaya