Next.js
Hydration
Jotai 使用 useHydrateAtoms
支持原子 Hydration。 hook 的文档可以在这里看到。 这里.
与路由同步
可以将 Jotai 与路由同步。 您可以使用 atomWithHash
实现这一点:
const pageAtom = atomWithHash("page", 1, {replaceState: true,subscribe: (callback) => {Router.events.on("routeChangeComplete", callback);window.addEventListener("hashchange", callback);return () => {Router.events.off("routeChangeComplete", callback);window.removeEventListener("hashchange", callback);};},});
通过这种方式,您可以完全控制要订阅的路由事件。
您不能在服务器端渲染中返回 promises
重要的是要注意,您不能使用 SSR 返回 Promise,但是,可以在原子定义中防止它。
如果可能,使用 useHydrateAtoms
来混合来自服务器的值。
const postData = atom((get) => {const id = get(postId);if (isSSR || prefetchedPostData[id]) {return prefetchedPostData[id] || EMPTY_POST_DATA;}return fetchData(id); // returns a promise});
Provider
由于 SSR 的性质,您的应用程序可以同时在 JS 内存中存在更多实例。 您需要将您的应用程序包装在一个 Provider
中(查看更多详细信息 在核心部分),以便每个实例都有自己的状态并且不会干扰以前的默认值 store(无提 provider 模式)。
SWC 插件
Jotai 在使用 Next.js 开发时提供了更好的 DX 的 SWC 插件。 在 SWC 部分找到更多信息。
示例
Clock
HN Posts
Next.js repo
npx create-next-app --example with-jotai with-jotai-app# oryarn create next-app --example with-jotai with-jotai-app
这是一个 链接.