Una de las novedades más interesantes de Blazor 5, aparecido con .NET 5, es la posibilidad de virtualizar listas.
En las aplicaciones web suele ocurrir que tenemos un listado o una rejilla muy grandes, con muchos datos. Dado que la información debe moverse entre el servidor y el cliente (el navegador), si hay muchos datos puede suponer que la pantalla que muestra la información tarde mucho en responder y, por lo tanto, baje la usabilidad y la satisfacción de los usuarios.
La solución a estas situaciones es llevar al lado cliente tan solo la información que hace falta en cada momento, es decir, la que está visible, pero no toda. Esto es más fácil decirlo que hacerlo, ya que lograr algo así y que no se note desde el punto de vista del usuario implica hacer muchos malabarismos y, dependiendo de la técnica elegida, puede resultar muy complejo.
O al menos hasta la aparición de Blazor 5.
Con Blazor 5 o posterior tenemos una manera muy simple y rápida de conseguir virtualizar las listas: el control <Virtualize>. Gracias a este, en lugar de tener que cargar todo el contenido de los listados, conseguiremos que se cargue tan solo lo que se está visualizando en cada momento (y un poquito más, por lograr agilidad) y, además, sin que se note puesto que el listado o rejilla tendrá el mismo tamaño que si estuvieran todos los datos cargados. A medida que el usuario hace "scroll" por la página se irán cargando los nuevos datos en segundo plano cuando sea necesario visualizarlos. Todo esto de manera transparente para el usuario y el programador. Una maravilla, vamos. Ganaremos en rendimiento y los usuarios disfrutarán de una gran experiencia de usuario.
En el siguiente vídeo te cuento cómo hacerlo y verás claramente la diferencia de funcionamiento que tiene por debajo una lista enorme y otra virtualizada.
Te dejo también el código de ejemplo (244Kb) que he utilizado, en el que están la página original (/Pages/ListadoSinVirtualizar.razor) y la virtualizada (/Pages/Listado.razor), para que puedas usarlas una al lado de la otra.
¡Espero que te parezca útil!
Fecha de publicación: