在使用ISR和SWR的Next.js应用中如何设置Recoil初始状态

现有方案可行性验证 #

你当前的组合方案可以完整保留ISR和SWR的全部特性优势，不存在特性丢失的问题，逻辑合理性如下：

• ISR能力保留：你在getStaticProps中配置了revalidate: 10，并非仅构建时运行一次，Next.js生产环境会每10秒自动重新生成静态页面，首屏用户访问时直接返回最近生成的静态资源，无服务端实时请求开销，也不会出现首屏空白
• SWR能力保留：将ISR返回的静态数据作为initialData传入SWR钩子后，页面在客户端加载完成后，SWR会自动按照内置策略在后台静默拉取最新数据，自动完成缓存更新、错误重试、窗口聚焦重刷等逻辑，完全避免数据过时的问题
• 你目前缺少的一步是将SWR返回的数据同步到Recoil的atom中，补充逻辑如下：

import { useSetRecoilState, useEffect } from 'recoil'
import { productsState } from '../states/product'

const Home: NextPage = ({data}: InferGetStaticPropsType<typeof getStaticProps>) => {
    const {products, error} = useGetProducts('/api/products', {
        initialData: data,
    })
    const setProducts = useSetRecoilState(productsState)

    // 同步SWR最新数据到Recoil
    useEffect(() => {
        if (products) setProducts(products)
    }, [products, setProducts])

    // 后续业务逻辑
}

你之前考虑的「直接在atom定义处调用API设置默认值」的方案不建议使用：该请求会在代码初始化阶段触发，既不会走ISR的静态生成缓存，也不会触发SWR的更新、重试等策略，会完全丢失两个特性的优势。

如果你的项目中只有当前页面需要使用商品数据，不需要跨组件/跨页面共享状态，其实不需要同步到Recoil，直接使用SWR返回的products即可，能减少不必要的状态重复。

和Vue/Nuxt全局Store调用逻辑的差异 #

和你之前的Vue/Nuxt开发习惯确实存在差异，核心区别如下：

• Nuxt的全局状态库（Pinia/Vuex）本身和框架的SSR/SSG生命周期做了内置适配，你可以直接在Store的Action中调用接口，框架会自动处理服务端预取、客户端状态注水的逻辑
• 而Recoil是纯React生态的状态管理库，没有和Next.js的服务端生命周期做内置适配，如果直接在Recoil的atom/selector中调用接口，无法和Next.js的ISR、getStaticProps等服务端逻辑打通，也没法复用SWR的请求缓存、更新策略，因此最佳实践是将数据请求层（SWR+ISR）和状态管理层（Recoil）拆分，通过上述的同步逻辑关联即可，两边的特性都不会损失。

内容的提问来源于stack exchange，提问作者niels van hoof