Rendering Strategies: CSR & SSR
In modern web architectures, user experience and search engine optimization critically depend on how and where HTML code is generated. For years, the industry standard for building reactive user interfaces consisted of packaging a Single Page Application (SPA) that delegated all computational work to the client's browser.
App Router vs. Pages Router
The routing system is the core of any modern web application. Throughout its development history, Next.js has substantially evolved its approach to mapping files into accessible browser URLs. The architectural transition from the traditional Pages Router (introduced in early Next.js versions) to the modern App Router (introduced in Next.js 13 and consolidated as the industry default) represents one of the most significant paradigm shifts in the React ecosystem.
Server Components vs. Client Components
One of the most powerful architectural pillars introduced by Next.js in the App Router is native integration with React Server Components (RSC). This paradigm transforms how we conceptualize the lifecycle of our components, establishing a distinct boundary between computation that should happen on the server and interactivity that requires execution in the client browser.
Architecture & Structure in Next.js
To build scalable and maintainable applications in Next.js, understanding the anatomy of its filesystem is essential. Unlike other web development ecosystems where internal code structure is entirely arbitrary, Next.js relies on strict convention-driven naming rules that dictate routing, component nesting, and declarative handling of loading and error states.
Ejercicios: Componentes Reutilizables con DaisyUI, Tailwind & RSC
En esta guía pondrás a prueba tu capacidad para estructurar y modularizar interfaces web modernas en Next.js (App Router) mediante 20 ejercicios progresivos, utilizando Tailwind CSS y la biblioteca de componentes semánticos DaisyUI bajo la identidad visual institucional oficial de la Universidad Icesi (Manual de Marca 2026: Azul Icesi #5454e9, Morado #865cf0, Verde #4cb979, Naranja #e9683b y Amarillo #e4eb60).
Slides de la semana
Diapositivas oficiales correspondientes a la Semana 11: Introducción a Next.js, Estrategias de Renderizado (CSR vs SSR), App Router, Server y Client Components, Layouts, Metadata y Navegación.