Toscano Digital 使用 Blazor 和 .NET 建置高流量房地產入口網站

為數百萬名使用者進行現代化

Toscano Digital 自 2014 年起即採用 .NET 技術。在 2020 年，團隊為其關鍵任務 B2B CRM 的第二版本，率先押注採用 Blazor WebAssembly，該系統每日由 Gruppo Toscano 網絡中約 1,000 名共同作業者使用。從 .NET Framework 與 jQuery 移轉至 Web API 與 Blazor WebAssembly 是一次重大成功，使功能開發速度更快，且維護大幅簡化。

然而，當需要重建該集團面向大眾的入口網站時，這是一個數百萬義大利人用來搜尋房屋的 B2C 網站，其重要性與挑戰截然不同。新網站需要針對 SEO 進行最佳化，因為自然搜尋是房地產列表流量的主要來源。它需要在行動裝置上快速載入。且它需應對不可預測的流量高峰。

"傳統做法通常會聘請一個專門使用 React、Next.js 或 Vue 的前端團隊。Toscano Digital 評估過這些選項，但執行長 Pietro Montelatici 看到了另一條路。

團隊決定在內部 CRM 與對外入口網站全面採用 Blazor，並押注 .NET 10 的伺服器端渲染能力，能滿足高流量消費型網站對 SEO 與效能的需求。

適用於 SEO 與速度的「中立 SSR」架構

為了在滿足搜尋引擎最佳化 (SEO) 需求的同時，保留使用者期望的豐富互動體驗，Toscano Digital 設計了一種分層架構，結合靜態伺服器端渲染與 WebAssembly 水合:

• 靜態 SSR: 使用 .NET 10 的靜態伺服器端渲染，頁面在伺服器上渲染並以完整 HTML 格式傳送，讓搜尋引擎能立即編製索引。
• 邊緣快取: 產生的 HTML 內容刻意保持「中性」，移除所有使用者個人化資訊，使 Cloudflare 能在邊緣節點進行快取，並在全球範圍內實現次秒級的傳遞速度。快取清除會在每次部署時透過 GitHub Actions 自動執行。
• WASM 水合: 初始頁面載入後，Blazor WebAssembly 會接手提供互動性與個人化。使用者特定資料，如已儲存的搜尋和帳戶詳細資料，會在初始渲染後透過 API 載入。

這種方法讓 Toscano Digital 同時獲得兩大優勢: 搜尋引擎可看到完整渲染內容，而使用者在頁面進入互動後則能享有流暢、類應用程式的體驗。

PersistentComponentState: 簡化的交接

在將伺服器端渲染與用戶端互動結合時，最具挑戰性的部分之一，是兩者之間的銜接過程。當 Blazor WebAssembly 從伺服器端渲染頁面接手時，應用程式狀態必須無縫轉移，且不能產生重複的 API 呼叫或可見的畫面閃爍。

在 .NET 10 中，Blazor 引入了 [PersistentState] 屬性，大幅簡化流程。對 Toscano Digital 而言，這項改進具有轉型性的影響。

PersistentComponentState 不僅僅是一項功能；它為伺服器與用戶端之間的交接提供了穩固且可靠的基礎，這是傳統方法所缺乏的，使 Blazor 成為高規模 B2C 應用的理性選擇。」

[PersistentState] 屬性消除了團隊先前為了手動管理狀態轉移而撰寫的複雜樣板程式碼。與他們先前的方法相比，宣告式模型提供了更穩健且可靠的機制，使整體架構更易於維護。

針對行動端「最後一哩」進行優化調整

核心架構確立後，Toscano Digital 將焦點轉向行動裝置效能。桌面端的表現相當優異，首次內容繪製僅需 0.6 秒。但在行動裝置上，總阻塞時間超過 1 秒，主要由 WebAssembly 執行階段啟動與水合過程所造成。

團隊投入大量心力優化使用體驗，嘗試 AOT 編譯與組件精簡策略。測試結果顯示存在細微的取捨: 雖然提前編譯可提升執行速度，但在行動裝置上可能增加初始解析時間。Toscano Digital 與 Microsoft 的 Blazor 工程團隊密切合作，探索進階載入策略，例如延遲 WebAssembly 初始化直到使用者互動時才啟動，以在不犧牲功能的情況下提升感知效能。

結果不言而喻。得益於新架構，伺服器平均回應時間從 200 毫秒降至僅 30 毫秒，提升了 85%。

真正的完整堆疊團隊

透過 .NET 10 與 Blazor，我們打破了前端與後端之間的界線，使一個由 5 人組成的小型團隊能夠管理大規模且複雜的產品。」

對 Montelatici 而言，選擇 .NET 帶來的最大影響是組織層面。由於整個堆疊採用單一語言與框架，後端服務開發人員與前端使用者介面開發人員之間不再存在隔閡。五人團隊中的每個人都可以參與系統的任何部分開發。

這大幅降低了溝通成本與整合錯誤，也減少了大型、分工孤立團隊常見的摩擦。功能從構想到上線的速度更快，團隊能即時回應業務需求，無需等待專家介入。

除了 C#，團隊也依賴 .NET 功能，如模式比對來管理複雜的 URL 路由邏輯，以及 LINQ 進行資料操作。Montelatici 表示，這兩者對於在大型程式碼庫中維持程式碼的整潔性與可讀性而言，都不可或缺。

建置於 Azure 和 GitHub 上

Toscano Digital 的基礎結構完全運行於 Microsoft Azure，包括 App Service、Azure Functions、Azure SQL、Service Bus、Blob Storage、Logic Apps，以及用於其 B2B CRM 中 AI 功能的 Microsoft Foundry，例如重寫房源描述與為經紀人建議溝通策略。

完整的軟體生命週期透過 GitHub 進行管理，並由 GitHub Actions 驅動 CI/CD 流程，包括每次部署後自動清除 Cloudflare 快取，以確保邊緣快取內容保持最新。

實際成效

新入口網站於 2026 年 3 月初推出，成果超出預期:

• 伺服器回應時間: 200 毫秒 → 30 毫秒 (減少 85%)
• 首次內容繪製: 桌面端 0.6 秒
• 新使用者帳戶: 前三週內建立近 100,000 個
• 流量處理: 透過 Azure 與 SSR 的結合，順利管理意外的流量尖峰

該專案在 Gruppo Toscano 的全國巡迴活動中正式亮相，向超過 600 位商業網絡成員展示，證明 .NET 技術已準備好支援集團的成長目標與數位轉型。

建立信任的透明度

在該入口網站的功能中，Toscano Digital 最引以為傲的是個人專區。客戶可以全天候 24 小時即時監控整個買賣流程的每個階段: 房產瀏覽統計資料、已安排的預約、收到的潛在客戶，以及用於推廣其房源的特定媒體通路。

.NET 的強大能力讓我們能將房地產市場的複雜性轉化為流暢、透明且快速的使用者體驗。」

這種高度透明性強化了 Toscano 各代理與客戶之間的信任關係，將技術投資轉化為義大利房地產市場中的競爭優勢。