🚀 第二十八天：Next.js 进阶优化技巧 - Edge Functions + 缓存策略

在这一节，我们将学习如何利用 Edge Functions 和 缓存策略，让你的 Next.js 应用在全球范围内更快速地响应用户请求，尤其是在 高并发 场景下。通过将页面渲染逻辑部署到离用户更近的地方，我们能够显著减少 延迟，提高 响应速度，并减少服务器负担。

1. 什么是 Edge Functions？

Edge Functions 是指将代码部署到靠近用户的 边缘节点（Edge Nodes） 执行，通常由 CDN 提供。这与传统的将代码部署到数据中心不同，边缘函数通过将计算逻辑分布在全球多个位置，大大提高了应用的响应速度。

Next.js 支持 Edge Functions，你可以在 Vercel、Cloudflare Workers 等平台上进行部署。

优点：

• 低延迟：离用户更近的服务器节点可以减少请求的响应时间。

• 高可用性：边缘节点可以承受更高的并发负载，保证服务不易中断。

• 高效缓存：Edge Functions 可以与缓存策略配合使用，进一步减少后端负载。

2. 在 Next.js 中使用 Edge Functions

使用 Vercel Edge Functions

Vercel 提供了边缘函数的支持，允许你将 API Routes 部署到边缘节点。我们可以利用 next/edge 模块创建 Edge API 路由，执行较为轻量的计算任务。

创建 Edge API 路由

pages/api/hello.ts

import { NextRequest, NextResponse } from 'next/server';

export const config = {
  runtime: 'edge',
};

export default async function handler(req: NextRequest) {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();
  return NextResponse.json(json);
}

关键点：

• runtime: 'edge' 配置告知 Next.js 将此路由作为 Edge Function 执行。

• 使用 NextRequest 和 NextResponse 来处理请求和响应。

部署到 Vercel

Vercel 会自动识别你配置了 Edge Function，部署时会将代码自动分发到全球多个边缘节点。

3. 配置缓存策略

边缘函数和缓存策略结合使用时，可以大幅提升性能，减少重复计算的开销。缓存策略分为两种：

缓存 API 响应（Cache-Control）

我们可以通过设置 HTTP 响应头 来告诉 CDN 或代理服务器缓存某个资源的时间。

示例：缓存 API 响应

import { NextRequest, NextResponse } from 'next/server';

export const config = {
  runtime: 'edge',
};

export default async function handler(req: NextRequest) {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();

  const response = NextResponse.json(json);
  response.headers.set('Cache-Control', 'public, max-age=60, stale-while-revalidate=30');
  return response;
}

解释：

• max-age=60：表示缓存的时间为 60 秒。

• stale-while-revalidate=30：表示过期后，可以在 30 秒内使用旧缓存，直到重新验证。

这样，第一次请求数据时会返回最新的数据，后续的请求会在缓存过期前直接从 CDN 节点获取响应，避免了每次都去后端拉取数据。

静态页面缓存（Edge Cache）

对于静态页面，Next.js 允许你在生成过程中指定缓存策略，确保页面在 CDN 上缓存，从而加速页面的加载。

示例：静态页面的缓存

你可以在 getStaticProps 中加入缓存头来控制静态页面的缓存策略。

export async function getStaticProps() {
  const posts = await fetch('https://api.example.com/posts').then(res => res.json());
  return {
    props: { posts },
    revalidate: 60,  // 每 60 秒重新生成静态页面
  };
}

• Revalidate：此配置告诉 Next.js 在每隔 60 秒之后重新生成静态页面，保证页面数据的时效性。

4. 使用 Edge Functions 和缓存实现高效 SEO

通过将 SSR 和 Edge Functions 配合使用，网站能够在 首屏渲染时 获取到 SEO 优化的 HTML，并且由于使用了 边缘缓存，可以快速响应搜索引擎和用户请求。

示例：结合 Edge Function 和缓存的 SSR 页面

import { NextRequest, NextResponse } from 'next/server';

export const config = {
  runtime: 'edge',
};

export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/posts');
  const posts = await data.json();
  return { props: { posts } };
}

export default function Home({ posts }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export async function middleware(req: NextRequest) {
  const response = NextResponse.next();
  response.headers.set('Cache-Control', 'public, max-age=300, stale-while-revalidate=60');
  return response;
}

组合使用：

• Edge Function 提高页面响应速度。

• Cache-Control 设置合理缓存时间来减少请求次数，提升性能。

5. 高级应用：结合缓存和 Edge API 动态生成页面

动态生成静态内容 + 延迟缓存

比如，你可以通过设置 stale-while-revalidate 来使用缓存页面，但后台再去请求并刷新缓存。这可以在 流量高峰 时降低数据库负载。

6. 部署与监控

• Vercel：Next.js 的 Edge Functions 和 缓存控制 功能可以无缝部署到 Vercel 上，Vercel 会自动处理边缘节点的配置。

• Cloudflare Workers：如果你使用 Cloudflare，可以利用其 Workers 平台来创建边缘 API 和缓存机制。