讲师中心 微信公众号
AI工具推荐 视频效率加速

.NET 8 Blazor SSR 模式使用教程

雨晨姑娘_2264

雨晨姑娘_2264

发布时间:2025-12-24 05:45:36

|

413人浏览过

|

来源于php中文网

原创

Blazor SSR在.NET 8中默认启用自动混合渲染,通过@rendermode指令(如InteractiveAuto)控制组件渲染模式,并需注意预渲染阶段限制及服务端配置。

.net 8 blazor ssr 模式使用教程

Blazor SSR(Server-Side Rendering)在 .NET 8 中已正式成为默认的 Blazor 渲染模式之一,它结合了服务端快速首屏渲染与客户端交互能力,无需手动配置 SignalR 连接即可开箱即用。核心要点是:项目模板默认启用 SSR,但需明确理解其运行机制和关键配置项。

创建支持 SSR 的 Blazor 项目

使用 .NET 8 SDK 创建新项目时,选择 Blazor Web App 模板(不是旧的 “Blazor Server” 或 “Blazor WebAssembly”):

  • 命令行执行:dotnet new blazor --framework net8.0
  • 该模板默认启用“自动混合渲染”(Auto render mode),即服务端首屏 + 客户端水合(Hydration)+ 可选的 WebAssembly 回退
  • 项目结构中会包含 App.razorRoutes.razorPages/ 目录,且 Program.cs 中已注入 AddInteractiveServerComponents()AddInteractiveWebAssemblyComponents()

理解并设置组件渲染模式

每个 Razor 组件可独立指定渲染方式,通过 @rendermode 指令控制:

  • @rendermode InteractiveServer:服务端托管交互,DOM 更新通过 SignalR 实时同步(传统 Blazor Server)
  • @rendermode InteractiveWebAssembly:组件下载到浏览器后本地执行(需引用 WebAssembly 运行时)
  • @rendermode InteractiveAuto:默认推荐 —— 首屏服务端渲染,加载完成后自动切换为 WebAssembly(若可用)或回退到 Server
  • @rendermode Static:纯静态 HTML,无交互能力,适合 SEO 敏感页面(如首页介绍)

例如,在 Pages/Index.razor 顶部添加:@rendermode InteractiveAuto 即启用混合渲染。

Revealjs Presentations
Revealjs Presentations

创建、编辑并部署 reveal.js 演示文稿为单个 HTML 文件,可选自定义 CSS。适用于需要制作演示文稿、幻灯片或宣传材料时使用。

下载

启用服务端预渲染(Prerendering)

SSR 默认开启预渲染,但需确保服务端能同步生成初始 HTML:

  • 检查 Program.cs 中是否调用 builder.Services.AddRazorComponents().AddInteractiveServerComponents();
  • 确认 app.MapRazorComponents<app>().AddInteractiveServerRenderMode();</app> 已注册
  • 预渲染期间无法访问 NavigationManagerJSRuntime 等客户端专属服务,需用 @if (isPrerendering == false) 条件包裹相关逻辑
  • 如需在预渲染阶段获取数据,应使用服务端可执行的逻辑(如 HttpClient 调用 API),避免依赖浏览器环境

部署与注意事项

Blazor SSR 应用本质是服务器托管的 Web 应用,部署方式与普通 ASP.NET Core 一致:

  • 发布命令:dotnet publish -c Release -o ./publish
  • 可部署到 IIS、Linux+Nginx、Azure App Service、Docker 容器等支持 .NET 8 运行时的环境
  • 无需单独部署前端资源 —— 所有组件、静态文件、服务端逻辑打包在单一应用中
  • 注意:若使用 InteractiveAuto,需确保客户端能访问 _framework/blazor.webassembly.js(WebAssembly 模式所需),否则自动降级为 Server 模式

基本上就这些。不复杂但容易忽略的是渲染模式的显式声明和预渲染边界处理 —— 控制好这两点,SSR 就能既快又稳。

热门AI工具

更多
火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

LibLibAI
LibLibAI Hot

一款AI视频创作工具,主要用于国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达,适合需要提升相关任务效率的用户。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

相关专题

更多
nginx 重启
nginx 重启

nginx重启对于网站的运维来说是非常重要的,根据不同的需求,可以选择简单重启、平滑重启或定时重启等方式。本专题为大家提供nginx重启的相关的文章、下载、课程内容,供大家免费下载体验。

363

2023.07.27

nginx 配置详解
nginx 配置详解

Nginx的配置是指设置和调整Nginx服务器的行为和功能的过程。通过配置文件,可以定义虚拟主机、HTTP请求处理、反向代理、缓存和负载均衡等功能。Nginx的配置语法简洁而强大,允许管理员根据自己的需要进行灵活的调整。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2967

2023.08.04

nginx配置详解
nginx配置详解

NGINX与其他服务类似,因为它具有以特定格式编写的基于文本的配置文件。本专题为大家提供nginx配置相关的文章,大家可以免费学习。

5425

2023.08.04

tomcat和nginx有哪些区别
tomcat和nginx有哪些区别

tomcat和nginx的区别:1、应用领域;2、性能;3、功能;4、配置;5、安全性;6、扩展性;7、部署复杂性;8、社区支持;9、成本;10、日志管理。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

541

2024.02.23

nginx报404怎么解决
nginx报404怎么解决

当访问 nginx 网页服务器时遇到 404 错误,表明服务器无法找到请求资源,可以通过以下步骤解决:1. 检查文件是否存在且路径正确;2. 检查文件权限并更改为 644 或 755;3. 检查 nginx 配置,确保根目录设置正确、没有冲突配置等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1436

2024.07.09

Nginx报404错误解决方法
Nginx报404错误解决方法

解决方法:只需要加上这段配置:try_files $uri $uri/ /index.html;即可。想了解更多Nginx的相关内容,可以阅读本专题下面的文章。

3898

2024.08.07

nginx部署php项目教程汇总
nginx部署php项目教程汇总

本专题整合了nginx部署php项目教程汇总,阅读专题下面的文章了解更多详细内容。

102

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

397

2026.01.13

Conan私有仓库搭建教程
Conan私有仓库搭建教程

本专题系统的讲解Conan私有仓库的搭建流程,涵盖仓库服务部署、存储目录配置、用户认证、权限划分和远程地址添加,并介绍内部C++依赖包的上传、下载及版本维护方法。

0

2026.09.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Buffalo框架快速入门指南
Buffalo框架快速入门指南

共0课时 | 0人学习

Valgrind支持平台说明
Valgrind支持平台说明

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn