NextJS 14中router.refresh()未发送更新后的Cookie至服务器

概述 #

• 在Server Component中利用Cookie数据修改fetch请求
• 在Client Component中通过js-cookie库修改Cookie状态
• 修改Cookie状态后，在Client Component中调用router.refresh()
• 发现更新后的Cookie并未在请求头中发送至服务器，服务器接收到的仍是修改前的旧Cookie状态

预期行为 #

调用router.refresh()时，请求头应当携带浏览器当前最新的Cookie状态

简化示例代码 #

Context Provider 代码 #

export function SelectedVehicleContextProvider({ children }: { children: ReactNode }) {
/*...*/

  // 选中新车辆时，将其持久化到Cookie
  useEffect(() => {
    if (selectedVehicle) {
      const selectedVehicleString = JSON.stringify(selectedVehicle)
      Cookies.set('selectedVehicle', selectedVehicleString, { expires: 365 })
    } else {
      Cookies.remove('selectedVehicle')
    }
  }, [selectedVehicle])

/*...*/
}

使用该Provider的Client Component 代码 #

export default function VehicleSelector({ onVehicleSelect }: { onVehicleSelect?: () => void }) {
/*...*/

      setSelectedVehicle(selectedVehicleData)

      router.refresh()


/*...*/
}

执行上述代码后，router.refresh()会触发RSC请求至服务器，但查看请求头可发现，Cookie值仍为修改前的旧状态。

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