Estoy buscando soluciones para una mejor obtención de datos en una aplicación Next.js. En esta pregunta, no solo estoy buscando una solución, estoy buscando múltiples opciones para que podamos ver los pros y los contras.
En este momento, tengo algunas páginas que incluyen un componente que muestra contenido estático y otro que tiene contenido dinámico que se obtiene de una API. Cada página hace un fetch() en su getInitialProps() para obtener sus propios datos de página, pero también los datos del pie de página, que es el mismo para todas las páginas .
Esto, por supuesto, funciona, pero hay una gran cantidad de obtención de datos duplicados. Los datos del pie de página siempre se mostrarán para todas las páginas y siempre serán los mismos. Rara vez se cambiará en la API, por lo que no es necesario volver a validar los datos.
No solo busco resolver este problema, también busco una descripción general para aprender algunas prácticas nuevas para proyectos futuros. Me gusta escribir código "obvio", por lo que no busco soluciones demasiado complicadas, como escribir en el objeto de la window etc. Se prefieren las soluciones simples con menos dependencias. El objetivo es un sitio rápido. No es tan importante reducir el uso de la red/llamadas API.
Estas son las posibles soluciones que se me ocurrieron, algo ordenadas de simples/obvias a más complejas.
getInitialProps() y agréguelo a los accesorios, de modo que los datos estén disponibles para todas las páginas.Todos estos "funcionan", pero la mayoría recuperará los datos innecesariamente y/o agregará un poco más de complejidad. Aquí están los pros/contras tal como lo veo (los números son los mismos que los anteriores):
getInitialProps() .fetch() una después de la otra (primero en _app.js para cargar el contenido del pie de página, luego en cada página para obtener contenido personalizado), por lo que es aún más lento.rel="preload" no funcionará con todos los tipos de búsqueda (por ejemplo, el cliente de Sanity que usa groq). Para no tener contenido "brillante" donde los datos se cargan después de la carga de la página inicial, debemos proporcionar useSWR() con initialData que aún requerirá que obtengamos datos en getInitialProps() , pero sería suficiente para hacer esto en el servidor lado. Podría usar el nuevo getServerSideProps() .Solución actual, utilizando la solución descrita en el punto número 2.
const HomePage = (props) => { return ( <Layout data={props.footer}> <Home data={props.page} /> </Layout> ) } // Not actual query, just sample const query = `{ "page": *[_type == "page"][0], "footer": *[_type == "footer"][0] }` HomePage.getInitialProps = async () => { const data = await client.fetch(query) return { page: data.page footer: data.footer } } export default HomePageMe encantaría tener más información sobre esto. Me estoy perdiendo algo obvio?
¡O bien! Encontré este hilo mientras buscaba otra cosa. Pero como tuve que trabajar en problemas similares, puedo darle algunas instrucciones y haré todo lo posible para que quede claro para usted.
Entonces, hay algunos datos que desea compartir en su aplicación (páginas/componentes).
_app.js en la raíz del directorio de pages . Para obtener más información, siga este enlace: https://nextjs.org/docs/advanced-features/custom-appgetInitialProps en sus páginas para obtener datos de su API, también puede usar el mismo método en _app.js . Por lo tanto, buscaría los datos que necesito para compartirlos en mi aplicación y eliminaría mis llamadas a la API.Bueno, ahora puedo pensar en dos formas de compartir los datos en mi aplicación
createContext . 1.1. Cree un DataContext usando ganchos createContext. y envuelva <Component {...pageProps} /> con su <DataContext.Provider> . Aquí hay un fragmento de código para darle una mejor pista:
<DataContext.Provider value={{ userData, footerData, etc... }}> <Component {...pageProps} /> </DataContext.Provider>1.2. Ahora, en otras páginas/componentes, puede acceder a su DataContext de la siguiente manera:
const { footerData } = useContext(DataContext);Y luego puedes hacer la manipulación en tu front-end
props usando getInitialProps 2.1. getInitialProps se usa para obtener de forma asíncrona algunos datos, que luego se completan con props . ese sería el mismo caso en _app.js .
El código en tu _app.js sería algo como esto:
function MyApp({ Component, pageProps, footerData }) { //do other stuffs return ( <Component {...pageProps} footerData={footerData} /> ; } MyApp.getInitialProps = async ({ Component, ctx }) => { const footerRes = await fetch('http://API_URL'); const footerData = await footerRes.json(); let pageProps = {}; if (Component.getInitialProps) { pageProps = await Component.getInitialProps(ctx); } return { pageProps, footerData }; }; 2.2. Ahora en sus páginas (no en sus componentes) puede acceder a accesorios, incluidos los que ha compartido desde _app.js , y puede comenzar a manipularlos.
Espero poder darte una pista y dirección. Diviértete explorando.