.NET8 Blazor新特性 流式渲染

来源:https://www.cnblogs.com/chenyishi/archive/2023/11/19/17839086.html
-Advertisement-
Play Games

什麼是SSR Blazor中的流式渲染結合了SSR(服務端渲染),服務端將HTML拼好返回給前端,有點像我們熟知的Razor Pages 或 MVC 。 當已經有了 Razor Pages 或 MVC 時,為什麼還要選擇使用 Blazor 來實現這一點?這裡有幾個原因。 首先,Razor Pages ...


什麼是SSR

Blazor中的流式渲染結合了SSR(服務端渲染),服務端將HTML拼好返回給前端,有點像我們熟知的Razor Pages 或 MVC 。



當已經有了 Razor Pages 或 MVC 時,為什麼還要選擇使用 Blazor 來實現這一點?這裡有幾個原因。

首先,Razor Pages 和 MVC 沒有像Blazor這樣提供了很好的可重用組件。

其次,當選擇 Razor Pages 或 MVC 時,我們將被固定在SSR渲染應用程式中。

如果您想添加任何客戶端交互性,一種選擇是JS另一種選擇是Blazor。那麼為什麼不只使用 Blazor 來完成所有事情呢?

 

什麼是流式渲染

用戶常遇到長耗時的處理,比如查詢資料庫,通常的處理方式是等長耗時處理結束,再響應給瀏覽器,用戶體驗比較差。

而流式渲染將響應拆為多次。第一次響應很快返回客戶端,並使用占位符內容快速渲染整個頁面,同時執行比較耗時的非同步操作。

耗時操作完成後,新的內容將使用與前一次響應相同的連接,發送到客戶端,並更新到DOM中。

這樣用戶不需要等待耗時地操作,就可以看到一個包含占位符地頁面,可以很好地改善用戶體驗。

 

體驗Blazor流式渲染

Blazor中的流式渲染只需要在組件上添加指令@attribute [StreamRendering(true)]即可生成一個流式渲染組件。

我們可以根據VS中的Blazor Web APP模板創建一個Server渲染方式的項目

創建完後,其中的Weather組件,預設開啟了流式渲染  @attribute [StreamRendering] 。我們可以將OnInitializedAsync中的delay事件改為5000,來更明顯的體驗。

@page "/weather"
@attribute [StreamRendering]

<PageTitle>Weather</PageTitle>

<h1>Weather</h1>
......
}

@code {

    protected override async Task OnInitializedAsync()
    {
        // Simulate asynchronous loading to demonstrate streaming rendering
        await Task.Delay(5000);
        .......
    }

}

啟動後可以看到weather請求,其實是一個get請求,這裡體現了Blazor的Stream Rendering組件其實用了SSR方式。

5s後剩餘的數據在同一個連接中返回

 

誰對多次響應進行了處理

其實是blazor.web.js攔截了多次響應,並將其渲染到對應位置。想要測試的話可以嘗試刪掉App.razor中的<script src="_framework/blazor.web.js"></script>。刪掉後發現第二次響應已經渲染不了了。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 寫在前面 今天狀態很不好,我發現學這部分知識的時候,會出現溜號或者註意力無法集中的情況。 我能想到的是,大概率是這部分知識,應該是超出了我現在的水平了,也就是說我存在知識斷層了,整體感覺真的是一知半解。 那有同學會問了,那你能說明白嗎? 我理解的肯定能呀,來往下看! Flask的使用 1、消息閃現的 ...
  • rust中的枚舉有什麼用?枚舉可以嵌入類型的好處是什麼 你可以在同一個枚舉中既有單個值,也有元組或結構體。 枚舉的每個變體可以擁有不同數量和類型的關聯數據。 這增加了類型的靈活性和表達力,使你能夠更精確地建模你的數據。 我知道rust可以為枚舉創建方法,那在哪種場景下枚舉會比結構體會有優勢 表示多個 ...
  • 公眾號「架構成長指南」,專註於生產實踐、雲原生、分散式系統、大數據技術分享。 在這篇文章中,我們將通過示例來學習 Java 函數式介面。 函數式介面的特點 只包含一個抽象方法的介面稱為函數式介面。 它可以有任意數量的預設靜態方法,但只能包含一個抽象方法。它還可以聲明對象類的方法。 函數介面也稱為單一 ...
  • 大家好,我是 Java 陳序員。許可權認證是我們日常開發繞不過的話題,這是因為我們的應用程式需要防護,防止被竄入和攻擊。 在 Java 後端開發中,實現許可權認證有很多種方案可以選擇,一個攔截器、過濾器也許就可以輕鬆搞定。當然,現在也有很多成熟的框架,供我們選擇。輕量的 Shiro,Spring 家族的 ...
  • TIM輸出比較(OC): 主要功能輸出PWM波形,PWM波形是驅動電機的必要條件,所以信息TIM輸出比較就等於學習PWM CNT:計數器,計數自增,CCR:捕獲比較寄存器,程式員給定的一個值 當CNT,大於、小於、大於CCR時,輸出就會置0,置1,置0....,一個不斷跳變的pwm的波形 每個高級定 ...
  • 在今天的學習中,我們簡要瞭解了Python的控制流程,特別是if-else判斷和迴圈操作。作為有著Java開發經驗的程式員,我們跳過了一些基礎概念,著重探討if判斷和迴圈的靈活運用。Python的縮進寫法和與Java的一些語法區別都是需要註意的地方。在編寫程式時,if嵌套和迴圈是基礎結構,而設計模式... ...
  • 教程簡介 本文將簡單描述視頻網站教程,視頻網站是一個類似於騰訊視頻一樣的網站,視頻資源用戶自己上傳,然後提供友好的界面查看視頻和搜索視頻,並且提供管理頁面對於視頻進行管理,我們將使用Blazor作為前端,並且由MasaFramework作為後端框架,一般情況下我們需要做簡單的許可權管理,對於用戶登錄我 ...
  • 數據持久化 PlayerPrefs相關 PlayerPrefs是Unity游戲引擎中的一個類,用於在游戲中存儲和訪問玩家的偏好設置和數據。它可以用來保存玩家的游戲進度、設置選項、最高分數等信息。PlayerPrefs將數據存儲在本地文件中,因此可以在游戲重新啟動時保持數據的持久性。 //Player ...
一周排行
    -Advertisement-
    Play Games
  • 前言 插件化的需求主要源於對軟體架構靈活性的追求,特別是在開發大型、複雜或需要不斷更新的軟體系統時,插件化可以提高軟體系統的可擴展性、可定製性、隔離性、安全性、可維護性、模塊化、易於升級和更新以及支持第三方開發等方面的能力,從而滿足不斷變化的業務需求和技術挑戰。 一、插件化探索 在WPF中我們想要開 ...
  • 歡迎ReaLTaiizor是一個用戶友好的、以設計為中心的.NET WinForms項目控制項庫,包含廣泛的組件。您可以使用不同的主題選項對項目進行個性化設置,並自定義用戶控制項,以使您的應用程式更加專業。 項目地址:https://github.com/Taiizor/ReaLTaiizor 步驟1: ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • Channel 是乾什麼的 The System.Threading.Channels namespace provides a set of synchronization data structures for passing data between producers and consume ...
  • efcore如何優雅的實現按年分庫按月分表 介紹 本文ShardinfCore版本 本期主角: ShardingCore 一款ef-core下高性能、輕量級針對分表分庫讀寫分離的解決方案,具有零依賴、零學習成本、零業務代碼入侵適配 距離上次發文.net相關的已經有很久了,期間一直在從事java相關的 ...
  • 前言 Spacesniffer 是一個免費的文件掃描工具,通過使用樹狀圖可視化佈局,可以立即瞭解大文件夾的位置,幫助用戶處理找到這些文件夾 當前系統C盤空間 清理後系統C盤空間 下載 Spacesniffer 下載地址:https://spacesniffer.en.softonic.com/dow ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • 一、ReZero簡介 ReZero是一款.NET中間件 : 全網唯一開源界面操作就能生成API , 可以集成到任何.NET6+ API項目,無破壞性,也可讓非.NET用戶使用exe文件 免費開源:MIT最寬鬆協議 , 一直從事開源事業十年,一直堅持開源 1.1 純ReZero開發 適合.Net Co ...
  • 一:背景 1. 講故事 停了一個月沒有更新文章了,主要是忙於寫 C#內功修煉系列的PPT,現在基本上接近尾聲,可以回頭繼續更新這段時間分析dump的一些事故報告,有朋友微信上找到我,說他們的系統出現了大量的http超時,程式不響應處理了,讓我幫忙看下怎麼回事,dump也抓到了。 二:WinDbg分析 ...
  • 開始做項目管理了(本人3年java,來到這邊之後真沒想到...),天天開會溝通整理需求,他們講話的時候忙裡偷閑整理一下常用的方法,其實語言還是有共通性的,基本上看到方法名就大概能猜出來用法。出去打水的時候看到外面太陽好好,真想在外面坐著曬太陽,回來的時候好兄弟三年前送給我的鍵盤D鍵不靈了,在打"等待 ...