Svelte SSG动态路由预渲染问题求助

针对你遇到的/user/[userId]/code/[code]这类未在代码中引用、仅通过邮件跳转访问的动态参数路由预渲染问题，有以下几个可行方案：

方案一：启用预渲染 fallback 页面 #

这是最通用的解决方案，适合参数不可提前枚举的场景：

• 在svelte.config.js中配置kit.prerender.fallback: 'index.html'（文件名可自定义）
• 原理：预渲染时会生成这个fallback页面，当用户访问未提前预渲染的动态路由时，静态服务器会返回该fallback页面，随后由SvelteKit在客户端接管路由，解析URL中的userId和code参数并渲染对应页面。
• 注意：需要确保你的静态托管服务支持fallback配置，比如Netlify、Vercel默认支持；自建服务器的话，Nginx需配置try_files $uri $uri/ /index.html;这类规则。

方案二：动态枚举所有可能的路由条目（参数范围可控时） #

如果待验证的userId和code可以提前从API获取（比如拉取所有待验证用户数据），可以动态生成预渲染条目：

// svelte.config.js
import { fetchPendingVerificationEntries } from './src/lib/api.js';

export default async () => {
  // 从API获取所有待验证的用户ID和验证码组合
  const pendingEntries = await fetchPendingVerificationEntries();
  const dynamicRoutes = pendingEntries.map(item => `/user/${item.userId}/code/${item.code}`);

  return {
    kit: {
      prerender: {
        // 合并静态路由和动态生成的验证路由
        entries: [...dynamicRoutes, '/', '/dashboard', /* 其他已有静态路由 */]
      }
    }
  };
};

这个方案能完全预渲染所有可能的验证路由，无需客户端 fallback，适合参数数量较少的场景。

方案三：调整路由结构（可选简化方案） #

将嵌套参数路由改为查询参数形式，比如/verify?userId=xxx&code=xxx：

• 只需要预渲染/verify这一个路由即可，页面在客户端直接从URL查询参数中获取userId和code
• 优点：无需处理复杂的动态路由预渲染逻辑；缺点：需要修改邮件中的跳转链接格式。

额外说明 #

你的验证页面仅从URL获取参数、发起fetch请求，完全满足客户端渲染的条件，所以方案一的fallback方式不会有功能或性能问题。

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