Next.js应用首屏优化策略

在 Next.js 中进行服务器端首屏优化（Server-Side First Paint Optimization），特别是针对视频、图片等媒体资源的加载优化，是提升用户体验和 Core Web Vitals（如 LCP、FCP）的关键。下面从几个方面详细说明：

一、Next.js 首屏优化策略

1. 使用 App Router（推荐）

Next.js 13+ 推荐使用 App Router（app/ 目录），它原生支持：

React Server Components（RSC）
流式 SSR（Streaming SSR）
Suspense for Data Fetching
内置 Image、Video 组件

这些特性天然有助于首屏性能优化。

2. 数据获取放在服务端

使用 async Server Components 获取数据，避免客户端水合前白屏。
尽量减少客户端 JavaScript 的体积，延迟非关键 JS 加载。

3. 代码分割与动态导入

使用 dynamic() 动态导入非首屏组件（如评论区、推荐模块）。

const Comments = dynamic(() => import('@/components/Comments'), { ssr: false });

4. 预加载关键资源

使用 <link rel="preload"> 或 Next.js 的 next/head（Pages Router）或 <head>（App Router）预加载字体、关键 CSS、首屏图片等。

二、图片与视频加载优化

1. 使用 `next/image`（自动优化）

自动进行 格式转换（WebP/AVIF）、尺寸裁剪、懒加载、模糊占位（blur-up）。
支持远程图片（需配置 next.config.js 中的 remotePatterns）。

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1920}
  height={1080}
  priority // 首屏关键图
  placeholder="blur"
  blurDataURL="..." // 可用 tinybase64 生成
/>

✅ priority 属性：用于首屏关键图片，会立即加载而非懒加载。

2. 使用 `next/video`（实验性）或自定义优化

Next.js 官方暂未推出稳定版 next/video，但你可以：

使用 <video> 标签 + preload="metadata"（避免全加载）
提供多种格式（如 .mp4 + .webm）
使用 poster 图作为占位
视频懒加载（Intersection Observer）

<video
  poster="/poster.jpg"
  preload="metadata"
  controls
>
  <source src="/video.mp4" type="video/mp4" />
</video>

⚠️ 注意：视频文件较大，尽量不放首屏，或使用点击播放代替自动播放。

3. CDN + 响应式资源

将图片/视频托管到 CDN（如 Cloudinary、Imgix、Vercel Edge Config）
根据设备分辨率提供不同尺寸（srcset）

三、`public/` 与 `assets/`（或 `src/assets/`）的区别

特性	`public/` 目录	`assets/`（通常指 `src/assets/`）
访问方式	直接通过 `/filename` 访问（如 `/logo.png`）	需要通过 `import` 引入（Webpack 处理）
构建处理	不经过 Webpack，原样复制到输出目录	经过 Webpack 打包，可被优化、哈希命名
适用场景	静态资源（favicon、robots.txt、静态图片、视频）	组件依赖的资源（如 SVG 图标、组件内图片）
缓存控制	需手动配置 CDN/服务器缓存头	文件名带 hash（如 `logo.a1b2c3.png`），天然支持长期缓存
路径引用	`<img src="/image.jpg" />`	`import img from '@/assets/image.jpg'` → `<img src={img} />`

建议：

首屏关键图片：若需 next/image 优化，建议放 public/（因为 next/image 支持 public 和远程图片）。
组件内部图标/SVG：放 src/assets/ 并 import，便于 Tree Shaking 和打包优化。
大视频文件：放 public/，但注意不要过大，考虑外部 CDN。

四、其他首屏优化技巧

字体优化：

// App Router
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
// 应用到 layout
<body className={inter.className}>

→ 自动 font-display: swap + 预加载。

减少 TTFB（Time to First Byte）：
- 使用 Vercel Edge Functions / Serverless
- 数据库查询优化
- 缓存（ISR / SWR）

启用 ISR（Incremental Static Regeneration）：

export const revalidate = 60; // 每60秒更新

总结

优化点	推荐做法
首屏图片	`next/image` + `priority` + `blur`
视频	懒加载 + poster + 不放首屏
资源位置	静态资源 → `public/`；组件资源 → `src/assets/`
数据获取	Server Components + async fetch
非关键内容	`dynamic()` + `Suspense`

通过以上策略，可显著提升 Next.js 应用的首屏加载速度和用户体验。

一、Next.js 首屏优化策略​

1. 使用 App Router（推荐）​

2. 数据获取放在服务端​

3. 代码分割与动态导入​

4. 预加载关键资源​

二、图片与视频加载优化​

1. 使用 next/image（自动优化）​

2. 使用 next/video（实验性）或自定义优化​

3. CDN + 响应式资源​

三、public/ 与 assets/（或 src/assets/）的区别​

建议：​

四、其他首屏优化技巧​

总结​