Next.js 13 app目录下无需API调用实现增量静态再生的方案求助

问题根源 #

在App目录的静态渲染流程中，使用fetch并配置next: { revalidate: 60 }会触发增量静态生成，但Edge函数部署在Edge节点，静态生成阶段无法通过API请求调用这类端点，因此报错。旧Pages目录的getStaticProps方案在App目录不适用，需要改用以下方案：

方案1：直接调用Edge函数的核心逻辑（推荐） #

将Edge函数中的业务逻辑抽离为独立模块，在服务器组件中直接调用该模块，配合页面级ISR配置实现需求，避免通过API请求绕路。

1. 重构Edge函数代码
   把核心业务逻辑从Route Handler中抽离，保留Edge函数的API入口同时导出可复用的函数：

// app/api/myExpensiveEndpoint/route.js
// 抽离核心业务逻辑
export async function myExpensiveFunction() {
  // 这里放置原本在Edge函数中的耗时操作：数据库查询、外部API调用等
  return { posts: [{ id: 1, title: "示例文章" }] };
}

// 保留Edge函数的API入口（如果仍需对外提供接口）
export async function GET() {
  const data = await myExpensiveFunction();
  return Response.json(data);
}

2. 在服务器组件中调用并配置ISR
   在App目录的服务器组件中直接导入并调用抽离的函数，同时设置页面级的revalidate参数：

// app/page.js（或其他服务器组件）
import { myExpensiveFunction } from './api/myExpensiveEndpoint/route';

async function getPosts() {
  const data = await myExpensiveFunction();
  return data.posts;
}

export default async function Page() {
  const posts = await getPosts();
  
  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
        </article>
      ))}
    </div>
  );
}

// 配置页面级增量静态再生，每60秒重新生成
export const revalidate = 60;

方案2：动态渲染配合Edge函数调用（特殊场景） #

如果因业务限制必须通过API调用Edge函数，可将调用组件设置为动态渲染，绕过静态生成阶段的限制（但会失去静态缓存优势）：

// app/components/Posts.js
'use client'; // 标记为客户端组件

async function fetchPosts() {
  const res = await fetch(`${basePath}/api/myExpensiveEndpoint`, {
    next: { revalidate: 60 }
  });
  const data = await res.json();
  return data.posts;
}

export default async function Posts() {
  const posts = await fetchPosts();
  return <div>{posts.map(post => <div key={post.id}>{post.title}</div>)}</div>;
}

在页面组件中动态导入该客户端组件：

// app/page.js
import dynamic from 'next/dynamic';

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

export default function Page() {
  return <Posts />;
}

注意事项 #

• 抽离的核心函数需确保仅包含服务器端可执行的代码，避免使用浏览器专属API（如window）。
• 如果函数依赖Edge环境的专属API（如request.cf），需将这部分逻辑保留在Edge函数中，仅抽离无上下文依赖的业务代码。

内容的提问来源于stack exchange，提问作者Polo D. Vargas