Patrones de Fetching en Next.js: Secuencial y Paralelo

Contenido del curso

Conceptos básicos de Next.js 14

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

Data Fetching en Next.js

Next.js Avanzado

Autenticación y autorización

Inteligencia Artificial

Performance

Frontend Ops

Next.js es parte de tu nuevo stack

57
Next.js: Backend y Frontend con React Server Components
01:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:35

Patrones de Fetching en Next.js: Secuencial y Paralelo

Curso de Next.js 14

Clase 30 de 57

Clase 30 / 57

Recursos

¿Cómo implementar patrones de fetching en Next.js?

Next.js ofrece poderosas herramientas para el data fetching en aplicaciones, permitiendo implementar patrones de fetching secuencial y paralelo. Estos patrones optimizan la manera en que se obtienen y manejan los datos desde múltiples servicios, mejorando la eficiencia y velocidad de tu aplicación. Aprender a usarlos adecuadamente es esencial para cualquier desarrollador web que busque mejorar el rendimiento de sus proyectos.

¿Cómo estructurar los endpoints en Next.js?

Para implementar diferentes patrones de fetching, es esencial estructurar bien los endpoints en tu proyecto Next.js. Si planeas consumir datos de más de un endpoint, se recomienda organizar tus servicios de manera que cada tema o funcionalidad tenga su propio archivo.

Por ejemplo, para trabajar con productos y colecciones de una tienda en línea utilizando la API de Shopify, puedes crear un archivo product.ts y otro collections.ts. Esto facilita el mantenimiento y actualización de los endpoints:

// collections.ts 
export async function GetCollections() {
  const collections = await fetch('https://api.shopify.com/collections');
  return collections.json();
}

// product.ts
export async function GetProducts() {
  const products = await fetch('https://api.shopify.com/products');
  return products.json();
}

¿Qué diferencias hay entre fetching paralelo y secuencial?

Fetching paralelo: Permite realizar múltiples solicitudes al mismo tiempo, sin que una dependa de la otra. Es ideal para obtener datos que no están relacionados o bloqueados entre sí, como en el caso al obtener productos y colecciones por separado. Esto mejora el tiempo de respuesta de tu aplicación.
Fetching secuencial: Las solicitudes se realizan una detrás de otra, y una no comienza hasta que otra ha terminado. Esto es útil cuando un dato depende de otro. Por ejemplo, si necesitas obtener un producto específico utilizando un ID que primero debes obtener de una lista general de productos, entonces el fetching se realizaría de manera secuencial.

¿Cómo integrar navegaciones dinámicas con datos en Next.js?

Una vez que tienes los datos listos, puedes utilizarlos para crear elementos de navegación dinámicos, como menús y listas de categorías. Una forma efectiva de hacerlo es implementando un componente de navegación usando los datos de colecciones:

import Link from 'next/link';

export default function CategoryNav({ collections }) {
    return (
        <nav>
            {collections.map(collection => (
                <Link key={collection.id} href={`/store/${collection.handle}`}>
                    {collection.title}
                </Link>
            ))}
        </nav>
    );
}

Colocar el componente de navegación en el layout general de la aplicación asegura que estará siempre disponible y no necesitas repetirlo en cada página.

¿Cuáles son las consideraciones de rendimiento en Next.js?

Next.js destaca en su manejo del fetching gracias a su sistema de caché integrado. Esto significa que si realizas la misma llamada varias veces dentro de alguna sección de tu aplicación, Next.js se encarga de cachear la respuesta y redistribuirla, sin necesidad de realizar múltiples requests a la API externa. Esto no solo reduce la carga en el servidor, sino que también mejora drásticamente el rendimiento de tu aplicación, y es una de las razones por las que es una de las frameworks más recomendadas para proyectos avanzados.

Para mantener un rendimiento óptimo:

Use el sistema de caché de Next.js de manera eficiente.
Planifica tus endpoints y utiliza fetching paralelo siempre que sea posible.
Considera movimientos dinámicos en el layout en lugar de page-level data fetching para elementos comunes en toda la aplicación.

Al aplicar estos consejos y técnicas, podrás tener aplicaciones web Next.js rápidas y eficientes, listas para escalar y satisfacer las demandas de usuarios modernos. ¡Sigue explorando y mejorando tus habilidades en React y Next.js!

Luis Herrera

Hace 2 años

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:

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:

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:

En este ejemplo, se realiza fetching paralelo para optimizar el tiempo de carga

Lizbeth Grisales

Hace un año

excelente gracias, esto es nuevo para mi 🤍

Comentarios (14)14 comentarios

Irene De la fuente

Hace 3 años

Jhojan Alberto Tobón Monsalve

Augusto Monge

Nicolás García López

Abelardo Salazar

Carlos Machado

Edmund Halley

Jhoan Stiven Zamora Caicedo

Cristian Javier Martinez Barcinilla

Lizeth Rodriguez Cabrales

Jorge Morales

Alex Leonardo Rodriguez Carvajal

Conceptos básicos de Next.js 14

Optimización Web con Next.js: Velocidad y Rendimiento Mejorados

Creación de Proyectos Next.js con TypeScript y App Router

Creación de Tienda Online con NextGIS y Shopify

Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico

Implementación de Layouts en Next.js: Globales y Locales

Navegación Optimizada con Next.js Usando el Componente Link

Rutas Dinámicas y Parámetros en Next.js: Implementación Práctica

Uso de React Server Components en Next.js: Cliente vs Servidor

Arquitectura de Componentes para Landing Page en Next.js

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

Implementación de CSS Modules en Next.js para Estilizar Componentes

Instalación y Configuración de Sass en Next.js

Estilos Globales con SASS para Temas Oscuros en Aplicaciones Web

Agregar Archivos Estáticos en Next.js: Imágenes y Recursos Internos

Optimización de Imágenes con Next.js: Uso de Next.Image

Optimización y Responsividad con NextImage en Next.js

Optimización de Fuentes de Google en Next.js con Roboto

Estilos Dinámicos en React con Classnames y useState

Data Fetching en Next.js

Creación de Tienda en Shopify para Desarrollo con Next.js

Creación y uso de variables de entorno en Next.js

Consumo de APIs con Shopify y React Server Components

Implementación de Loader en Next.js para Carga de Productos

Route Grouping en Next.js sin crear segmentos

error.tsx para manejar errores en Next.js

Next.js Avanzado

Manejo de Errores y Páginas 404 en Next.js

React Server Components en Next.js: Renderizado y Optimización

Diferencias entre archivos Template y Layout en Next.js

Arquitectura Escalable para Aplicaciones de Software

Creación de APIs con Next.js y Road Handlers

Configuración y Creación de Colecciones en Shopify

Patrones de Fetching en Next.js: Secuencial y Paralelo

Filtrar productos por colección en Shopify

params y searchParams en Next.js

Implementación de la Vista de Producto en TypeScript y React

Gestión de Caché en Next.js: Tipos y Recomendaciones Prácticas

Revalidación de Caché en Next.js: Endpoints por Tag y Path

Redirección en Next.js: Server y Client Components

Creación de un Componente React para Sanitizar HTML

SEO Dinámico y Estático en Next.js para Mejorar Posicionamiento Web

Autenticación y autorización

Implementación de API GraphQL en Shopify para Autenticación Segura

Uso de Server Actions en Next.js para Formularios React

Implementación de Signup con GraphQL y Shopify

Implementación de Cookies de Acceso en Shopify con Next.js

Implementación de Flujo de Login con Tokens y Cookies

Validación de Access Tokens en Next.js con GraphQL y Cookies

Implementación de Carrito de Compras con React Icons

Manejo de estado global con Sustant en Next.js 13

Implementación de Carrito de Compras en JavaScript y CSS

Checkout de Shopify sin errores de hidratación

Implementación de Middlewares en Next.js para Control de Acceso

Inteligencia Artificial

Implementación de Chatbots con Next.js y Vercel AI SDK

Creación de un Chatbot de Ventas con Personalidad y Contexto

Performance

Implementación de Parallel Routing en Next.js para Cargas Independientes

Analiza tu bundle en Next.js con Bundle Analyzer

Frontend Ops

"Implementación del Edge Runtime en Next.js"

Despliegue de Aplicaciones NxJS en Vercel

Arquitectura de Proyectos Next.js para Entornos Empresariales

Next.js es parte de tu nuevo stack

Next.js: Backend y Frontend con React Server Components

Patrones de Fetching en Next.js: Secuencial y Paralelo