Al igual que ocurre con Blazor Server, cuando utilizamos Blazor WebAssembly hosteado en una aplicación ASP.NET Core, podemos usar prerrenderización, de forma que el resultado de la ejecución del componente Blazor llegue al cliente insertado directamente en la página contenedora, de forma que:
- El usuario tendrá una sensación de carga mucho más rápida, porque podrá visualizar la página completa, eliminando el clásico mensaje "Loading..." que aparece en el navegador mientras se descargan los recursos estáticos. Una vez con el contenido en el navegador, dichos recursos serán descargados y la aplicación comenzará a funcionar normalmente.
- De nuevo, facilitaremos que los motores de búsqueda puedan indexar los contenidos de nuestras páginas, al obtener por completo su contenido.
El funcionamiento es muy parecido al prerrenderizado enBlazor Server, aunque en este caso hay una diferencia importante en el hecho de que la página contenedora es un simple HTML, lo cual, a priori, limita las posibilidades de prerrenderización de los componentes en el lado servidor.
Por ello, si queremos usar prerrenderización de la aplicación Blazor WebAssembly, tendremos que seguir un procedimiento que, aunque sencillo, es algo farragoso.
En primer lugar, debemos hacer que la página index.html deje de ser la página de arranque del proyecto WebAssembly. Esto tiene sentido, pues necesitamos que la página contenedora sea procesada en el servidor para poder incluir en ella el resultado de la ejecución de los componentes Blazor.
Dicho archivo podemos eliminarlo y, en su lugar, añadir a la carpeta /Pages del proyecto ASP.NET Core un archivo _Host.cshtml que será la nueva página contenedora. El contenido de este archivo puede ser el mismo que usamos en cualquier proyecto Blazor Server, aunque será necesario hacerle algunos retoques:
-
La directiva @namespace del encabezado habrá que hacerla coincidir con el espacio de nombres exacto de la página.
@namespace MyProject.Server.Pages
-
Será necesario añadir un using para referenciar en la página el espacio de nombres donde se define el componente raíz de Blazor; normalmente, será simplemente el nombre completo del proyecto Client de la solución
@using MyProject.Client
-
En la sección <head> de la página, debemos referenciar los recursos de estilo:
<link href="css/app.css" rel="stylesheet" />
<link href="MyProject.Client.styles.css" rel="stylesheet" />
-
A continuación modificamos el modo de renderización del tag helper <component>, como sigue, para activar la prerrenderización:
<component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
-
Por último, ya en el pie de la página, debemos reemplazar el cliente JS blazor.server.js por blazor.webassembly.js.
Todavía en el proyecto Server, en el archivo Startup.cs debemos modificar el fallback para que las peticiones no sean gestionadas por index.html, sino por la página que hemos creado:
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
endpoints.MapControllers();
endpoints.MapFallbackToPage("_Host.cshtml");
});
Y ya para finalizar, debemos acudir al archivo Program.cs del proyecto Blazor WebAssembly y eliminar la línea que define el componente raíz de la aplicación, pues el tag helper que hemos colocado en la página contenedora ya se está encargando de ello:
// Eliminar la siguiente línea:
builder.RootComponents.Add<App>("#app");
¡Listo! De esta manera conseguiremos que la página inicial se renderice en el servidor y conseguirmos los beneficios de velocidad de carga inicial y SEO mencionados al principio.
Fecha de publicación: