在Next.js中使用按需ISR是否适配我的多语言单词查询应用场景？

先明确：你当前的代码不是按需ISR #

你现在用的是fallback: "blocking"的静态生成（SSG），首次访问未预渲染的单词页面时，服务器会实时生成静态页并缓存，后续访问直接用缓存。但这不算按需ISR——按需ISR核心是可以手动触发已生成静态页的重新生成，而不仅是首次生成。

为什么你的场景适合按需ISR #

• 单词数量庞大，全量静态生成会产生数十万页面，完全不现实；
• 按需ISR能在用户首次访问某个单词时生成静态页，后续复用缓存，兼顾性能和服务器资源；
• 当数据库里的单词翻译更新时，能手动触发对应页面的重新生成，保证内容新鲜度。

如何调整为正确的按需ISR实现 #

1. 基础改造：开启增量静态再生 #

在getStaticProps中添加revalidate属性，让Next.js自动在缓存过期后尝试重新生成页面，同时保留首次访问生成静态页的逻辑：

export async function getStaticProps({ params }: GetStaticPropsContext) {
  const db = await getContainer();

  // 修复SQL注入风险：用参数化查询代替字符串拼接
  const { resources } = await db.items
    .query({
      query: "SELECT c.language, c.Translation, c.id FROM c WHERE c.PrimaryWord=@word",
      parameters: [{ name: "@word", value: params?.word }]
    })
    .fetchAll();

  return {
    props: {
      resources,
    },
    // 开启增量静态再生，缓存有效期1天（可根据需求调整）
    revalidate: 86400,
  };
}

注意：必须修复SQL注入问题，直接拼接参数会导致严重的安全漏洞。

2. 添加按需重新生成的触发能力 #

创建一个API路由（比如/api/revalidate），用来手动触发指定单词页面的重新生成：

// pages/api/revalidate.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import { revalidatePath } from 'next/cache';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  // 验证请求合法性（比如添加密钥验证，防止恶意调用）
  if (req.query.secret !== process.env.REVALIDATE_SECRET) {
    return res.status(401).json({ message: 'Invalid secret' });
  }

  const word = req.query.word as string;
  if (!word) {
    return res.status(400).json({ message: 'Word parameter required' });
  }

  try {
    // 触发对应单词页面的重新生成
    revalidatePath(`/${word}`);
    return res.json({ revalidated: true });
  } catch (err) {
    return res.status(500).json({ message: 'Revalidation failed' });
  }
}

当数据库中的单词翻译更新时，你可以调用这个API（比如在后台管理系统中操作后调用），就能让对应页面重新生成最新内容。

关于fallback: "blocking"的保留 #

你当前设置的fallback: "blocking"是合理的：首次访问未生成的单词页面时，服务器会阻塞请求直到静态页生成完成，返回的是静态内容，不会出现客户端加载状态，用户体验更好。

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