Astro中如何正确获取带查询参数的URL？

问题原因 #

你的代码在终端打印的URL始终不变，核心原因是Astro默认的静态生成模式特性：Astro会在构建阶段预渲染页面，Astro.request.url只会在这个阶段执行一次，记录下构建时的初始URL。当你在浏览器中添加查询参数访问时，页面是客户端路由跳转，不会触发服务器端代码重新运行，所以终端里的日志不会更新。

解决方案 #

方案1：客户端处理查询参数（静态站点首选）

如果你的站点不需要服务器端动态逻辑，直接在客户端JS里获取当前URL的查询参数即可，代码示例：

// 放在页面的<script>标签中，或者添加client:load指令确保客户端执行
if (typeof window !== 'undefined') {
  const url = new URL(window.location.href);
  for (const [key, value] of url.searchParams) {
    console.log(`${key}: ${value}`);
  }
}

方案2：启用服务器端渲染（SSR）（动态场景适用）

如果必须在服务器端处理查询参数，需要把站点改成SSR模式：

1. 修改astro.config.mjs配置文件，设置输出模式为server：

import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'server',
});

2. 切换到SSR模式后，每次用户请求页面时，服务器都会重新执行页面中的代码，Astro.request.url会实时返回带查询参数的完整URL，终端日志也会同步更新。

注意事项 #

• 启用SSR后，站点无法直接部署为静态文件，需要部署到支持Node.js的服务器环境。
• 仅前端过滤内容的场景，优先用客户端方案，更轻量化且无需额外部署成本。

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