Anteriormente, abordamos cómo hacer que la aplicación sea dinámica. Sin embargo, manejar grandes volúmenes de datos puede provocar solicitudes de datos lentas, lo que afecta negativamente el rendimiento de la aplicación.

Ahora, profundicemos en estrategias para mejorar la experiencia del usuario al tratar con solicitudes de datos lentas.

Teoría

Podemos utilizar la técnica ampliamente adoptada llamada Streaming.

El streaming es una forma de enviar información en partes más pequeñas en lugar de todo de una vez. Imagínalo como dividir un largo viaje en pasos más pequeños y avanzar solo cuando estés listo. Esto ayuda a evitar retrasos y permite ver y utilizar partes de una página web sin esperar a que todo cargue.

En Next.js, existen dos formas de implementar streaming:

• Para toda la página web, se utiliza un archivo llamado loading.tsx;
• Para partes específicas de la página web, se utiliza un elemento llamado <Suspense>.

Analicemos más de cerca cómo funciona esto.

Transmisión de toda la página

Cree un archivo loading.tsx en la carpeta dashboard para añadir un cargador a toda la página del panel de control.

• loading.tsx: Archivo especial en Next.js que utiliza Suspense. Permite crear una interfaz temporal (UI de reserva) que se muestra mientras se carga el contenido principal de la página;
• Dado que el <Sidebar> es estático (no cambia), aparece de inmediato. Los usuarios pueden interactuar con él incluso mientras se carga el contenido dinámico.

¡Excelente trabajo! Acaba de utilizar streaming.

Corrección de error

El problema actual es que el cargador utilizado en el archivo loading.tsx se aplica a todas las páginas dentro de la carpeta dashboard. Sin embargo, ¿qué sucede si necesitamos elementos de interfaz específicos para cada página de la aplicación?

Para solucionar este error, se pueden implementar Route Groups. Cree una carpeta (overview) dentro del directorio dashboard y traslade allí los archivos loading.tsx y page.tsx.

De este modo, el archivo loading.tsx se aplicará exclusivamente a la página del panel de control, resolviendo el problema.

Los Grupos de Rutas nos ayudan a organizar archivos de manera ordenada sin cambiar la dirección web. Cuando creamos una carpeta con paréntesis (), el nombre de la carpeta no formará parte de la dirección web. Por ejemplo, /dashboard/(overview)/page.tsx se convierte simplemente en /dashboard.