有条件地判断 `.astro` 组件是否被用作路由或组件

Question

在 AstroJS 框架（https://astro.build/）中，您可以拥有作为路由的 .astro 文件，您也可以将这些文件导入到其他 astro 文件中并将它们用作组件。我看到一个问题，根据调用的

Astro.request

属性，您只允许在文件用作路由时调用它们。是否可以有条件地知道该文件是路由还是组件？

Answer 1

反应差异

我找到了一种通过查看响应来区分路由和组件的方法。原因是响应是在路由 frontmatter 的末尾和组件 frontmatter 之前发送的，这就是标头列表将具有更多条目的原因。

虽然这是可能的，但我建议通过设计区分路由和组件，例如添加具有默认值的属性，以不依赖于响应结构。此外，响应不会被子组件使用，而只能被路由使用，这使得 Astro 能够拥有优化的流响应。

参考（注意部分https://docs.astro.build/en/guides/server-side-rendering/#astrorequestheaders）

• 在路由和组件中响应日志

{
  status: 200,
  statusText: 'OK',
  headers: HeadersList {
    [Symbol(headers map)]: Map(1) { 'content-type' => 'text/html' },
    [Symbol(headers map sorted)]: null
  }
}
{
  status: 200,
  statusText: 'OK',
  headers: HeadersList {
    [Symbol(headers map)]: Map(1) { 'content-type' => 'text/html' },
    [Symbol(headers map sorted)]: Map(1) { 'content-type' => 'text/html' }
  }
}

澄清

• 说到路由，假设模式是SSR

• 不是谈论集成 API，而是谈论 SSR 组件运行时 API https://docs.astro.build/en/reference/api-reference/

• 当

  pages/404.astro

  是一个路由但也被

  pages/[...any].astro

  中的组件使用时，“.astro”文件可能既是组件又是路由

• 这种令人讨厌的情况不允许使用

  import.meta.url

  检查它所在的路径，因此即使用作另一条路线的组件，它也可能位于页面中。

请求相似度测试

• 路线 =

  [...any].astro

• 组件 =

  pages/404.astro

在每个文件中都放置了以下日志

console.log(Astro.request)
console.log(Astro.request.headers)
console.log(Astro.url)
console.log(Astro.params)
console.log(Astro.props)

• 测试是通过单个请求调用（页面加载）执行的，其中导入时首先执行 404.astro，然后执行 frontmatter 时执行 [...].astro。
• 然后将日志与 diff 工具进行比较