如何处理Supabase数据源下getStaticPaths的动态路由与请求限制

针对你提到的数千篇文章场景，以下是几种可行的解决方案，避免因Supabase请求限制导致静态路由生成不完整：

1. 分页批量获取Slug，突破单次请求限制 #

Supabase默认单次查询最多返回1000条数据，直接全量查询会漏掉超过1000篇的文章Slug。可以通过循环分页的方式分批获取所有已发布文章的Slug：

export const getStaticPaths: GetStaticPaths = async () => {
  let allSlugs: string[] = [];
  let lastId = 0;
  const batchSize = 1000;
  let hasMore = true;

  // 用cursor分页替代offset，提升大数据量下的查询性能
  while (hasMore) {
    const { data: posts, error } = await supabase
      .from("post")
      .select("id, slug")
      .eq("published", true)
      .gt("id", lastId)
      .order("id", { ascending: true })
      .limit(batchSize);

    if (error || !posts) {
      console.error("获取Slug失败:", error);
      hasMore = false;
      continue;
    }

    if (posts.length === 0) {
      hasMore = false;
    } else {
      lastId = posts[posts.length - 1].id;
      allSlugs = [...allSlugs, ...posts.map(post => post.slug)];
    }
  }

  const paths = allSlugs.flatMap(slug => [
    { params: { slug }, locale: "en" },
    { params: { slug }, locale: "es" }
  ]);

  // 即使部分Slug获取失败，启用fallback避免路由缺失
  return { paths, fallback: allSlugs.length > 0 ? "blocking" : false };
};

2. 切换Fallback模式，降低全量预生成压力 #

不需要在build阶段预生成所有路由，通过fallback: "blocking"让Next.js在用户首次访问未预生成的文章时，实时生成静态页面并缓存，后续访问直接复用静态文件：

export const getStaticPaths: GetStaticPaths = async () => {
  // 仅预生成最近的部分文章路由，减少build时的Supabase请求量
  const { data: recentPosts, error } = await supabase
    .from("post")
    .select("slug")
    .eq("published", true)
    .order("created_at", { ascending: false })
    .limit(200);

  if (error || !recentPosts) {
    return { paths: [], fallback: "blocking" };
  }

  const paths = recentPosts.flatMap(post => [
    { params: { slug: post.slug }, locale: "en" },
    { params: { slug: post.slug }, locale: "es" }
  ]);

  // 未预生成的路由会在访问时动态生成
  return { paths, fallback: "blocking" };
};

这种方式既避免了build阶段触发Supabase请求限制，又能保证所有文章都能正常访问，且首次访问后会转为静态缓存，不影响后续性能。

3. 预导出Slug到静态文件，彻底避免API请求限制 #

在build前通过脚本从Supabase导出所有已发布文章的Slug到本地JSON文件，build时直接读取该文件生成路由，完全绕开API请求限制：

第一步：编写导出脚本（scripts/export-slugs.js） #

import { createClient } from '@supabase/supabase-js';
import fs from 'fs/promises';
import path from 'path';

const supabase = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.SUPABASE_SERVICE_ROLE_KEY);

async function exportSlugs() {
  let allSlugs = [];
  let lastId = 0;
  const batchSize = 1000;
  let hasMore = true;

  while (hasMore) {
    const { data: posts, error } = await supabase
      .from("post")
      .select("id, slug")
      .eq("published", true)
      .gt("id", lastId)
      .order("id")
      .limit(batchSize);

    if (error) throw error;

    if (posts.length === 0) {
      hasMore = false;
    } else {
      lastId = posts[posts.length - 1].id;
      allSlugs.push(...posts.map(p => p.slug));
    }
  }

  await fs.writeFile(path.join(process.cwd(), 'public', 'slugs.json'), JSON.stringify(allSlugs));
  console.log(`已导出${allSlugs.length}个Slug`);
}

exportSlugs().catch(console.error);

第二步：在package.json中添加预build命令 #

{
  "scripts": {
    "prebuild": "node scripts/export-slugs.js",
    "build": "next build"
  }
}

第三步：修改getStaticPaths读取本地文件 #

import fs from 'fs/promises';
import path from 'path';

export const getStaticPaths: GetStaticPaths = async () => {
  const slugsPath = path.join(process.cwd(), 'public', 'slugs.json');
  const slugsData = await fs.readFile(slugsPath, 'utf8');
  const allSlugs = JSON.parse(slugsData);

  const paths = allSlugs.flatMap(slug => [
    { params: { slug }, locale: "en" },
    { params: { slug }, locale: "es" }
  ]);

  return { paths, fallback: false };
};

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