- 1

Optimización Web con Next.js: Velocidad y Rendimiento Mejorados
01:38 - 2

Creación de Proyectos Next.js con TypeScript y App Router
10:22 - 3

Creación de Tienda Online con NextGIS y Shopify
06:42 - 4

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

Implementación de Layouts en Next.js: Globales y Locales
06:58 - 6

Navegación Optimizada con Next.js Usando el Componente Link
04:46 - 7

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

Uso de React Server Components en Next.js: Cliente vs Servidor
09:23 - 9

Arquitectura de Componentes para Landing Page en Next.js
09:13 Prueba tus conocimientos de los conceptos de Next.js
"Implementación del Edge Runtime en Next.js"
Clase 54 de 57 • Curso de Next.js 14
Contenido del curso
- 10

Implementación de CSS Modules en Next.js para Estilizar Componentes
06:46 - 11

Instalación y Configuración de Sass en Next.js
08:39 - 12

Estilos Globales con SASS para Temas Oscuros en Aplicaciones Web
04:41 - 13

Agregar Archivos Estáticos en Next.js: Imágenes y Recursos Internos
04:10 - 14

Optimización de Imágenes con Next.js: Uso de Next.Image
05:48 - 15

Optimización y Responsividad con NextImage en Next.js
09:33 - 16

Optimización de Fuentes de Google en Next.js con Roboto
04:39 - 17

Estilos Dinámicos en React con Classnames y useState
08:39 Confirma que ya sabes manejar estilos y estáticos en Next.js
- 18

Creación de Tienda en Shopify para Desarrollo con Next.js
04:18 - 19

Creación y uso de variables de entorno en Next.js
07:53 - 20

Consumo de APIs con Shopify y React Server Components
09:22 - 21

Implementación de Loader en Next.js para Carga de Productos
09:07 - 22

Implementación de Root Grouping en Next.js
06:34 - 23

Manejo de Errores en Next.js con React Error Boundary
08:19 Pon a prueba lo que aprendiste de data fetching en Next.js
- 24

Manejo de Errores y Páginas 404 en Next.js
09:17 - 25

React Server Components en Next.js: Renderizado y Optimización
10:12 - 26

Diferencias entre archivos Template y Layout en Next.js
05:57 - 27

Arquitectura Escalable para Aplicaciones de Software
08:23 - 28

Creación de APIs con Next.js y Road Handlers
07:54 - 29

Configuración y Creación de Colecciones en Shopify
05:53 - 30

Patrones de Fetching en Next.js: Secuencial y Paralelo
11:36 - 31

Filtrado Dinámico de Productos en Shopify mediante API Collections
10:36 - 32

Uso de searchParams y params en componentes React cliente-servidor
07:38 - 33

Implementación de la Vista de Producto en TypeScript y React
11:43 - 34

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

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

Redirección en Next.js: Server y Client Components
06:34 - 37

Creación de un Componente React para Sanitizar HTML
10:26 - 38

SEO Dinámico y Estático en Next.js para Mejorar Posicionamiento Web
08:51 ¡Revisa los temas avanzados de Next.js en este quiz!
- 39

Implementación de API GraphQL en Shopify para Autenticación Segura
03:48 - 40

Uso de Server Actions en Next.js para Formularios React
06:22 - 41

Implementación de Signup con GraphQL y Shopify
12:56 - 42

Implementación de Cookies de Acceso en Shopify con Next.js
11:20 - 43

Implementación de Flujo de Login con Tokens y Cookies
07:50 - 44

Validación de Access Tokens en Next.js con GraphQL y Cookies
07:51 - 45

Implementación de Carrito de Compras con React Icons
11:37 - 46

Manejo de estado global con Sustant en Next.js 13
09:34 - 47

Implementación de Carrito de Compras en JavaScript y CSS
07:55 - 48

Solución de errores de hidratación en carritos con Next.js y Shopify
12:13 - 49

Implementación de Middlewares en Next.js para Control de Acceso
08:39
¿Qué es el Edge Runtime?
El Edge Runtime es un concepto revolucionario en las aplicaciones frontend. A diferencia del entorno tradicional de Node.js, que ofrece un amplio ecosistema de JavaScript, el Edge Runtime utiliza una versión compacta del motor V8 de Chrome. Esto significa que es más ligero y está limitado en tamaño, idealmente de 1 a 4 megabytes, lo que optimiza la latencia y mejora el rendimiento. Sin embargo, al ser más reducido, cuenta con ciertas restricciones, especialmente en cuanto a APIs disponibles. Por ejemplo, el acceso al sistema de archivos no está habilitado en el Edge Runtime.
¿Cuáles son los beneficios del Edge Runtime?
- Reducción de latencia: La versión minificada del entorno V8 permite respuestas rápidas y un mejor rendimiento.
- Ejecución distribuida: Es posible repartir la aplicación entre diferentes workers y replicarla en múltiples CDNs, evitando montar varios servidores.
- Configuración ligera: Permite que tanto funciones lambda como Cloud Functions manejen el entorno, optimizando recursos.
¿Cómo implementar un endpoint con Edge Runtime en Next.js?
Para integrar el Edge Runtime en tu proyecto con Next.js, puedes comenzar creando un endpoint en la carpeta App dentro de API. Un ejemplo popular es crear un endpoint de "Salud" o "Health" para verificar si el servicio está activo. Aquí te dejo un ejemplo de implementación básica:
import { NextResponse } from 'next/server';
export async function GET() {
return NextResponse.json({ status: 'OK' });
}
export const runtime = 'edge';
En este código, NextResponse es una utilidad de Next.js construida sobre la clase Response de Node.js. El runtime edge se define para asegurar que el entorno use el Edge Runtime.
¿Cómo manejar limitaciones del Edge Runtime?
Para entender cuáles APIs y funciones están disponibles en el Edge Runtime, es recomendable buscar la documentación específica de Edge Runtime en Next.js. Algunas APIs, como la de File System, no están disponibles. Intenta siempre usar las clases por defecto del entorno Edge para evitar errores inesperados.
¿Qué hacer con funciones no soportadas?
Si intentas usar una función no soportada, por ejemplo la API del sistema de archivos, el código podría no funcionar correctamente. Aquí hay cómo típicamente se manejan estas limitaciones:
- Investiga: Verifica las APIs compatibles antes de integrar funciones específicas.
- Refactoriza: Revisa tu código para usar alternativas que se alineen con las capacidades del Edge Runtime.
¿Cómo implementar Edge Runtime en páginas dinámicas?
Para páginas específicas, especialmente aquellas con contenido dinámico que requieren baja latencia, puedes aplicar el Edge Runtime. Por ejemplo, para una página de categorías en una tienda:
- Navega a la carpeta de
Store. - En la página de
categories, en el archivopage, establece el runtime como Edge:
export const runtime = 'edge';
- Reinicia el servidor y verifica que la página se cargue correctamente.
¿Por qué la diferencia es notable en producción?
Aunque la diferencia en rendimiento puede no ser evidente en un entorno local, en producción, cuando las peticiones son numerosas, el Edge Runtime destaca por optimizar el flujo de trabajo y mejorar tiempos de respuesta. Esto es crucial para aplicaciones que manejan un alto volumen de tráfico o requieren respuestas extremadamente rápidas.
En resumen, el Edge Runtime es una herramienta poderosa para desarrolladores que buscan mejorar la performance de sus aplicaciones, ofreciendo un entorno liviano y adecuado para las demandas de la web moderna.