Astro SSR项目运行时变量共享与本地化404跳转问题

一、实现非缓存的运行时内存变量共享 #

直接导出.ts模块变量会被Astro的模块缓存机制固化，导致后续请求无法读取最新值。以下是两种可行方案：

1. 请求级变量共享：使用Astro.locals #

如果变量是单个请求内跨组件/页面共享，推荐用Astro.locals——这是Astro为每个SSR请求提供的上下文对象，不存在缓存问题：

// 在middleware.ts中初始化（可选）
export async function middleware({ locals, next }) {
  locals.sharedData = { userId: '123', theme: 'dark' };
  return next();
}

// 在任意.astro页面中访问
---
const { sharedData } = Astro.locals;
console.log(sharedData.userId); // 每个请求都能获取最新值
---

2. 全局跨请求变量共享：单例类存储 #

如果需要跨请求共享全局状态（比如计数器、配置缓存），可以用单例类封装变量，避免模块级变量的缓存问题：

// src/lib/global-state.ts
class GlobalState {
  private store: Record<string, any> = {};

  set(key: string, value: any) {
    this.store[key] = value;
  }

  get(key: string) {
    return this.store[key];
  }
}

// 导出单例实例，确保全局唯一
export const globalState = new GlobalState();

在.astro页面中使用：

---
import { globalState } from '../lib/global-state';

// 设置变量（跨请求可见）
globalState.set('lastRequestTime', Date.now());

// 获取变量
const lastTime = globalState.get('lastRequestTime');
---
<p>上次请求时间：{new Date(lastTime).toLocaleString()}</p>

注意：如果部署时使用多进程（如PM2集群模式），单例类的状态仅在当前进程内有效，跨进程共享需要用Redis等外部存储。

二、解决多语言路径的"Headers already sent"错误 #

问题根源是：在/[lang]/docs/[slug].astro中，你可能先导入了默认语言的页面组件，Astro开始渲染并发送响应头后，再返回404，导致头已发送的错误。必须在任何渲染操作前完成文档存在性检查，具体方案如下：

方案1：使用Content Collection管理文档（推荐） #

如果用Astro的Content Collection组织多语言文档，先验证对应语言的文档是否存在，再决定渲染或返回404：

---
import { getCollection } from 'astro:content';
import { Content } from 'astro:content/components';

const { lang, slug } = Astro.params;
// 过滤对应语言和slug的文档
const matchedDocs = await getCollection('docs', ({ data, id }) => {
  // 假设文档的frontmatter里有lang字段，或id包含语言前缀
  return data.lang === lang && id.includes(slug);
});

// 文档不存在时直接返回404（此时还未发送响应头）
if (matchedDocs.length === 0) {
  return new Response('文档不存在', { status: 404 });
}

const doc = matchedDocs[0];
---
<article>
  <h1>{doc.data.title}</h1>
  <Content source={doc} />
</article>

方案2：直接检查文件系统（静态文档场景） #

如果文档是独立的.astro文件，用Node.js的文件系统API提前检查文件是否存在：

---
import fs from 'fs/promises';
import path from 'path';

const { lang, slug } = Astro.params;
// 拼接对应语言的文档路径
const docFilePath = path.join(Astro.projectRoot, `src/pages/${lang}/docs/${slug}.astro`);

try {
  // 检查文件是否存在
  await fs.access(docFilePath);
} catch {
  // 文件不存在时返回404
  return new Response('文档不存在', { status: 404 });
}

// 动态导入并渲染文档组件
const DocComponent = await import(`../${lang}/docs/${slug}.astro`);
---
<DocComponent.default />

关键：必须在组件渲染、导入默认页面之前完成存在性检查并返回404，避免响应头提前发送。

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