Toscano Digital membangun portal real estat dengan lalu lintas tinggi menggunakan Blazor dan .NET

Modernisasi untuk jutaan pengguna

Toscano Digital telah menggunakan .NET sejak tahun 2014. Pada tahun 2020, tim mengambil langkah awal menggunakan Blazor WebAssembly untuk versi kedua CRM B2B penting mereka, yang digunakan setiap hari oleh sekitar 1.000 kolaborator di seluruh jaringan Gruppo Toscano. Migrasi dari .NET Framework dan jQuery ke Web API dan Blazor WebAssembly sukses besar dan menghasilkan kecepatan fitur lebih tinggi serta pemeliharaan yang jauh lebih mudah.

Namun, ketika tiba waktunya untuk membangun kembali portal untuk publik milik grup, situs B2C tempat jutaan orang Italia mencari rumah, risikonya berubah. Situs baru perlu dioptimalkan untuk SEO karena pencarian organik adalah pendorong lalu lintas utama untuk penjualan real estat. Hal tersebut diperlukan agar situs dapat dimuat dengan cepat di perangkat seluler. Situs juga harus mampu menangani lonjakan lalu lintas yang tak terduga.

Pendekatan konvensionalnya yaitu merekrut tim front-end terpisah yang menguasai React, Next.js, atau Vue. Toscano Digital mengevaluasi opsi tersebut, tetapi CEO Pietro Montelatici memilih jalur yang berbeda. "Mengadopsi kerangka kerja JavaScript akan memecah keahlian tim kami dan membuat manajemen logika bisnis bersama menjadi lebih kompleks," jelasnya. "Untuk tim kecil seperti kami, kemampuan menggunakan bahasa yang sama di back-end sekaligus front-end merupakan pendukung produktivitas yang tiada duanya."

Tim memilih untuk berkomitmen penuh terhadap Blazor untuk CRM internal dan portal untuk publik, bertaruh bahwa kemampuan perenderan sisi server .NET 10 dapat memberikan SEO dan kinerja yang diminta situs konsumen dengan lalu lintas tinggi.

Arsitektur "Neutral SSR" untuk SEO dan kecepatan

Untuk memenuhi kebutuhan pengoptimalan mesin pencari (SEO) sekaligus mempertahankan interaktivitas kaya yang diharapkan pengguna, Toscano Digital merancang arsitektur berlapis yang menggabungkan perenderan sisi server statis dengan hidrasi WebAssembly:

• SSR Statis: Dengan render sisi server statis .NET 10, halaman dirender di server dan dikirim sebagai HTML lengkap yang dapat diindeks mesin pencari secara instan.
• Cache edge: HTML yang dirender sengaja dibuat "neutral," tanpa personalisasi khusus pengguna agar Cloudflare dapat melakukan cache di edge untuk pengiriman subdetik ke seluruh dunia. Pembersihan cache otomatis melalui GitHub Actions di setiap penyebaran.
• Hidrasi WASM: Setelah halaman awal dimuat, Blazor WebAssembly mengambil alih untuk menyediakan interaktivitas dan personalisasi. Data khusus pengguna, seperti pencarian tersimpan dan detail akun dimuat melalui API setelah render awal.

Pendekatan ini memberi Toscano Digital keuntungan dari kedua sisi: mesin pencari melihat konten yang dirender sepenuhnya, sementara pengguna mendapatkan pengalaman seperti aplikasi yang lancar setelah halaman menjadi interaktif.

PersistentComponentState: penyerahan yang disederhanakan

Salah satu aspek tersulit dari menggabungkan render sisi server dengan interaktivitas sisi klien adalah pengalihan antara keduanya. Saat Blazor WebAssembly mengambil alih dari halaman yang dirender server, status aplikasi harus berpindah dengan mulus tanpa panggilan API berulang atau kedipan yang terlihat.

Di .NET 10, Blazor memperkenalkan atribut [PersistentState] yang secara signifikan menyederhanakan proses. Bagi Toscano Digital, peningkatan ini benar-benar transformatif.

PersistentComponentState bukan sekadar fitur, melainkan memberikan landasan yang kuat dan andal untuk penyerahan dari server ke klien yang tidak dimiliki metode tradisional sehingga menjadikan Blazor sebagai pilihan yang benar-benar rasional untuk B2C berskala besar."

Atribut [PersistentState] menghilangkan kode boilerplate kompleks yang sebelumnya ditulis tim untuk mengelola transfer status secara manual. Dibandingkan pendekatan sebelumnya, model deklaratif ini memberikan mekanisme yang lebih kuat dan andal sehingga keseluruhan arsitektur jauh lebih mudah dikelola.

Penyetelan untuk "last mile" di perangkat seluler

Setelah menerapkan arsitektur inti, Toscano Digital mengalihkan fokusnya ke kinerja seluler. Desktop menunjukkan hasil yang sangat baik, dengan First Contentful Paint hanya 0,6 detik. Namun, Total Waktu Blokir pada perangkat seluler melebihi satu detik, yang disebabkan oleh fase hidrasi dan boot runtime WebAssembly.

Tim bekerja secara ekstensif untuk mengoptimalkan pengalaman, melakukan eksperimen dengan kompilasi AOT dan strategi pemangkasan assembly. Pengujian menunjukkan pertukaran yang rumit: meski kompilasi prediksi mempercepat eksekusi, kompilasi ini dapat menambah waktu penguraian awal di perangkat seluler. Toscano Digital yang bekerja langsung dengan tim teknisi Blazor Microsoft, menjelajahi strategi pemuatan tingkat lanjut, seperti menunda inisialisasi WebAssembly hingga interaksi pengguna diperlukan guna meningkatkan kinerja yang dirasakan tanpa menurunkan fungsionalitas.

Hasil berbicara. Berkat arsitektur baru ini, rata-rata waktu respons server menurun dari 200 milidetik menjadi hanya 30 milidetik, atau meningkat sebesar 85%.

Tim menyeluruh yang sebenarnya

Dengan .NET 10 dan Blazor, kami telah meruntuhkan batas antara front-end dan back-end sehingga memungkinkan tim kecil yang berisi 5 anggota mengelola produk kompleks yang berskala besar."

Bagi Montelatici, dampak terbesar pemilihan .NET terletak pada organisasi. Dengan satu bahasa dan kerangka kerja yang mencakup seluruh tumpukan, tidak ada hambatan antara pengembang yang membangun layanan back-end dan yang membuat antarmuka pengguna. Semua anggota tim yang berjumlah lima orang dapat mengerjakan bagian sistem mana pun.

Hal ini secara signifikan mengurangi beban komunikasi dan kesalahan integrasi, jenis masalah yang memperlambat tim berskala besar yang terpisah. Fitur beralih dari ide ke produksi lebih cepat, dan tim dapat memenuhi kebutuhan bisnis tanpa menunggu spesialis.

Selain C#, tim menggunakan fitur .NET, seperti Pencocokan Pola untuk mengelola logika perutean URL kompleks dan LINQ untuk manipulasi data. Montelatici menyebut keduanya sebagai sangat penting untuk menjaga kode tetap rapi dan ekspresif dalam basis kode yang besar.

Dibuat di Azure dan GitHub

Seluruh infrastruktur Toscano Digital berjalan di Microsoft Azure, termasuk App Service, Azure Functions, Azure SQL, Service Bus, Blob Storage, Logic Apps, dan Microsoft Foundry untuk menggunakan fitur yang didukung AI di CRM B2B mereka, seperti menulis ulang deskripsi properti dan menyarankan strategi komunikasi untuk agen.

Seluruh siklus hidup perangkat lunak dikelola melalui GitHub dengan GitHub Actions yang menjalankan alur CI/CD, termasuk pembersihan cache Cloudflare otomatis yang memperbarui konten cache edge setelah setiap penyebaran.

Hasil nyata

Portal baru diluncurkan pada awal Maret 2026, dan hasilnya melebihi ekspektasi:

• Waktu respons server: 200 ms → 30 ms (pengurangan 85%)
• First Contentful Paint: 0,6 detik di desktop
• Akun pengguna baru: Hampir 100.000 dibuat dalam tiga minggu pertama
• Penanganan lalu lintas: Lonjakan lalu lintas tak terduga yang dikelola tanpa hambatan melalui kombinasi Azure dan SSR

Proyek ini berhasil diumumkan selama roadshow nasional Gruppo Toscano ke lebih dari 600 anggota jaringan komersial, yang mengonfirmasi bahwa teknologi .NET siap mendukung ambisi pertumbuhan grup dan transformasi digital.

Transparansi pembangun kepercayaan

Di antara fitur portal, Area Pribadi menjadi kebanggaan utama Toscano Digital. Pelanggan dapat memantau setiap tahap proses jual beli secara real time, 24 jam sehari: statistik tampilan properti, janji temu yang dijadwalkan, prospek yang diterima, dan saluran media spesifik yang digunakan untuk memasarkan penjualan mereka.

Keunggulan .NET memungkinkan kami mengubah kompleksitas pasar real estat menjadi pengalaman pengguna yang lancar, transparan, dan cepat."

Transparansi total ini memperkuat ikatan kepercayaan antara agensi Toscano dan pelanggan sehingga mengubah investasi teknologi menjadi keunggulan kompetitif di pasar real estat Italia.