Cómo Usar React. Hola a todos. Gracias por acompañarme hoy. Obviamente, mi nombre es Wyatt Johnson. Soy ingeniero de software en el equipo de Next.js en Vercel.
La charla de hoy es una exploración más profunda de algunos de los cambios que hemos introducido con Next.js 16, específicamente los Componentes de Caché. Los Componentes de Caché son el futuro del enrutador de aplicaciones de Next.js que combina muchas de las características experimentales que hemos estado desarrollando en los últimos años en un solo concepto. Ahora, con una sola opción de configuración, puedes obtener las técnicas de renderizado de pre-renderizado parcial, la detección dinámica de Dynamic I.O., y las nuevas directivas de caché, como Use Cache.
Juntas, estas características pintan un futuro mucho más completo del enrutador de aplicaciones. De hecho, subí al escenario el año pasado en Next.js Conf para discutir el pre-renderizado parcial y Dynamic I.O. Queríamos que los desarrolladores entendieran el razonamiento detrás de algunas de las decisiones técnicas que tomamos, junto con proporcionar algunos ejemplos concretos de cómo Dynamic I.O. mejoró la experiencia del desarrollador. Al igual que entonces, hoy vamos a hablar sobre cómo los Componentes de Caché resuelven muchos de los problemas que los desarrolladores enfrentan hoy.
Cuando comenzamos el desarrollo del enrutador de aplicaciones, nuestro objetivo era crear una nueva forma de desarrollar aplicaciones React que ofreciera experiencias rápidas y dinámicas para sus usuarios. El Enrutador de Aplicaciones aprovechó los React Server Components para habilitar todo, desde la carga de datos co-localizados dentro de sus componentes, hasta las mutaciones de datos impulsadas por acciones del servidor. Significaba que ahora, en lugar de escribir GetStatic Props o GetServerSide Props, los desarrolladores podían simplemente escribir React.
Podían consultar sus bases de datos dentro de sus componentes, o acceder a datos de solicitud, como cookies. Next.js utilizó esta información que recopiló en tiempo de compilación para determinar si una página podía ser renderizada estáticamente, o si necesitaba renderizar cada solicitud dinámicamente. Pero, había un problema con este diseño. A medida que los desarrolladores comenzaron a construir aplicaciones cada vez más complejas, tuvieron que ser cada vez más vigilantes para asegurarse de que no introdujeran regresiones de rendimiento.
Agregar un componente a una página que accedía a datos de solicitud significaba que toda la página no podía ser renderizada estáticamente, dejando a los usuarios esperando que su página cargara. Habíamos creado un camino de montaña sin barandillas. Pequeños errores podrían resultar en grandes impactos en el rendimiento. Necesitábamos una manera de guiar a los desarrolladores para que sus aplicaciones siguieran siendo rápidas, sin sacrificar la flexibilidad que ofrece el renderizado dinámico.
Después de años de desarrollo, literalmente años, creemos que los Componentes de Caché tienen esa solución. No es solo una opción de configuración, es en realidad un nuevo modelo de programación, ya que proporciona una nueva forma para que las partes estáticas y dinámicas de tus aplicaciones React se compongan juntas. Bajo este nuevo modelo, los componentes no solo co-localizan sus datos, también co-localizan su caché. Para ayudar a los desarrolladores, Next.js ahora proporciona más retroalimentación para asegurar que estén guiados hacia la creación de la mejor versión de sus aplicaciones.
Ahora, cuando un componente intenta acceder a datos específicos de la solicitud, como cookies, Next.js produce un error de compilación si ese componente, o sus padres, no están envueltos en un límite de suspense. Esto asegura que las aplicaciones que quieren mostrar datos dinámicos aún puedan tener algo estático para enviar en la carga inicial, transmitiendo el contenido dinámico después.
Comments