使用adapter-static与prerender时，如何实现SvelteKit动态路由？

1. 创建动态路由结构 #

新建路由文件 src/routes/profile/[username]/+page.svelte，将原 /profile 页面的代码迁移到这里。然后调整数据获取的参数来源：

• 原逻辑：从 $page.url.searchParams.get('username') 获取用户名
• 新逻辑：从 $page.params.username 获取用户名

示例组件代码片段：

<script>
  import { page } from '$app/stores';
  import { onMount } from 'svelte';

  let userData = null;

  onMount(async () => {
    const username = $page.params.username;
    // 调用后端API获取用户数据，保持你原来的请求逻辑
    userData = await fetch(`/api/user/${username}`).then(res => res.json());
  });
</script>

<!-- 原页面的渲染代码 -->
{#if userData}
  <h1>{userData.name}</h1>
{/if}

2. 配置页面预渲染与SSR选项 #

新建 src/routes/profile/[username]/+page.js 文件，覆盖全局预渲染配置（因为无法提前获取所有用户名，不能预渲染该页面的所有实例）：

// 禁止预渲染该页面，避免构建时尝试生成所有可能的用户页面
export const prerender = false;
// 关闭SSR，因为数据完全由客户端侧获取，无需服务器渲染
export const ssr = false;

3. 配置静态服务器路由重写 #

静态服务器默认会匹配对应路径的文件，而我们的动态页面只有 profile/[username]/+page.html，需要配置重写规则让所有 /profile/xxx 请求指向该文件，不同服务器配置示例：

• Nginx：在站点配置中添加

  location /profile/ {
      try_files $uri $uri/ /profile/[username]/+page.html;
  }
  

• Netlify：在项目根目录创建 netlify.toml

  [[redirects]]
    from = "/profile/*"
    to = "/profile/[username]/+page.html"
    status = 200
  

• Vercel：在项目根目录创建 vercel.json

  {
    "rewrites": [
      { "source": "/profile/:username", "destination": "/profile/[username]/+page.html" }
    ]
  }
  

4. 兼容旧路由（可选） #

为了让旧的 /profile?username=xxx 链接正常跳转，在原 /profile/+page.svelte 中添加重定向逻辑：

<script>
  import { page } from '$app/stores';
  import { goto } from '$app/navigation';

  $: {
    const username = $page.url.searchParams.get('username');
    if (username) {
      goto(`/profile/${username}`);
    }
  }
</script>

5. 验证部署 #

执行 npm run build 构建静态文件，部署到你的静态服务器后，访问 /profile/任意用户名 即可正常加载用户数据，不会出现404错误。

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