Introducción a Next.js y Estrategias de Renderizado
En las arquitecturas web modernas, la experiencia de usuario y la optimización para motores de búsqueda dependen críticamente de cómo y dónde se genera el código HTML. Durante años, el estándar de la industria para construir interfaces reactivas consistió en empaquetar una Single Page Application (SPA) que delegaba todo el trabajo computacional al navegador del cliente.
App Router vs. Pages Router
El sistema de enrutamiento es el corazón de cualquier aplicación web moderna. A lo largo de su historia, Next.js ha evolucionado significativamente en su enfoque para mapear archivos a rutas accesibles en el navegador. La transición desde el tradicional Pages Router (introducido en las primeras versiones de Next.js) hacia el moderno App Router (introducido a partir de Next.js 13 y consolidado como el estándar predeterminado de la industria) representa uno de los cambios de paradigma más importantes en el ecosistema de React.
Server Components vs. Client Components
Uno de los pilares arquitectónicos más potentes introducidos por Next.js en el App Router es la integración nativa de React Server Components (RSC). Este paradigma transforma la forma en que pensamos sobre el ciclo de vida de nuestros componentes, estableciendo una división clara entre el cómputo que debe ocurrir en el servidor y la interactividad que requiere ejecutarse en el navegador del cliente.
Arquitectura y Estructura de un Proyecto Next.js
Para construir aplicaciones escalables y mantenibles en Next.js, es fundamental comprender la anatomía de su sistema de archivos. A diferencia de otros entornos de desarrollo donde la estructura interna es completamente arbitraria, Next.js se basa en convenciones de nomenclatura estrictas que determinan el enrutamiento, la jerarquía de componentes y el manejo declarativo de estados de carga y error.
Slides de la semana
Diapositivas oficiales correspondientes a la Semana 9: Introducción a Next.js, Estrategias de Renderizado (CSR vs SSR), App Router, Server y Client Components, Layouts, Metadata y Navegación.