.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
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...