Desarrollo Frontend · FRO-112

Next.js: renderizado en servidor y rutas

Componentes de servidor, rutas, caché y despliegue de una aplicación React que necesita SEO.

Próximamente Avanzado 7 módulos · 35 clases

Formato asíncrono Desarrollo Next.js, React

DESARROLLO CLOUD

Lo que aprenderás

Distinguir componentes de servidor y de cliente y decidir dónde colocar cada parte de la interfaz.
Organizar rutas, diseños anidados y estados de carga con el enrutador de aplicación de Next.js.
Obtener datos en el servidor y controlar la caché con revalidación por tiempo y por etiqueta.
Escribir acciones de servidor para mutaciones y formularios sin construir una API intermedia.
Configurar metadatos, mapa del sitio y datos estructurados para que el contenido sea indexable.
Optimizar imágenes y fuentes con los componentes propios del marco y medir el resultado.
Desplegar la aplicación con variables de entorno separadas por entorno y comprobar el registro.

Contenido del curso

7 módulos · 35 clases en vídeo · práctica guiada en cada módulo

Módulo 1 · Por qué renderizar en servidor 5 clases

Limitaciones de la aplicación de una sola página
Estrategias de renderizado y cuándo elige cada una
Crear el proyecto y recorrer su estructura
Enrutador de aplicación frente al enrutador de páginas
Primer componente de servidor

Módulo 2 · Rutas y diseños 5 clases

Rutas por sistema de ficheros y segmentos dinámicos
Diseños anidados y estado compartido entre vistas
Ficheros de carga y de error por segmento
Rutas paralelas e interceptadas
Generación de rutas estáticas conocidas

Módulo 3 · Datos y caché 5 clases

Obtener datos dentro de un componente de servidor
Caché de peticiones y deduplicación
Revalidación por tiempo y por etiqueta
Renderizado dinámico y sus disparadores
Flujo por partes con Suspense

Módulo 4 · Mutaciones 5 clases

Acciones de servidor y formularios progresivos
Validación en servidor y respuesta al cliente
Revalidar la vista tras una escritura
Estado optimista sin perder la coherencia
Cuándo sigue haciendo falta una ruta de API

Módulo 5 · Cliente cuando toca 5 clases

Marcar un componente como de cliente y su coste
Frontera entre servidor y cliente en la práctica
Interactividad, contexto y bibliotecas del navegador
Programa intermedio para redirecciones y cabeceras
Autenticación y sesión en este modelo

Módulo 6 · Visibilidad y rendimiento 5 clases

Metadatos por ruta y datos estructurados
Mapa del sitio y fichero de robots
Componente de imagen y formatos servidos
Fuentes locales sin salto de maquetación
Medir métricas de carga reales

Módulo 7 · Despliegue y cierre 5 clases

Variables de entorno por entorno de ejecución
Construcción de producción y análisis del paquete
Despliegue y comprobación posterior
Registro y diagnóstico de errores en servidor
Proyecto final: sitio de contenido indexable con área privada

Requisitos

Experiencia real desarrollando con React: componentes, estado, efectos y rutas.
Conocimiento de HTTP, caché y renderizado en servidor a nivel conceptual.
Manejo de la línea de comandos y de Node para instalar y ejecutar el proyecto.
Cuenta en algún proveedor de despliegue para la parte final, con plan gratuito suficiente.

Descripción

Una aplicación React clásica entrega al navegador una página casi vacía que se rellena con JavaScript. Para un panel interno da igual, pero para un sitio que debe aparecer en buscadores, cargar rápido con conexión lenta o mostrar contenido a quien llega desde una red social, ese modelo penaliza. Next.js traslada parte del trabajo al servidor y cambia las reglas del diseño.

El curso recorre el enrutador de aplicación con componentes de servidor: obtención de datos en el servidor, diseños anidados, estados de carga en flujo, acciones de servidor para las mutaciones y control fino de la caché con revalidación por tiempo y por etiqueta. Se trabaja también la parte que suele quedar fuera: metadatos, imágenes, fuentes y despliegue con variables de entorno.

Al terminar se dispone de una aplicación desplegada, indexable y con tiempos de carga medidos, y de criterio para decidir qué debe ejecutarse en el servidor y qué en el cliente. Encaja con los cursos de pruebas frontend y de sistemas de diseño, y con cualquier trabajo posterior sobre productos de cara al público.

¿Para quién es este curso?

Desarrolladores React que deben publicar un sitio de cara al público con requisitos de posicionamiento.
Perfiles frontend que asumen también la capa de datos y el despliegue del producto.
Equipos pequeños que quieren una única base de código para el sitio y su área privada.