基于React、Next.js构建双语网页翻译服务的技术方案咨询

当前方案的问题判断 #

当前采用「前端直接调用Google翻译API+逐行展示」的方案不合理，核心问题：

• 成本随用户量线性增长：Google翻译API按调用量计费，逐行请求会放大调用次数，用户规模上来后费用会快速飙升。
• 前端直接调用延迟高：无服务器环境下，前端请求受网络波动、API响应速度影响明显，用户等待体验差；升级付费版本只能缓解延迟，无法解决成本问题。

同类参考应用的核心运行逻辑 #

主流网页翻译工具的通用模式：

1. 前端仅负责渲染、交互和URL导航，不直接对接翻译API。
2. 用后端中间层（如Next.js API Routes）集中处理网页抓取、翻译请求，减少前端请求次数。
3. 引入缓存机制：将已翻译的页面内容存储到数据库（如PlanetScale），相同URL再次请求时直接返回缓存结果，避免重复调用翻译API。
4. 内容预处理：抓取网页后过滤冗余代码（脚本、样式、广告），只保留核心文本，减少翻译数据量。

可行技术方案 #

1. 优化翻译调用逻辑 #

• 放弃逐行调用，改为批量翻译：将抓取到的整段文本合并后一次性请求翻译API，大幅减少调用次数，降低成本。
• 切换低成本翻译服务：在保证质量的前提下，选用DeepL Free Tier、百度翻译开放平台等性价比更高的接口，替换Google翻译API。

2. 基于Next.js API Routes搭建中间层 #

在pages/api/translate.js中实现抓取+翻译的核心逻辑，前端仅调用该接口：

import axios from 'axios';
import cheerio from 'cheerio';
import { query } from '@/lib/planetscale'; // 封装PlanetScale操作

// 封装翻译API调用
async function translateText(text) {
  // 替换为实际翻译服务调用逻辑
  const res = await axios.post('https://api.example.com/translate', { text });
  return res.data.translated;
}

// 封装网页抓取与内容提取
async function fetchAndExtractContent(url) {
  const res = await axios.get(url);
  const $ = cheerio.load(res.data);
  // 提取核心文本标签内容
  return $('p, h1, h2, h3').map((_, el) => $(el).text()).get().join('\n');
}

export default async function handler(req, res) {
  const { url } = req.query;
  if (!url) return res.status(400).json({ error: 'URL参数必填' });

  // 先查缓存
  const cacheRes = await query('SELECT original, translated FROM translations WHERE url = ?', [url]);
  if (cacheRes.length) return res.json(cacheRes[0]);

  // 抓取并翻译
  const originalContent = await fetchAndExtractContent(url);
  const translatedContent = await translateText(originalContent);

  // 存入缓存
  await query('INSERT INTO translations (url, original, translated) VALUES (?, ?, ?)', [url, originalContent, translatedContent]);

  res.json({ original: originalContent, translated: translatedContent });
}

3. 缓存策略落地 #

• 用PlanetScale存储已翻译的URL对应内容，设置7天左右的过期时间，定期清理过期数据。
• 针对热门URL可延长缓存周期，进一步降低API调用频率。

4. 网页抓取优化 #

• 用cheerio解析HTML，只提取<p>、<h1-h6>等核心文本标签，过滤脚本、样式、广告等冗余内容。
• 处理动态渲染页面：若目标页面是SPA，使用puppeteer-core（Vercel支持无头浏览器）抓取动态内容，或直接调用页面的后端API获取原始数据。

5. 前端体验优化 #

• 实现加载状态：请求翻译时显示加载动画，避免用户误以为页面无响应。
• 分段加载：长内容页面可分段返回翻译结果，减少单次请求等待时间。
• 保留URL导航：用Next.js的useRouter监听URL变化，自动触发翻译请求。

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