¡Hola!, ha pasado nuevamente un tiempo desde el último post que realice. Es esta ocasión estoy documentando lo aprendido en Blazor, que vendría a ser el ya no tan relativamente nuevo front-end framework de microsoft.
Si exacto, front-end framework, generalmente usamos esos términos para referirnos a:
Angular
AngularJS
Vue
React
Entre otros
La similitud de estos front-ends frameworks radica en la promoción de paradigmas como los de SPA's (Single Page Application), actualizaciones en tiempo real, reusabilidad de componentes y el uso de lenguajes de programación como Javascript o Typyscript.
He allí el meollo de el uso de tales frontend frameworks mencionados, desde mi punto de vista, la curva de aprendizaje tiende a ser muy difícil y como programador .NET en ocasiones uno no esta muy familiarizado con lenguajes de programación como Javascript y no se si concuerden conmigo pero ASP.NET Core esta diseñado para desarrollador aplicaciones usando en su mayoría C# y no tanto Javascript.
Aquí es donde viene Blazor al rescate, blazor esta diseñado para desarrollar el frontend con todos esos paradigmas previamente mencionados, pero, usando como lenguaje base C# y no Javascript, ojo que si es posible integrar código y libraries en js por medio de JSInterop.
Bueno sin más preámbulo empecemos, usualmente cuando uno tiene un lista muy extensa de datos por decir 1000, 2000 registros o mas, mostrar toda esa información en la vista suele ser una operación muy costosa y como programador sería lógico recurrir a paginación. Sin embargo, blazor ofrece otra opción un poco mas sencilla de implementar por medio de un componente.
Nota: Al virtualizar la data por medio de este componente solo estaremos renderizando items que estarán literalmente visibles, el resto se cargará por medio de un pseudo lazy loading... Si lo sé, suena genial :).
Mostrar 1000/2000 registros o más de forma convencional
Renderizar 1000/2000 registros o más de esta forma muy probablemente tomará cierto tiempo, para este tipo de casos implementar paginación sería una opción viable, sin embargo, nosotros somos una raza distinta :v, por ello optaremos por otra solución.
Mostrar 1000/2000 registros o más con virtualization component
De esta forma renderizaremos solos los ítems necesarios y paralelamente optimizamos la carga del listado de información.
Consideraciones:
Es necesario agregar un limite al tamaño de la tabla (CSS) y al tamaño de las filas (C#).
De ser posible limitar el número de ítems a llamar desde la base de datos para reducir la carga del back-end por la parte del cliente.
Mas Información
Espero el componente les sea útil en futuros proyectos, por mi parte, considero que es mucho más sencillo de implementar que paginación. Obviamente como todo componente tiene sus particularidades.
No se olviden de compartir y darle like al post.
¡Saludos!