Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=022b3097-58e7-463d-a735-df492376190a

Más velocidad de carga y mejor SEO en tus apps Blazor WebAssembly mediante prerrenderización

Imagen ornamental

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.

José María Aguilar José María atesora una amplísima experiencia trabajando en el mundo del desarrollo de software (programador, analista, responsable de informática, consultor, director técnico), principalmente con tecnologías Microsoft. Actualmente trabaja como consultor y desarrollador independiente, ofreciendo servicios tecnológicos a empresas e instituciones.
Es un reconocido experto en desarrollo web en todo el mundo, y es autor del libro de Microsoft Press "SignalR Programming in Microsoft ASP.NET".
Escribe regularmente artículos sobre ASP.NET MVC y otros temas relacionados con el desarrollo de software en su blog.
Puedes seguirlo en Twitter en @jmaguilar. Ver todos los posts de José María Aguilar

¿Te ha gustado este post?
Pues espera a ver nuestro boletín mensual...

Suscríbete a la newsletter

La mejor formación online para desarrolladores como tú

Comentarios (1) -

industriaict
industriaict

El artículo correcto en el momento adecuado. Gracias.

Responder

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.