Jotai 在 Next.js 项目中的使用指南

最新推荐文章于 2025-06-19 16:00:00 发布

伍畅晗Praised

最新推荐文章于 2025-06-19 16:00:00 发布

阅读量343

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01028/article/details/148362779

Jotai 在 Next.js 项目中的使用指南

jotai 👻 Primitive and flexible state management for React 项目地址: https://gitcode.com/gh_mirrors/jo/jotai

前言

Jotai 是一个轻量级的 React 状态管理库，以其简洁的 API 和原子化的状态管理理念受到开发者喜爱。本文将深入探讨如何在 Next.js 框架中高效使用 Jotai，解决 SSR 场景下的常见问题，并提供最佳实践方案。

状态水合（Hydration）

在服务端渲染(SSR)应用中，状态水合是一个关键环节。Jotai 提供了 useHydrateAtoms 钩子来实现这一功能：

import { useHydrateAtoms } from 'jotai/utils'

function Page({ initialCount }) {
  useHydrateAtoms([[countAtom, initialCount]])
  // 后续组件可以使用已水合的原子状态
}

这个机制确保了服务端渲染的初始状态能够平滑地传递到客户端，避免页面闪烁或状态不一致的问题。

与路由同步

在 Next.js 中，我们经常需要将状态与路由参数保持同步。Jotai 的 atomWithHash 原子可以优雅地实现这一需求：

import { atomWithHash } from 'jotai/utils'
import Router from 'next/router'

const searchAtom = atomWithHash('query', '', {
  replaceState: true,
  subscribe: (callback) => {
    const handleRouteChange = () => callback()
    Router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      Router.events.off('routeChangeComplete', handleRouteChange)
    }
  }
})

这种实现方式确保了：

URL hash 变化时原子状态自动更新
路由跳转时状态同步
浏览器历史记录操作的正确处理

Next.js 13 注意事项

在 Next.js 13 中，路由事件系统有所变化，Router.events.on() 不再暴露事件。目前建议：

设置 replaceState 选项确保浏览器后退按钮正常工作
注意页面刷新时才能获取 hash 值的限制

SSR 中的 Promise 处理

服务端渲染环境下不能直接返回 Promise，需要特殊处理：

const userDataAtom = atom(async (get) => {
  const userId = get(userIdAtom)
  
  // SSR 环境返回预取数据
  if (typeof window === 'undefined') {
    return prefetchedData[userId] || DEFAULT_DATA
  }
  
  // 客户端环境正常获取数据
  return fetchUserData(userId)
})

这种模式确保了：

服务端渲染时使用静态数据
客户端运行时动态获取最新数据
避免 Promise 在 SSR 环境中的问题

Provider 的正确使用

虽然 Jotai 支持无 Provider 模式，但在 Next.js 中推荐显式使用 Provider：

import { Provider } from 'jotai'

export default function App({ Component, pageProps }) {
  return (
    <Provider>
      <Component {...pageProps} />
    </Provider>
  )
}

这样做的好处包括：

隔离不同请求间的状态，避免安全问题
确保每个请求都有独立的状态树
便于实现请求级别的状态管理

性能优化工具

Jotai 为 Next.js 提供了 SWC 插件，可以显著提升开发体验：

自动优化原子引用
减少不必要的重新渲染
提升构建性能

实战案例

实时时钟应用

实现一个跨客户端和服务端的时钟组件：

const timeAtom = atom(new Date())

function Clock() {
  const [time, setTime] = useAtom(timeAtom)
  
  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date())
    }, 1000)
    return () => clearInterval(timer)
  }, [setTime])

  return <div>{time.toLocaleTimeString()}</div>
}

Hacker News 客户端

展示如何构建一个支持 SSR 的新闻列表：

const postsAtom = atom(async () => {
  const res = await fetch('https://hn.algolia.com/api/v1/search?query=jotai')
  return res.json()
})

function PostList() {
  const [data] = useAtom(postsAtom)
  // 渲染帖子列表
}