Featured image of post Next.js App Router 性能优化的要点Featured image of post Next.js App Router 性能优化的要点
软件

Next.js App Router 性能优化的要点

了解优化 Next.js App Router 性能的关键技术，重点关注 RSC 和图像优化。

  1. 首页
  2. Softwares
  3. Next.js App Router 性能优化的要点

利用 React 18 功能，Next.js App Router 为构建现代 Web 前端提供了高性能架构。

然而，服务器-客户端边界或缓存规则配置错误可能会导致响应时间变慢。 在本指南中，我们探索实用的优化技术来构建速度极快的 Next.js 应用程序。

1. 最大化 React 服务器组件 (RSC)

App Router 的主要优点是默认情况下所有组件都是服务器组件。这消除了客户端包中的大部分 JavaScript。

💡 优化规则：将 "use client" 推到叶子上

在文件顶部声明 "use client" 会强制浏览器下载其下方的整个导入树。 为了优化，将交互功能（如按钮、状态挂钩和副作用）隔离到小的叶组件中。

// ✕ Anti-pattern: Turning the entire page into a Client Component
'use client'
export default function Page() {
  const [data, setData] = useState(null)
  return <div>{/* Heavy static contents */}</div>
}

// ◯ Best practice: Nest Client Components inside Server Components
import HeavyStaticContent from './HeavyStaticContent' // RSC
import ClientInteractiveButton from './ClientInteractiveButton' // Client

export default function Page() {
  return (
    <div>
      <HeavyStaticContent />
      <ClientInteractiveButton />
    </div>
  )
}

2. 使用 next/image 进行智能图像处理

视口上的图像会严重影响您的最大内容绘制 (LCP) 分数。

💡 使用 priority 预加载关键资源

确保将 priority 属性添加到主英雄图像或徽标中，以便浏览器在解析辅助脚本之前预加载资源。

import Image from 'next/image'

export default function Hero() {
  return (
    <div className="hero-banner">
      <Image
        src="/images/hero-visual.png"
        alt="Hero Image"
        width={1200}
        height={630}
        priority // Force Preloading
        sizes="(max-width: 768px) 100vw, 1200px"
      />
    </div>
  )
}

另外，准确定义 sizes 属性，以防止服务器向小型移动显示器提供大量桌面分辨率。

3. 拆分和动态导入

要优化初始页面重量，请拆分重型库或可选组件（例如模式窗口），以便它们仅在触发时加载。

import dynamic from 'next/dynamic'

// Do not bundle this modal during the initial page load
const HeavyModal = dynamic(() => import('./HeavyModal'), {
  ssr: false, // Exclude from Server-Side Rendering
})

4.摘要：测量、构建、审计

始终使用 Lighthouse 或 Chrome DevTools 运行审核来分析 JavaScript 包大小和服务器响应时间 (TTFB)。利用服务器组件的强大功能来提供优化、快速的用户体验。

©2022 - 2026 Kaisekukun