Patrones de data fetching en Next.js

Curso de Next.js 14

Conceptos básicos de Next.js 14

¿Qué es Next.js y por qué aprenderlo si quieres ser frontend senior?

Arquitectura de un proyecto de Next.js

Herramientas y stack utilizado en el curso

Cómo crear rutas en Next.js

Cómo crear Layout en Next.js

Cómo funciona la navegación en Next.js

Manejo de parámetros en rutas en Next.js

React Server Components en Next.js: notación "use Client"

Creación de arquitectura de landing page en Next.js

Quiz: Conceptos básicos de Next.js 14

Manejo de estilos y estáticos en Next.js 14

CSS Modules en Next.js 13

Uso de Sass en Next.js

Cómo utilizar estilos globales en Next.js

Cómo agregar archivos estáticos en Next.js

Manejo y optimización de imágenes con Next Image

Optimización del componente image en Next.js

Optimización de fuentes con Next.js

Creando estilos dinámicos aplicando condicionales en Next.js

Quiz: Manejo de estilos y estáticos en Next.js 14

Data Fetching en Next.js

Creación de tienda de Shopify para un proyecto en Next.js

Manejo de variables de entorno en Next.js

Cómo obtener información de una API con Next.js

Manejo de estado de carga con el archivo loading.tsx

Route Grouping en Next.js

Manejo de errores en la UI con el archivo error.tsx

Quiz: Data Fetching en Next.js

Next.js Avanzado

Implementando páginas de Not Found y error global

Cómo impactan los React Server Components en un proyecto en Next.js

Cuándo utilizar layout o template en Next.js

Arquitectura profesional para data fetching en un proyecto en Next.js

Next.js para backend: manejando rutas con archivos Route Handlers

Proyecto: implementando la página de tienda

Patrones de data fetching en Next.js

Proyecto: filtrando categorías de productos

Data fetching de parámetros en el servidor y cliente

Proyecto: página de producto y arreglos en el sitio

Cómo funciona el Fetch y el Caché de Next.js

Revalidando cache con revalidateTag y revalidatePath en Next.js

Cómo hacer redirects en Next.js

Proyecto: HTML dinámico en la descripción del producto

Mejorando SEO de una página en Next.js

Quiz: Next.js Avanzado

Autenticación y autorización

Manejando autenticación y autorización con Storefront APÏ de Shopify

Server Actions en Next.js

Proyecto: proceso de Sign-Up con GraphQL

Manejo de cookies para colocar un token de acceso de un proyecto en Next.js

Cómo implementar un flujo de login en un proyecto en Next.js

Validando token de acceso de usuario en un proyecto en Next.js

Proyecto: implementando el carrito de compras

Manejo de estado global con zustand en Next.js

Proyecto: agregando items al carrito de compras

Cómo integrar el checkout de Shopify a un proyecto en Next.js

Implementar middleware en proyecto en Next.js para protección de rutas

Inteligencia Artificial

Creando componente de chatbot de ventas con la SDK IA de Vercel

Implementación de un bot de ventas en una app Next.js

Performance

Optimización de carga con parallel routing en Next.js

Análisis de bundle para Next.js 14

Quiz: Performance

Frontend Ops

Edge runtime

Despliegue de un proyecto Next.js en Vercel

Mejores prácticas en arquitecturas empresariales

Quiz: Frontend Ops

Next.js es parte de tu nuevo stack

¡Has creado un proyecto en Next.js!

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 10

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Irene De la fuente

hace 9 meses

Next.js extiende el fetch nativo para permitir configurar como se cachean y revalidan los datos. Pero no modifica en ningún momento el comportamiento de **async** y **await**. Cuando se hacen peticiones de esta forma (dentro del mismo componente): `const products = await getProducts(); ` `const collections = await getCollections();` no se están haciendo de forma paralela, se está haciendo de forma secuencial. Primero pide los productos y espera hasta que se tiene la respuesta para ejecutar la siguiente línea de código, que es donde se lanza la petición de las colecciones. Para que realmente se lancen las peticiones de forma paralela habría que utilizar un Promisse.all()

Nicolás García López

hace 4 meses

De esta manera quedaría de manera paralela: ```tsx const Store = async () => { const [products, collections] = await Promise.all([ getProducts(), getCollections() ]) console.log(collections); return ( <> <ProductsWrapper products={products} /> ) } export default Store ```

Luis Herrera

hace un mes

Que hariamos sin los resumenes de chatgpt Jajaja En Next.js, el **fetching secuencial** y **fetching paralelo** se refieren a dos enfoques diferentes para realizar solicitudes de datos desde una API u otra fuente externa durante el proceso de renderizado de una página o componente. ### 1. Fetching Secuencial El **fetching secuencial** es un enfoque en el que las solicitudes de datos se realizan una tras otra, en un orden específico. Cada solicitud espera a que la anterior se complete antes de comenzar. Esto puede ser necesario cuando las solicitudes dependen entre sí, es decir, cuando el resultado de una solicitud es necesario para realizar la siguiente. #### Ejemplo de Fetching Secuencial: #### ![](https://static.platzi.com/media/user_upload/image-daf695c4-2556-4cb6-b647-6210ae53dd50.jpg) En este ejemplo, la segunda solicitud depende del resultado de la primera. Por lo tanto, la segunda solicitud no comenzará hasta que la primera haya finalizado. ### 2. Fetching Paralelo ### El **fetching paralelo** es un enfoque en el que varias solicitudes de datos se realizan al mismo tiempo, sin esperar a que se completen las otras solicitudes. Este enfoque es más eficiente en términos de tiempo cuando las solicitudes no dependen entre sí, ya que puede reducir el tiempo total de espera. #### Ejemplo de Fetching Paralelo: ![](https://static.platzi.com/media/user_upload/image-f54af201-729e-48d5-8be3-6b91db83c449.jpg) En este ejemplo, ambas solicitudes (`fetch('https://api.example.com/data1')` y `fetch('https://api.example.com/data2')`) se inician simultáneamente. Luego, `Promise.all` espera a que ambas se completen antes de continuar. ### Comparación y Uso en Next.js * **Fetching Secuencial** es útil cuando tienes dependencias entre los datos que estás recuperando. Sin embargo, puede ser más lento si hay varias solicitudes, ya que el tiempo de espera se acumula. * **Fetching Paralelo** es ideal cuando las solicitudes no tienen dependencias entre sí y necesitas optimizar el tiempo de respuesta. Es más eficiente en términos de rendimiento, ya que todas las solicitudes se ejecutan simultáneamente. ### Uso en Next.js En Next.js, puedes aplicar ambos enfoques dependiendo de la lógica de tu aplicación. Si usas funciones como `getServerSideProps`, `getStaticProps`, o dentro de componentes, puedes optar por hacer fetching secuencial o paralelo según lo que necesites. Por ejemplo, en `getServerSideProps`: ![](https://static.platzi.com/media/user_upload/image-d250258b-7466-4e4e-8ad4-a97243e2f3c1.jpg) En este ejemplo, se realiza fetching paralelo para optimizar el tiempo de carga

Irene De la fuente

hace 9 meses

Next.js extiende el fetch nativo para permitir configurar como se cachean y revalidan los datos. Pero no modifica en ningún momento el comportamiento de **async** y **await**. Cuando se hacen peticiones de esta forma: `const products = await getProducts(); const collections = await getCollections();` no se están haciendo de forma paralela, se está haciendo de forma secuencial. Primero pide los productos y espera hasta que se tiene la respuesta para ejecutar la siguiente línea de código que es donde se lanza la petición de las colecciones. Para que realmente se lancen las peticiones de forma paralela habría que utilizar un **Promisse.all()**

Abelardo Salazar

hace 7 meses

Para evitar problems de tipadointerface SmartCollection { id: number; handle: string; title: string; description: string; image: { src: string; alt: string; }; published\_at: string; updated\_at: string; rules: { column: string; relation: string; condition: string; }\[]; disjunctive: boolean; sort\_order: string; template\_suffix: string | null; admin\_graphql\_api\_id: string;} type Collection = Pick\<SmartCollection, "id" | "handle" | "title">; ```js interface SmartCollection { id: number; handle: string; title: string; description: string; image: { src: string; alt: string; }; published_at: string; updated_at: string; rules: { column: string; relation: string; condition: string; }[]; disjunctive: boolean; sort_order: string; template_suffix: string | null; admin_graphql_api_id: string; } type Collection = Pick<SmartCollection, "id" | "handle" | "title">; ```

jzamora5

hace 7 meses

```js import Albums from './albums' async function getArtist(username: string) { const res = await fetch(`https://api.example.com/artist/${username}`) return res.json() } async function getArtistAlbums(username: string) { const res = await fetch(`https://api.example.com/artist/${username}/albums`) return res.json() } export default async function Page({ params: { username }, }: { params: { username: string } }) { // Initiate both requests in parallel const artistData = getArtist(username) const albumsData = getArtistAlbums(username) // Wait for the promises to resolve const [artist, albums] = await Promise.all([artistData, albumsData]) return ( <>

{artist.name}

<Albums list={albums}></Albums> ) } ```https://nextjs.org/docs/app/building-your-application/data-fetching/patterns Esta es la verdadera forma para hacer fetching paralelo, no el ejemplo de la clase... import Albums from './albums' async function getArtist(username: string) { const res = await fetch(`https://api.example.com/artist/${username}`) return res.json()} async function getArtistAlbums(username: string) { const res = await fetch(`https://api.example.com/artist/${username}/albums`) return res.json()} export default async function Page({ params: { username },}: { params: { username: string }}) { // Initiate both requests in parallel const artistData = getArtist(username) const albumsData = getArtistAlbums(username) // Wait for the promises to resolve const \[artist, albums] = await Promise.all(\[artistData, albumsData]) return ( <> \

{artist.name}\

\<Albums list={albums}>\</Albums> \ )}

Jorge Morales

hace 3 meses

## Patrones de fetching secuencial y paralelo en Next.js En Next.js, existen dos patrones principales para recuperar datos de forma asíncrona: fetching secuencial y fetching paralelo. **Fetching secuencial:** En el fetching secuencial, las solicitudes de datos se realizan una tras otra, en orden. Esto significa que la segunda solicitud no se iniciará hasta que la primera haya finalizado. Este patrón es útil para situaciones en las que necesitas que los datos se recuperen en un orden específico. **Fetching paralelo:** En el fetching paralelo, las solicitudes de datos se realizan simultáneamente. Esto significa que todas las solicitudes se iniciarán al mismo tiempo, y las respuestas se procesarán a medida que estén disponibles. Este patrón es útil para situaciones en las que necesitas recuperar datos de múltiples fuentes al mismo tiempo.

Alex Leonardo Rodriguez Carvajal

hace 4 meses

Tambien podriamos saltarnos el guardar los valores transformados en una variable y retornarlos directamente como resultado de el metodo .map() ```js const { smart_collections } = await response.json(); return smart_collections.map((collection: any) => ({ id: collection.id, title: collection.title, handle: collection.handle })) ```

Alex Leonardo Rodriguez Carvajal

hace 4 meses

Tambien podriamos saltarnos el guardar los valores transformados en una variable y retornarlos directamente como resultado de el metodo .map()*const* { smart\_collections } = *await* response.json(); *return* smart\_collections.map((collection: *any*) => ({ id: collection.id, title: collection.title, handle: collection.handle })) ```js const { smart_collections } = await response.json(); return smart_collections.map((collection: any) => ({ id: collection.id, title: collection.title, handle: collection.handle })) ```

Alex Leonardo Rodriguez Carvajal

hace 4 meses

Tambien podriamos directamente saltarnos el guardar la coleccion transformada en una variable y retornarla con esta sintaxis: `const ``{ smart_collections } = ``await ``response.json();` `return ``smart_collections.map((collection: ``any``) => ({` ` id: collection.id,` ` title: collection.title,` ` handle: collection.handle` `}))`