Next.js 怎么优雅地跟后端交互？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 600 天前的主题，其中的信息可能已经有所发展或是发生改变。

学了两天 Next.js 14 ，发现有几个疑问。

我有一个现成的使用 HTTP-Only Cookies 方式校验的后端网关，后面有几个微服务，后端拦截器会校验的每一次请求的携带的 Cookies ，不合法返回 401 错误。

问题来了，Next.js 怎么跟这样的后端交互呢？

1.如果全部都用 Client Component ，发请求什么的还是用 useEffect ，是不是就是 React 一样了？

2.如果用 Server Component 怎么办呢？ Server Component 是 Node.js 环境，感觉估计处理不了这种情况。

3.如果使用 Server Component ，再使用 Next.js 自带的 API Route ，写一个登录 API ，把登录逻辑再写一遍，设置 HTTP-Only Cookies 这一步放到 Next.js 是否可行？感觉这样影响了现成的后端服务独立性。

4.如果后端大改，改成 JWT 验证，但是 Login 组件是个 Client Component ，其他的 Server Component 怎么拿到 JWT 呢?

感觉有点迷，有最好的方法吗？

component

后端

Server

4 条回复 2024-02-17 20:07:27 +08:00

darlingsingera

2024-02-17 14:05:57 +08:00

1 、如果全部用 Client Component ，就还用 useEffect ，和用 React 写 SPA 一样，cookie 会自动携带
2 、在 Server Component 中可以获取浏览器 cookie ，并在服务端发起请求携带这个 cookie ，获取方法详见 https://nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options
3 、这样做不现实
4 、参见 2
实际 1 和 2 是可以混用的

importmeta

2024-02-17 15:03:01 +08:00

@darlingsingera 感谢。

stimw

2024-02-17 18:45:07 +08:00 via Android

准确来说是 server action ，无论是 client 还是 server component 都可以使用 server action 。

importmeta

2024-02-17 20:07:27 +08:00

@stimw 有帮助，感谢，看了看可以在 Client Component 调用 Server Action 。