Setting initial state using recoil in a nextjs app with ISR and SWR

I'm trying to figure out how to set my initial recoil state while still using nextjs`s ISR feature.

So I made a product.ts file inside of a states directory the file contains the following code

const productsState = atom({
    key: 'productState',
    default: []
})

I thought about calling my api here and instead of setting the default as an empty array have it filled with data from the api call, but I'm sure I would lose out of ISR and SWR benefits that nextjs brings?

So I thought about setting initial state inside of the getStaticProps method

export const getStaticProps: GetStaticProps = async () => {
    const res: Response = await fetch("http://127.0.0.1:8000/api/products");
    const {data} = await res.json();

    return {
        props: {
            data
        },
        revalidate: 10
    }
}

But this would only run once on build time so data would be stale, so I made a hook to get my products using SWR

import useSWR from "swr";
import { baseUrl} from '../lib/fetcher'

export const useGetProducts = (path: boolean | string, options: {} = {}) => {
    if (!path) {
        throw new Error("Path is required")
    }

    const url = baseUrl + path

    const {data: products, error} = useSWR(url, options)

    return {products, error}
}

this is then called inside of the page component

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

Now I'm just wondering if this is a viable way to set initial state in recoil without sacrificing ISR and SWR benefits?

coming from vue/nuxt I would make a global store where I would call my api and set state to the api data, but it seems in react/recoil it's a bit different?