Блог

Я пытаюсь понять, как установить мое начальное состояние отдачи, все еще используя функцию ISR nextjs.

Поэтому я создал product.ts файл внутри states каталога, файл содержит следующий код

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

Я думал о том, чтобы вызвать свой api здесь и вместо установки по умолчанию в качестве пустого массива заполнить его данными из вызова api, но я уверен, что я потеряю преимущества ISR и SWR, которые приносит nextjs?

Поэтому я подумал о том, чтобы установить начальное состояние внутри метода getStaticProps

 export const getStaticProps: GetStaticProps = async () =gt; {  const res: Response = await fetch("http://127.0.0.1:8000/api/products");  const {data} = await res.json();   return {  props: {  data  },  revalidate: 10  } }  

Но это будет выполняться только один раз во время сборки, поэтому данные будут устаревшими, поэтому я сделал крюк, чтобы получить свои продукты с помощью SWR

 import useSWR from "swr"; import { baseUrl} from '../lib/fetcher'  export const useGetProducts = (path: boolean | string, options: {} = {}) =gt; {  if (!path) {  throw new Error("Path is required")  }   const url = baseUrl   path   const {data: products, error} = useSWR(url, options)   return {products, error} }  

затем это вызывается внутри компонента страницы

 const Home: NextPage = ({data}: InferGetStaticPropsTypelt;typeof getStaticPropsgt;) =gt; {  const {products, error} = useGetProducts('/api/products', {  initialData: data,  }) }  

Теперь мне просто интересно, является ли это жизнеспособным способом установить начальное состояние в отдаче без ущерба для преимуществ ISR и SWR?

исходя из vue/nuxt, я бы создал глобальный магазин, где я бы вызвал свой api и установил состояние для данных api, но, похоже, в react/recoil все немного по-другому?