Next.js 13 App Router：Server Component中如何存储查询参数？

方案1：服务端Session存储（适合临时跳转场景） #

Server Component无法使用客户端存储，服务端Session是最直接的临时状态保存方式，能在用户跳转前后维持参数。

具体实现： #

1. 安装轻量服务端Session库iron-session：

npm install iron-session

2. 在app/middleware.ts配置Session规则：

import { ironSession } from 'iron-session/edge'

export const middleware = ironSession({
  cookieName: 'order-session',
  password: process.env.SESSION_PASSWORD!, // 需在.env文件配置至少32位的加密密码
  cookieOptions: {
    secure: process.env.NODE_ENV === 'production', // 生产环境开启HTTPS
  },
})

export const config = {
  matcher: ['/order-details/:path*', '/order-status'], // 仅对目标页面生效
}

3. 页面A（app/order-details/page.tsx，Server Component）存储查询参数：

import { cookies } from 'next/headers'

export default async function OrderDetailsPage({
  searchParams,
}: {
  searchParams: { 'order-id': string }
}) {
  const orderId = searchParams['order-id']
  // 读取现有Session并更新订单ID
  const sessionCookie = cookies().get('order-session')
  const sessionData = sessionCookie ? JSON.parse(sessionCookie.value) : {}
  sessionData.lastOrderId = orderId

  // 写入更新后的Session
  await cookies().set('order-session', JSON.stringify(sessionData), {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'strict',
    maxAge: 86400, // 有效期1天
  })

  return (
    <div>
      <h1>订单详情：{orderId}</h1>
      <a href="/order-status">查看订单状态</a>
    </div>
  )
}

4. 页面B（app/order-status/page.tsx，Server Component）读取Session生成返回链接：

import { cookies } from 'next/headers'

export default async function OrderStatusPage() {
  const sessionCookie = cookies().get('order-session')
  const lastOrderId = sessionCookie ? JSON.parse(sessionCookie.value).lastOrderId : null

  return (
    <div>
      <h1>订单状态</h1>
      {lastOrderId && (
        <a href={`/order-details?order-id=${lastOrderId}`}>返回订单详情</a>
      )}
    </div>
  )
}

方案2：URL参数传递（轻量无依赖方案） #

如果只是临时跳转，无需持久化状态，可直接把页面A的参数带到页面B，再带回页面A，全程服务端处理，无需额外存储。

具体实现： #

1. 页面A生成跳转链接时，携带order-id到页面B的查询参数：

export default async function OrderDetailsPage({
  searchParams,
}: {
  searchParams: { 'order-id': string }
}) {
  const orderId = searchParams['order-id']

  return (
    <div>
      <h1>订单详情：{orderId}</h1>
      <a href={`/order-status?from-order=${orderId}`}>查看订单状态</a>
    </div>
  )
}

2. 页面B读取参数并生成返回页面A的链接：

export default async function OrderStatusPage({
  searchParams,
}: {
  searchParams: { 'from-order'?: string }
}) {
  const fromOrderId = searchParams['from-order']

  return (
    <div>
      <h1>订单状态</h1>
      {fromOrderId && (
        <a href={`/order-details?order-id=${fromOrderId}`}>返回订单详情</a>
      )}
    </div>
  )
}

该方案简单直接，但如果用户直接访问/order-status，则无法获取返回参数，适合固定路径的跳转场景。

方案3：服务端数据库/缓存存储（持久化场景） #

如果需要长期保存用户的订单访问记录，比如用户几天后返回仍能回到之前的订单详情，可使用数据库或缓存存储，关联用户标识（如Session ID）与订单ID。

具体实现（以Redis为例）： #

1. 安装Redis客户端：

npm install ioredis

2. 页面A将订单ID存入Redis：

import { cookies } from 'next/headers'
import Redis from 'ioredis'

const redis = new Redis(process.env.REDIS_URL!) // 配置Redis连接地址

export default async function OrderDetailsPage({
  searchParams,
}: {
  searchParams: { 'order-id': string }
}) {
  const orderId = searchParams['order-id']
  const sessionId = cookies().get('order-session')?.value || ''
  
  if (sessionId) {
    // 以Session ID为键存储订单ID，设置7天过期时间
    await redis.set(`user:${sessionId}:last-order`, orderId, 'EX', 604800)
  }

  return (
    <div>
      <h1>订单详情：{orderId}</h1>
      <a href="/order-status">查看订单状态</a>
    </div>
  )
}

3. 页面B从Redis读取订单ID：

import { cookies } from 'next/headers'
import Redis from 'ioredis'

const redis = new Redis(process.env.REDIS_URL!)

export default async function OrderStatusPage() {
  const sessionId = cookies().get('order-session')?.value || ''
  const lastOrderId = sessionId ? await redis.get(`user:${sessionId}:last-order`) : null

  return (
    <div>
      <h1>订单状态</h1>
      {lastOrderId && (
        <a href={`/order-details?order-id=${lastOrderId}`}>返回订单详情</a>
      )}
    </div>
  )
}

该方案需额外维护Redis服务，但适合需要持久化用户状态的场景。

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