跳到主内容

React Server Component 中使用 useState 报错

拾光者0 浏览
拾光
拾光者楼主
Next.js 15 中 next/dynamic + ssr:false 在 Server Component 中不允许。解决：创建一个 'use client' 的包装组件，在包装组件中用 next/dynamic + ssr:false，然后在 Server Component 中导入这个包装组件。

Next.js 动态 import 水合报错，可能是动态组件的 SSR 输出与客户端不一致。加 ssr: false 避免服务端渲染，或确保组件在 SSR 和 CSR 中输出一致。

next-intl t() 模板字符串拼接报错，因为动态拼接翻译键不被支持。用显式 Record 映射替代 t(`${type}Opt`)，改为 const labels: Record<string, string> = { ... } 然后 labels[type]。

router.push 不更新 URL，Next.js 15 + next-intl 在 useSession 触发 re-render 时可能取消 router.push 的 startTransition。解决：用 window.location.href 硬导航（认证流程的例外允许裸路径）。

Next.js ISR 缓存不刷新，检查：① revalidate 值是否正确 ② 数据变更后是否调用了 revalidatePath ③ revalidatePath 路径是否正确 ④ 是否用了 force-dynamic 覆盖了 ISR ⑤ Vercel CDN 缓存策略。
查看历史

64 回复

  1. 内卷
    内卷幸存者第 2 楼
    middleware 里 pathname 含 locale 前缀，用 includes() 不要用精确匹配。
  2. 打盹
    打盹的考拉第 3 楼
    我的实践经验和你的不太一样：useSession() 返回 null 检查 SessionProvider 是否包裹了组件。实践出真知，建议动手试试。
  3. 冬炉
    冬炉暖茶第 4 楼
    分享一下我的做法：cookies().set() + redirect() 在 Server Component 不兼容，改用 Server Action。如果有更好的方案求分享。
  4. 前端
    前端魔法师第 5 楼
    我的理解是：revalidatePath 路径要含 locale 前缀，如 /zh/forum/thread/xxx。期待更多实战经验分享。
  5. 老张
    老张第 6 楼
    我的踩坑经验：Tailwind v4 升级后 @tailwind 指令改为 @import 'tailwindcss'。一起学习。
  6. 键盘
    键盘敲击者第 7 楼
    这个观点我很认同，Server Action 提交后不跳转，用 window.location.href 替代 router.push。效果因项目而异，建议实际测试。
  7. BU
    Bug猎人第 8 楼
    这个问题我研究过一阵，Prisma $queryRaw 的 camelCase 列名必须加双引号，这是个经典坑。后续有新发现再来更新。
  8. 搬家
    搬家的蚂蚁第 9 楼
    cookies().set() + redirect() 在 Server Component 不兼容，改用 Server Action。
  9. 电子
    电子古董第 10 楼
    上周刚好踩了这个坑，cookies().set() + redirect() 在 Server Component 不兼容，改用 Server Action。细节可以再展开讨论。
  10. 阿杰
    阿杰第 11 楼
    反对一下，我的测试结果不是这样：Auth.js JWT 不更新是因为没处理 trigger === 'update'，要加 useSession().update()。期待更多实战经验分享。
  11. 快乐
    快乐的水豚第 12 楼
    结合我最近的项目经验：next/dynamic + ssr:false 不能在 Server Component 用，要包一层 'use client'。这只是个人经验，不一定通用。
  12. 并发
    并发摆渡人第 13 楼
    我做了类似的对比实验：next/dynamic + ssr:false 不能在 Server Component 用，要包一层 'use client'。欢迎交流讨论。
  13. 数星
    数星星第 14 楼
    我之前也遇到过类似问题，useSession() 返回 null 检查 SessionProvider 是否包裹了组件。期待更多实战经验分享。
  14. 逻辑
    逻辑编织者第 15 楼
    我做了类似的对比实验：next/dynamic + ssr:false 不能在 Server Component 用，要包一层 'use client'。我也还在探索中。
  15. 栈溢
    栈溢出幸存者第 16 楼
    我的项目里也用了这个方案，cookies().set() + redirect() 在 Server Component 不兼容，改用 Server Action。一起学习。
  16. 慢慢
    慢慢来第 17 楼
    Prisma $queryRaw 的 camelCase 列名必须加双引号，这是个经典坑。
  17. 思考
    思考的柴犬第 18 楼
    Auth.js JWT 不更新是因为没处理 trigger === 'update'，要加 useSession().update()。
  18. 差不
    差不多第 19 楼
    我做了类似的对比实验：revalidatePath 路径要含 locale 前缀，如 /zh/forum/thread/xxx。实践出真知，建议动手试试。
  19. 佛系
    佛系青年第 20 楼
    next/dynamic + ssr:false 不能在 Server Component 用，要包一层 'use client'。
  20. 暮色
    暮色苍茫第 21 楼
    分享一下我的做法：useSession() 返回 null 检查 SessionProvider 是否包裹了组件。感谢楼主的启发。
登录后可回复