Estoy usando Zustand para la gestión estatal (aunque me imagino que el mismo principio se aplica a todas las bibliotecas de gestión estatal como Redux o Recoil). He pensado y probado:
getStaticProps() y usando useEffect() para enviar los datos al estado durante el renderizado de la primera página. El problema es que los datos no se envían al estado hasta que se carga esa página específica. No quiero usar getInitialProps() , ya que está en desuso.useEffect() . De esta forma, podía llenar libremente las páginas usando los datos del estado y solo requería una llamada a la API. Ejemplo a continuación: function MyApp({ Component, pageProps }) { // Load data from api with SWR const fetcher = (url) => fetch(url).then((res) => res.json()); const { data, error } = useSWR( "https://example.com/api", fetcher ); // Get data setter from state const setData = useStore((state) => state.setData); // When data is fetched successfully, populate state with data useEffect(() => { if (data) { setData(data); } }, [data]); if (error) return "Error has occured"; if (!data) return "Loading..."; return ( <Layout> <Component {...pageProps} /> </Layout> ); } export default MyApp;¿Hay mejores formas de obtener datos y usarlos para completar el estado la primera vez que se carga la aplicación? ¿Cuáles son las mejores prácticas?
Lo hice funcionar de la manera correcta usando el proveedor de contexto Zustand e inicializándolo usando Nextjs pageProps y getStaticProps() .
_app.js
function MyApp({ Component, pageProps }) { const createStore = initStore(pageProps.initZustand); return ( <Provider createStore={createStore}> <Component {...pageProps} /> </Provider> ); } export default MyApp;tienda.js
export const { Provider, useStore } = createContext(); let store = { names: ["Name 1", "Name 2", "Name 3"], random: [], setRandom: (data) => { set((state) => ({ random: data })); }, }; export const initStore = (data) => { const createStore = () => create( devtools((set, get) => ({ ...store, ...data, })) ); return createStore; };index.js getStaticProps:
export async function getStaticProps(context) { const res = await fetch("https://jsonplaceholder.typicode.com/users"); const posts = await res.json(); return { props: { initZustand: { posts: posts, }, }, }; }