如何在Next.js的RSC与Middleware中持久化并访问获取的数据？

针对你需要在RSC（React Server Components）和Middleware中共享用户Culture、Roles、Permissions等数据的需求，以下是几个实用的实现方案：

方案1：基于Cookie的存储与读取 #

Cookie是Middleware和RSC都能直接访问的存储介质，适合存储体积较小的用户核心数据：

• 数据写入：当初始获取用户数据后，将数据序列化为JSON字符串，写入Cookie（如果数据不需要前端修改，推荐使用HttpOnly属性提升安全性）。

  // 示例：在Server Action或API路由中写入Cookie
  import { cookies } from 'next/headers';
  
  async function setUserDataCookie(userData) {
    const serializedData = JSON.stringify(userData);
    cookies().set('user-data', serializedData, {
      httpOnly: true,
      secure: process.env.NODE_ENV === 'production',
      sameSite: 'strict',
      maxAge: 86400 // 1天过期
    });
  }
  

• Middleware中读取：直接从请求对象的cookies中获取并反序列化：

  // middleware.js
  export function middleware(request) {
    const userDataCookie = request.cookies.get('user-data');
    if (userDataCookie) {
      const userData = JSON.parse(userDataCookie.value);
      // 用userData做路由拦截、本地化等操作
      const { culture, roles } = userData;
    }
    // ...
  }
  

• RSC中读取：通过headers()获取Cookie并解析：

  // Server Component
  import { headers } from 'next/headers';
  import { parse } from 'cookie';
  
  export default async function ServerComponent() {
    const cookieHeader = headers().get('cookie');
    if (cookieHeader) {
      const cookies = parse(cookieHeader);
      const userData = JSON.parse(cookies['user-data']);
      // 使用userData渲染内容
    }
    // ...
  }
  

• 注意事项：Cookie有4KB左右的大小限制，敏感数据需加密后存储，避免前端篡改。

方案2：分布式缓存（如Redis）+ 用户标识关联 #

如果用户数据体积较大，或需要在多服务器实例间共享，推荐使用Redis这类分布式缓存：

• 数据存储：初始获取用户数据后，以用户唯一标识（如sessionId、userId）为Key，将数据存入Redis：

  // 示例：在Server Action中存储数据到Redis
  import redis from '@/lib/redis';
  
  async function cacheUserData(sessionId, userData) {
    await redis.set(`user:${sessionId}`, JSON.stringify(userData), {
      EX: 86400 // 1天过期
    });
  }
  

• Middleware中读取：从Cookie中获取用户sessionId，再查询Redis：

  // middleware.js
  import redis from '@/lib/redis';
  
  export async function middleware(request) {
    const sessionId = request.cookies.get('session-id')?.value;
    if (sessionId) {
      const userDataStr = await redis.get(`user:${sessionId}`);
      if (userDataStr) {
        const userData = JSON.parse(userDataStr);
        // 使用userData处理请求
      }
    }
    // ...
  }
  

• RSC中读取：同样通过headers获取sessionId，查询Redis：

  // Server Component
  import { headers } from 'next/headers';
  import { parse } from 'cookie';
  import redis from '@/lib/redis';
  
  export default async function ServerComponent() {
    const cookieHeader = headers().get('cookie');
    if (cookieHeader) {
      const cookies = parse(cookieHeader);
      const sessionId = cookies['session-id'];
      if (sessionId) {
        const userDataStr = await redis.get(`user:${sessionId}`);
        const userData = JSON.parse(userDataStr);
        // 使用数据渲染
      }
    }
    // ...
  }
  

• 注意事项：需确保多服务器实例连接同一个Redis集群；要设置合理的缓存过期时间，避免数据过期失效。

方案3：Session加密存储+缓存结合（生产环境推荐） #

结合加密Session和分布式缓存，兼顾安全性与扩展性：

• 步骤：
  1. 用iron-session等库将用户sessionId加密存储到Cookie，避免sessionId被篡改。
  2. 初始获取用户数据后，将数据存入Redis，Key为加密后的sessionId。
  3. Middleware和RSC先解密Session拿到有效sessionId，再查询Redis获取用户数据。
• 优势：Session本身加密，提升安全性；缓存数据不受Cookie大小限制，适合存储复杂的用户权限等信息。

客户端衔接 #

你已经在客户端用React Context管理数据，可通过以下方式同步：

• 在客户端组件中，从Server Component接收用户数据作为props，更新Context状态。
• 若需客户端更新数据，调用Server Action同步更新Cookie或缓存，再更新Context。

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