Blazor 是一个由 Microsoft 推出的开源 Web 框架，用于构建富客户端应用程序。与传统的 JavaScript 前端框架不同，Blazor 使用了 C# 和 .NET 运行时，允许开发者使用相同的语言和工具进行客户端和服务器端编程。
在 Blazor 中，通常情况下页面是在客户端进行渲染的。这意味着在用户访问网页时，客户端将加载框架和脚本，并通过网络请求从服务器获取数据进行渲染。这种方式在一定程度上不利于搜索引擎优化（SEO），因为搜索引擎爬虫通常无法执行 JavaScript 并获取已渲染的内容。
为了解决这个问题，Blazor 提供了服务器端预渲染的功能。预渲染是指在客户端加载前，服务器会提前进行渲染并返回 HTML 内容。这样搜索引擎就可以获取并索引网页的内容，提高了网页在搜索结果中的排名。
Blazor 提供了两种方式实现服务器端预渲染：静态和动态。
静态预渲染
静态预渲染是在构建阶段执行的，网页的内容在生成 HTML 文件时就已经渲染完成。这种方式对于内容不经常变动的网页非常适用。
要实现静态预渲染，首先要将 Blazor 应用程序发布为静态文件。可以使用 dotnet publish 命令来完成此操作。接下来，在服务器配置文件中添加以下代码：
public class Startup
{
// ...
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
// ...
if (env.IsDevelopment())
{
app.UseStaticFiles();
app.UseBlazorFrameworkFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
}
else
{
// 静态文件配置
app.UseStaticFiles();
// 添加预渲染中间件
app.UseMiddleware<PrerenderingMiddleware>();
}
// ...
}
}
在上述配置中，我们在开发环境中使用默认的 Blazor 构建流程。而在生产环境下，我们添加了静态文件中间件，并注册了 PrerenderingMiddleware，该中间件将负责执行服务器端预渲染。
静态预渲染在生产环境下会生成 HTML 文件，当用户访问网页时直接提供此文件，不需要再执行 JavaScript 逻辑。
动态预渲染
动态预渲染是在客户端请求网页时执行的，应用程序会生成一个包含预渲染内容的 HTML 页面，然后在客户端进行渲染。
要实现动态预渲染，我们需要在服务器端添加一个控制器或 Razor 页面，然后生成预渲染内容并返回给客户端。以下是一个简单的例子：
public class PrerenderingController : ControllerBase
{
private readonly IServiceProvider _serviceProvider;
public PrerenderingController(IServiceProvider serviceProvider)
{
_serviceProvider = serviceProvider;
}
public async Task<IActionResult> Index()
{
var prerenderResult = await Prerender.GetPrerenderResult(_serviceProvider);
return new ContentResult
{
Content = prerenderResult.Html,
ContentType = "text/html"
};
}
}
在上述代码中，我们使用 Prerender.GetPrerenderResult 方法来执行预渲染，并将结果作为 HTML 字符串返回给客户端。
为了使用此控制器，我们还需要在服务器端配置中添加以下代码：
public class Startup
{
// ...
public void ConfigureServices(IServiceCollection services)
{
// ...
services.AddServerSideBlazor();
services.AddSingleton<PrerenderingController>();
// ...
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
// ...
if (env.IsDevelopment())
{
app.UseStaticFiles();
app.UseBlazorFrameworkFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
}
else
{
app.UseStaticFiles();
app.Map("/prerender", prerenderApp =>
{
prerenderApp.UseMiddleware<PrerenderingMiddleware>();
prerenderApp.UseRouting();
prerenderApp.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
});
}
// ...
}
}
在上述代码中，我们首先将 PrerenderingController 注册为一个单例服务。然后通过 app.Map 方法将预渲染中间件绑定到 /prerender 路径，并注册控制器路由作为处理预渲染请求的入口点。
动态预渲染相对灵活，可以根据请求的内容来生成预渲染 HTML。这在内容经常变动的网页中非常有用，但是实时性和性能稍逊于静态预渲染。
小结
Blazor 通过服务器端预渲染提供了可选的 SEO 解决方案。无论是静态预渲染还是动态预渲染，都可以根据实际情况选择合适的方法。静态预渲染适合内容不经常变动的网页，而动态预渲染则更适用于内容经常变动的网页。通过使用 Blazor 的服务器端预渲染功能，我们可以更好地优化网页内容，提高搜索引擎的排名。
参考资料：
本文来自极简博客，作者：灵魂导师酱，转载请注明原文链接：在Blazor中实现服务端预渲染
