Blazor vs React: Эдгээр .NET архитектор нь эцэст нь хуудсыг сонгоно

Blazor vs. React нь .NET хөгжүүлэгчдийн бүх зүйл юм. Blazor нь JavaScript-ийг өөрчлөн C#-тэй интерактив вэб интерфэйс үүсгэх боломжийг олгодог. Хэрэв та .NET хөгжүүлэгч юм бол энэ нь нэг хэл, нэг экосистем, энэ хавтгай дөрөвдүгээр сард ашиглахын тулд ямар нэг улсын удирдлагын библиотек талаар маш бага экзистенцийн криз гэж нэрлэдэг. Энэ нь .NET-ийн хөгжүүлэгчдийн бүх зүйл юм. Blazor нь JavaScript-ийг өөрчлөн C#-тэй интерактив вэб интерфэйс үүсгэх боломжийг олгодог. Хэрэв та .NET-ийн хөгжүүлэгч юм бол энэ нь нэг хэл, нэг экосистем, энэ хавтгай дөрөвдүгээр сард ашиглахын тулд ямар нэг улсын удирдлагын библиотек талаар маш бага экзистенцийн криз гэж нэрлэдэг. Blazor vs React Тавтай морилно уу Блэзэн ямар ч зүйл юм? Асуулт React Code Comparison: React vs Blazor Хэрэв Blazor миний хувьд ажилладаг Blazor's Evolution: .NET 8, 9 болон 10 React одоо ч ач холбогдолтой байна Blazor нь эхлэх FAQ: Хэвлэсэн асуултууд Өнгөрсөн дуудлага Би 2009-ээс хойш JavaScript-ийг бичдэг бөгөөд jQuery 1.3 нь масны шиг мэдэгдэж байгаа. Би frameworks-ийг empires-ийг харах. Backbone, Angular, React, одоо би Signals-ийг мэдэгдэж байх ёстой уу? Би масны илгээсэн байна. Тавтай морилно уу, тавтай морилно уу. node_modules Бидний 3-р хоорондоо 800MB-аас дээш хувилбар, би үүнийг асуултанд эхэлсэн: node_modules Хэрэв бусад арга бол юу вэ? Энэ нь Blazor гэж нэрлэдэг бөгөөд энэ нь би мэддэггүй хэл дээр вэб програмуудыг бий болгох боломжийг олгодог. Энэ нь тавтай морилно уу. "2" + 2 = "22" Блэзэн ямар ч зүйл юм? Blazor нь Microsoft-ийн интерактив вэб интерфэйс үүсгэхийн тулд C#, JavaScript-ийг ашигладаг. Энэ нэр нь "Browser" болон "Razor" (.NET шаблон синтаксийн) нь портмэйл юм. Ямар ч JavaScript-ийг браузерд ажиллуулахын тулд C# бичнэ үү: (Blazor Server): Your C# executes on the server, and UI updates flow to the browser via a SignalR WebSocket connection in real-time. Runs on the server Браузерд ажиллуулж (Blazor WebAssembly): .NET-ийн ажиллуулах хугацаа нь WebAssembly-ийн дамжуулан браузерд ажиллуулж болно. Yes, actual compiled .NET code, in your browser. Бүх (Blazor United/.NET 8+): Үйлчилгээний тохиргоог нэг хэсэгт сонгоно. Сервер нь эхний ачаалал хурдтай, WebAssembly нь офлайн чадвартай. Эдгээр хооронд хамгийн сайн. // A Blazor component. Yes, that's C# in your UI. @page "/counter"

Counter Current count: @currentCount

Click me

@code { private int currentCount = 0;

private void IncrementCount() { currentCount++; } } ямар ч webpack. ямар ч babel. ямар ч конфигурацийн файлууд. зүгээр л C# компилирууд, ажиллуулах. Асуулт эсрэг React ( эсвэл: Ямар ч өөрчилж хэрэгтэй) React нь компонент дээр суурилсан интерфэйс талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи талаархи. Гэсэн хэдий ч, React-ийн үйлдвэрлэлийн програм хангамжийг үүсгэх жилийн дараа, би амьдралын сонголттай асуултуудыг мэдэгдэж буй загварууд мэдэгдэж эхэлсэн. Framework Churn нь реаль байна React экосистем гэж хэлсэн байна Энэ нь миний хэлбэр биш юм, гэхдээ би үүнийг унших үед миний зүрхэнд мэдэрсэн. "A Ever-Shifting Лабиринтын Faddish Churn" Өнгөрсөн жил зүйл хийх нь шинэ "хэвийн арга" бий болгодог: Year What We Were Told to Use 2016 Redux. Obviously. 2018 MobX because Redux boilerplate was killing us 2020 Context API (who needs libraries?) 2021 Zustand, after Context caused re-render hell on a dashboard I built 2022 Pick one: Jotai, Recoil, Valtio, or whatever your coworker found on Hacker News 2023 Whatever survived the layoffs 2024 Server Components. State lives on the server now, apparently? 2016 Өнгөрсөн байна. 2018 MobX учир нь Redux Boilerplate биднийг үсэглэдэг 2020 Контекст API (Хэв бичих хэрэгтэй вэ?) 2021 Zustand, дараах Context үүсгэгдсэн re-render адал дээр тавиур би үүсгэгдсэн 2022 Ямар ч сонгох: Jotai, Recoil, Valtio, эсвэл хакердсан мэдээ дээр таны ажилтан олох 2023 Ямар ч байтугай хуваалцах 2024 Server Components. State одоо сервер дээр амьдрал, харин? One Developer DEV Community дээр : "React-аас Vue-д Svelte-ийг Solid-д (идэвхжүүлэхийн дараа), би байнга өөр өөр хэлбэрээр нэг зүйл хэрхэн бий болгохын тулд үргэлж өөрчилж байна гэж мэдэж байна." Бүртгүүлэх Perfectly Тавтай морилно уу Starting a new React project in 2024 meant I spent two days just picking tools. Bundler? Webpack is "legacy" now, Vite is the default, but do I need Turbopack? State management? I went with Zustand after three hours of reading comparison posts. Styling? Tailwind, but half my team wanted Styled Components. Forms? React Hook Form, probably, unless we need something Formik does better. Энэ нь Бизнесийн логик нэг шугам бичсэн өмнө байсан. Нөхцөл Энэ нь "экосистемийн сонголт нь гялалзмал байдал, янз бүрийн хүч чадал, багасгал юм ... Энэ нь шийдэл, төслийн кодын баазны өөрчлөн, өргөн хэрэглэгддэг арга хэрэгслүүд нь үргэлжлүүлэн өөрчилж өгдөг." React 2025-ийн станц Тавтай морилно уу Yes, TypeScript exists. Yes, it helps. But TypeScript is a bandage on a dynamically-typed wound. You're bolting a type system onto a language that fundamentally doesn't have one. The seams show. // TypeScript: Types are suggestions, really const user: User = JSON.parse(response); // No runtime validation! // user could be anything. TypeScript just trusts you.

// Meanwhile, in C#: var user = JsonSerializer.Deserialize (response); // Actual deserialization with type checking Үнэгүй Өнгөрсөн жил клиент төсөл дээр. 847 удаа үзсэн. Энэ үед та JavaScript-ийг нэмэлт үйл явдалтай бичдэг. grep -r ': any' src/ | wc -l NPM аюулгүй байдлын зүрхний Ямар ч бид JavaScript-ийн олон нийтийн харьцуулахад дуртай зүйл талаар хэлж байна: таны Folders нь аюулгүй байдлын баталгаатай. node_modules September 2025: The Shai-Hulud Attack хязгаарлагдмал 18+ packages with over . Харилцад нэг хадгалах захиралтай phishing-эмэйлээр эхэлсэн. Зөвхөн хоногийн дотор Zapier, PostHog, Postman-ийн багцыг троянизсэн. NPM Supply Chain-ийн түүхэн хамгийн том хакердсан 2.6 billion weekly downloads Энэ нь Kicker? Арванхоёрдугаар сарын 2025, 25,000 гаруй GitHub репозиторийг харуулсан. Энэ хувилбар нь "хүртэлзүүлсэн ертөнц" халдваргыг агуулсан - харин алдааны програм хангамж суралцаж чадахгүй байгаа бол, энэ нь . Байрлал жуулчлалын 2.0 destroy the victim's entire home directory Энэ нь хуучин түүх биш юм. Энэ нь . Энэ жил The Greatest Hits of npm Disasters Incident Year Impact left-pad 2016 One developer unpublished an 11-line package. Babel, React, and thousands of projects broke instantly. event-stream 2018 Malicious code injected by a "helpful" new maintainer. Went undetected for 2.5 months. Targeted Bitcoin wallets. ua-parser-js 2021 8 million weekly downloads. Compromised to install cryptominers and password stealers. everything 2024 A "joke" package that depended on every npm package. DOS'd anyone who installed it. Shai-Hulud 2025 2.6B+ weekly downloads affected. AI-assisted attacks. Data destruction payloads. Өнгөрсөн 2016 Нэг хөгжүүлэгч 11-р хуваалцсан багц хуваалцсан. Babel, React, хилүүд төсөл нь шуудангийн үед хялбарсан. Үнэлгээ 2018 Зөөлөн код нь "хэрэгтэй" шинэ хадгалах хэрэгсэл. 2.5 сарын турш хязгааргүй байсан. Биткойны гарын үсэг тархсан. Бvх ангилал 2021 8 million weekly downloads. Compromised to install cryptominers and password stealers. Бүх 2024 Бүх npm багц дээр суурилсан "шуур" багц. DOS'd энэ нь суулгасан хүн. Хуучин 2025 2.6B+ долоо хоногт татаж авах нөлөөтэй. AI-ийн дэмжлэгтэй хакердах. Data Destruction payloads. Why This Keeps Happening NPM экосистем нь структурын асуудал байдаг: Massive dependency trees: Тохиромжтой React-ийн апп-ийн соронзон транзицийг байдаг. Бүх нь хакердсан хавхлага юм. Зохиогчийн эрх хуулиар хамгаалагдсан _ Зохиогчийн эрх хуулиар хамгаалагдсан _ Зохиогчийн эрх хуулиар хамгаалагдсан Бэлэг цаг хугацааны баталгаажуулалтгүй: npm package.json гэж хэлдэг зүйлс суулгах болно. Код аюулгүй байна гэж ямар ч компилийн цаг хугацааны баталгаажуулалтгүй. Trivial багц: JavaScript экосистемыг trivial функцийг зориулсан багцыг хамарсан. is-odd? is-even? is-number? Эдгээр байдаг, тэд сая татаж авах байна. # A real npm audit from a "simple" React project found 47 vulnerabilities (12 moderate, 28 high, 7 critical) Meanwhile, in .NET Land NuGet нь бүрэн биш юм, гэхдээ энэ нь маш сайн байна: Нийтлэгдсэн багц: Publishers can cryptographically sign packages Curated экосистем: Бүтээгдэхүүний багц илүү бага, харин өндөр чанарын Microsoft-ийн дэмжлэг: Барааны библиотек нь триллиондоллар компанийн дэмжлэгтэй, соло хөгжүүлэгч биш : The C# compiler catches many issues before runtime Compile-time safety Хамгийн бага нарийвчлалтай график: .NET-ийн өргөн стандартын библиотек нь бага нарийвчлалтай Би явах үед Миний Blazor төсөл дээр, Би тийрэлтэт үр дүнг үзнэ үү. React төслүүд дээр, би дараагийн цаг хугацааг очиж байна. dotnet list package --vulnerable npm audit Хамгийн сүүлийн үеийн бичлэг: Let the Code Speak For Itself: React vs Blazor Теорийн сайн байна. Код илүү сайн байна. Энд аль аль аль аль нь фреймворк дээр нэг функцийг харуулж байна. A Simple Counter (The "Hello World" Frameworks) React (with hooks): import { useState } from 'react';

export default function Counter() { const [count, setCount] = useState(0);

return ( Counter Current count: {count}

setCount(count + 1)}> Click me ); } Blazor: @page "/counter"

Counter Current count: @count

count++">Click me

@code { private int count = 0; } Similar line count, but notice: no imports, no Hook, ямар ч setter функц. Зөвхөн өөр өөрчлөн, нэмэлт. useState Two-Way Data Binding This is where the ceremony difference gets real. React: import { useState } from 'react';

export default function SearchBox() { const [query, setQuery] = useState(''); const [results, setResults] = useState([]);

const handleChange = (e) => { setQuery(e.target.value); };

return ( You typed: {query}

); } Blazor: You typed: @query

@code { private string query = ""; } handles both directions. No handler, no , no setter function. The binding just works. @bind onChange e.target.value Validation нь Form Handling Here's where things get spicy. A user registration form with validation. React (with React Hook Form + Zod - the "modern" approach): import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import { z } from 'zod';

const schema = z.object({ email: z.string().email('Invalid email'), password: z.string().min(8, 'Password must be at least 8 characters'), confirmPassword: z.string() }).refine(data => data.password === data.confirmPassword, { message: "Passwords don't match", path: ['confirmPassword'] });

export default function RegisterForm() { const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm({ resolver: zodResolver(schema) });

const onSubmit = async (data) => { await fetch('/api/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); };

return ( {errors.email && {errors.email.message} } {errors.password && {errors.password.message} } {errors.confirmPassword && {errors.confirmPassword.message} } Register ); } That's three npm packages ( Нөхцөл Нөхцөл ), spread operators on inputs, and resolver configuration. It works, but there's a lot happening. react-hook-form @hookform/resolvers zod Blazor (with built-in DataAnnotations): @page "/register" @inject HttpClient Http

model.Email" /> model.Password" /> model.ConfirmPassword" />

Register

@code { private RegisterModel model = new(); private bool isSubmitting = false;

private async Task HandleSubmit() { isSubmitting = true; await Http.PostAsJsonAsync("/api/register", model); isSubmitting = false; }

public class RegisterModel { [Required, EmailAddress] public string Email { get; set; } = "";

[Required, MinLength(8, ErrorMessage = "Password must be at least 8 characters")] public string Password { get; set; } = "";

[Required, Compare(nameof(Password), ErrorMessage = "Passwords don't match")] public string ConfirmPassword { get; set; } = ""; } } Нийт нэмэлт багц. Validation атрибуты .NET-д суурилсан байна. Submit Flow-г удирдах. автоматаар баталгаажуулалтыг холбох. Model class нь таны API-д дахин ашиглаж болно. EditForm DataAnnotationsValidator Бүтээгдэхүүн React (with useEffect - the footgun everyone steps on): import { useState, useEffect } from 'react';

export default function UserList() { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null);

useEffect(() => { let isMounted = true; // Cleanup flag to prevent state updates after unmount

fetchUsers();

return () => { isMounted = false; }; // Cleanup }, []);

if (loading) return Loading... ; if (error) return Error: {error} ;

return ( {users.map(user => ( {user.name} ))} ); } Notice the cleanup pattern with . I spent two hours last year hunting down a memory leak because a junior dev forgot this pattern. The error message? "Can't perform a React state update on an unmounted component." Helpful. isMounted Blazor: @page "/users" @inject HttpClient Http

@if (users == null) { Loading... } else if (error != null) { Error: @error } else { @foreach (var user in users) { @user.Name } }

@code { private List ? users; private string? error;

protected override async Task OnInitializedAsync() { try { users = await Http.GetFromJsonAsync >("/api/users"); } catch (Exception ex) { error = ex.Message; } } } ямар ч цэвэрлэх шаардлагагүй. Blazor компонентын амьдралын цикл зөв боловсруулдаг. Хязгаарлалтгүй. нэг удаа ажиллуулж болно. Component loads. OnInitializedAsync Component Communication (Баахны хүүхэд, Баахын хүүхэд) React: // Parent function Parent() { const [selectedItem, setSelectedItem] = useState(null);

return ( {selectedItem && } ); }

// Child function ItemList({ onItemSelected, highlightedId }) { const items = [...];

return ( {items.map(item => ( onItemSelected(item)} > {item.name} ))} ); } Blazor: @* Parent *@

@if (selectedItem != null) { }

@code { private Item? selectedItem; } @* ItemList.razor *@ @foreach (var item in items) { SelectedItem = item"> @item.Name }

@code { private List items = [...];

[Parameter] public Item? SelectedItem { get; set; }

[Parameter] public EventCallback SelectedItemChanged { get; set; } } The Syntax нь автоматаар хоёр тусламжтай холболт хамааралтай. Convention over configuration. @bind-SelectedItem The Ceremony Comparison Task React Blazor Two-way binding + (every. single. field.) value onChange @bind Form validation Pick a library, write a schema, pray Built-in DataAnnotationsValidator Data fetching + cleanup + deps array (good luck) useEffect OnInitializedAsync State management This week's favorite: Redux? Zustand? Jotai? Class fields. Call when needed StateHasChanged() DI Roll your own with Context or install a library (it just works) @inject Parent-child binding Props down, callbacks up @bind-PropertyName хоёр тусламжтай + (every. single. field.) value onChange @bind Формат Validation Библиографийг сонгоно, схемуйг бичнэ үү, намайг хүснэ үү Барилга DataAnnotationsValidator Бүтээгдэхүүний + cleanup + deps array (good luck) useEffect OnInitializedAsync State management Эдгээр долоо хоногийн хамгийн дуртай: Redux? Zustand? Jotai? Class fields. Call Үйлчилгээний StateHasChanged() DI Context нь өөрийн рулет эсвэл библиотек суулгах (it just works) @inject Parent-child binding Props доош, Callbacks доош @bind-PropertyName Шаблон үзнэ үү? Blazor ямар ч код, ямар ч сонголт нь агонист байна. Хэрэв та Blazor-ийг ашиглахыг хүсч байгаа бол Нэг хэл нь тэднийг бүхэнд хянах This is the killer feature. With Blazor, I write C# on the frontend and C# on the backend. Same language. Same type system. Same patterns. // Shared model used by both frontend and backend public record CreateOrderRequest( string CustomerId, List Items, ShippingAddress Address );

// API endpoint [HttpPost] public async Task > CreateOrder(CreateOrderRequest request) { // Validate, process, return }

// Blazor component calling the API var order = await Http.PostAsJsonAsync ("api/orders", request); No serialization mismatches. No "I updated the API but forgot to update the TypeScript types." The compiler catches everything. Тавтай морилно уу C# is statically typed. Not "we added types later and hope you use them" typed. The compiler is your friend, and it will tell you about problems Таны хэрэглэгчид тэднийг олж авах. Өмнөх // This won't compile. Period. int count = "five"; // Error CS0029

// Pattern matching catches nulls at compile time if (user is { Email: var email }) { SendWelcomeEmail(email); // email is guaranteed non-null here } Үнэгүй , "Эдгээр хэрэгслүүд нь хэлний төрөл аюулгүй байдал нь хөгжүүлэгчдэд урьдчилан сэргийлэх нь ихээхэн найдвартай кодыг үүсгэх боломжийг олгодог, найдвартай nulls гэх мэт ажиллуулах хугацааны алдааг туршиж байх ёстой." Emergent Software notes SOLID Principles Are First-Class Citizens .NET was designed with dependency injection and interface-based programming in mind. Implementing SOLID principles isn't fighting the framework-it's using it as intended. // Program.cs - Clean DI registration builder.Services.AddScoped (); builder.Services.AddScoped (); builder.Services.AddScoped ();

// Component receives dependencies automatically @inject OrderService Orders @inject NavigationManager Navigation

@code { private async Task SubmitOrder() { var result = await Orders.CreateAsync(currentOrder); if (result.IsSuccess) { Navigation.NavigateTo($"/orders/{result.Value.Id}"); } } } React-д тавтай морилно уу, ямар ч third-party библиотек, конфигурацийг цуглуулах нь энэ түвшин авахыг туршиж байна. Debugging That Doesn't Make You Cry Visual Studio's debugger with Blazor is genuinely excellent. Breakpoints work. Step-through works. Watch expressions work. The call stack actually makes sense. I can set a breakpoint in my Blazor component, step through my business logic, and trace execution all the way to the database and back. Same debugger, same tools, same experience as any other C# application. private async Task LoadOrders() { // Set a breakpoint here var orders = await OrderService.GetRecentAsync(customerId);

// Inspect 'orders' in the debugger // See the actual types, not 'object Object'

this.orders = orders; } Compare this to debugging React where you're juggling browser DevTools, React DevTools, and Redux DevTools all at once. Last year I spent 45 minutes on a bug that turned out to be a missing dependency in a Массаж. Симптом нь хөнгөн infinite re-render юм. Blazor-ийн debugger нь секундын дотор үүнийг олж авах болно. useEffect The .NET Ecosystem is Stable (Boringly So) The .NET ecosystem moves slowly. Deliberately. I consider this a feature, not a bug. NuGet packages tend to have long-term support. When Newtonsoft.Json decided to stay on version 13, nobody panicked. It still works. Compare that to the npm ecosystem where "latest" is a lifestyle. Би .NET 7.0.14-ээс .NET 8.0.0-ийг шинэчлэгдсэн үед сүүлийн сарын долоо хоногийн хугацаанд өөр өөр өөр өөр өөр өөрчлөн хуваалцах жагсаалттай жагсаалтыг олж авсан. React-ийг класс бүрэлдэхүүн хэсгүүдээс хавхлагатайдаа Twitter-д суралцаж, сургалтыг шинэчлэхэд месец орно. Эдүүлбэр / Real World Advantages Code Sharing is Trivial Got validation logic? Энэ нь нэг удаа хуваалцсан библиотекед бичнэ үү. // Shared.Validation/OrderValidator.cs public class OrderValidator : AbstractValidator { public OrderValidator() { RuleFor(x => x.Items).NotEmpty(); RuleFor(x => x.Total).GreaterThan(0); RuleFor(x => x.ShippingAddress).NotNull(); } }

// Use in Blazor component // Use in API controller // Use in background service // Same validation, everywhere The Component Model is Familiar Хэрэв та MVC эсвэл Razor Pages-ийн Razor синтаксийг мэдэж байгаа бол Blazor-ийн бүрэлдэхүүн хэсэг нь байгалийн мэдэж болно. .NET-ийн хөгжүүлэгчдэд суралцах шугам өдөр, сарын биш юм. // Component with parameters - looks like any other C# class @code { [Parameter] public Order Order { get; set; } = default!;

[Parameter] public EventCallback OnOrderUpdated { get; set; }

[CascadingParameter] public UserContext? User { get; set; } } Ажлын үр дүнтэй сайжруулсан Өмнөх Blazor WebAssembly-ийн гүйцэтгэлийн асуудал байсан. Эдгээр өдөрүүд ихэвчлэн бидэнтэй дараах байна. .NET-ийн бүх хувилбар нь их үзэсгэлэнтэй сайжруулдаг. .NET 8 introduced: : Partial JIT compilation in the browser, replacing slow interpreter bytecodes with optimized WebAssembly Jiterpreter SIMD дундаж: WebAssembly Single Instruction, векторын тооцоо хийх нь олон өгөгдөл : Compile C# directly to WebAssembly for near-native performance on CPU-intensive tasks AOT compilation .NET 9 added: : Removes IL after AOT compilation, significantly reducing bundle size WasmStripILAfterAOT Өндөр амархан ачаалал: хурдан эхний ачаалал авахын тулд илүү сайн багтаамж : Enabled by default for Interactive Server components WebSocket compression .NET 10 delivers: : Static assets preloaded via Link headers before the page renders Framework asset preloading High-priority resource scheduling: Браузер татаж авах, хязгаарлагдмал шинж чанарын хурдац Performance Profiling Counter: WebAssembly аппын хувьд шинэ диагности хэрэгсэл : Better memory management in long-running apps Automatic memory pool eviction So: Static SSR outperforms React on initial load because you're serving pre-rendered HTML with zero JavaScript hydration overhead. AOT compilation gets WebAssembly apps to near-native speed. You pick the right mode for each page. Blazor's Rapid Evolution: .NET 8, 9, and 10 Blazor-ийг мэдэгддэг нэг зүйл нь Microsoft-ийг хэрхэн агрессив болгон сайжруулсан юм. Энэ нь богино төсөл биш юм. Энэ нь .NET экосистем дахь анхны түвшний гражданин юм. .NET 8: "Blazor United" революци .NET 8 нь Blazor-ийг идэвхжүүлэхийн тулд хэрхэн өөрчлөгдөж байна . Before .NET 8, you had to choose: Blazor Server Blazor WebAssembly. Now you can mix and match per-component. Unified Rendering Мод эсвэл changed everything. Your components render as plain HTML on the server. No SignalR connection, no WebAssembly download. Just fast, SEO-friendly HTML. Static Server-Side Rendering (SSR) // A static SSR page - renders as pure HTML @page "/about" @attribute [StreamRendering]

About Us

About Our Company This renders as static HTML. Search engines love it.

Шинэ Blazor Web App шаблон нь SSR-д тохиромжтой байдаг. Энэ нь philosophy-д чухал ач холбогдол юм. Та хамгийн хурдан, SEO-ийн хамгийн тохиромжтой сонголт нь эхэлж, шаардлагатай үед зөвхөн интерактив нэмж. .NET 9: Precision нь хоорондын хоорондын хоорондын хоолой doubled down on flexibility. The new attribute lets you mark specific pages that use static SSR-useful for pages that depend on HTTP cookies or the request/response cycle. .NET 9 [ExcludeFromInteractiveRouting] must @page "/privacy-settings" @attribute [ExcludeFromInteractiveRouting]

// This page always renders statically, even in an otherwise interactive app Other .NET 9 improvements: enabled by default for Interactive Server components WebSocket compression Шинэ RenderInfo API ашиглан Render mode detection at runtime Blazor Server-ийн програм хангамжийн шинэ холболтын боловсруулах .NET 10: Performance болон Польш Блэзорын чухал сайжруулалттай хүргэж байна: .NET 10 : The Blazor script is now served as a static web asset with automatic compression and fingerprinting, significantly reducing payload size and improving caching. Blazor script optimization : The new attribute simplifies sharing data between pre-rendering and interactive renders: Persistent component state [PersistentState] @code { [PersistentState] public List ? Movies { get; set; }

protected override async Task OnInitializedAsync() { // State is automatically restored from prerendering Movies ??= await MovieService.GetMoviesAsync(); } } : одоо бүх рендерингийн загварууд дээр зөөлөн ажилладаг. Шинэ төслийн шаблон нь стандарт page. Better 404 handling NavigationManager.NotFound() NotFound.razor : Сервер хоолой нь дараах үйл ажиллагаа нь дээд түвшний үйл ажиллагаа гэж үздэг, Application Insights-д харахын тулд илүү цэвэр. Improved diagnostics Бараа нь ягаан тухтай: Blazor нь илүү хурдан, илүү гүнзгий, илүү үйлдвэрлэлийн бэлэн байх болно. React одоо ч ач холбогдолтой байна Би танд React-ийг дуртай гэж хэлэх үү. Энэ нь биш юм. React-ийг сонгохын тулд таны баг JavaScript-ийг одоо байгаа бөгөөд ямар ч хүмүүс C#-ийг суралцахыг хүсэж байгаа бол React-ийг сонгох. Та Blazor-ийн байгалийн системд байдаггүйгээр ямар ч нишейн npm бүрэлдэхүүн хэсэг хэрэгтэй бол энэ нь сонгоно уу. Та хурдан эхлэх MVP-ийг сонгоно уу. Хэрэв та 6 сарын дотор кодыг харах болно. React-ийн байгаль орчны систем нь том юм. Хэрэв та хязгаарлагдмал график библиотек, эсвэл зүгээр л нэг гайхамшигтай зүйл хийх нь drag-and-drop grid хэрэгтэй бол хэн нэг нь үүнийг үүсгэх болно. Энэ нь үнэхээр үнэ цэнэтэй. Гэсэн хэдий ч, та .NET-ийн дэлгүүр нь интернетийн хэрэгсэл, бизнесийн програм, эсвэл гурван жилийн турш ажиллуулах хэрэгтэй ямар ч зүйл бий болгож байгаа бол? Blazor нь мэдэгдэх үнэ цэнэтэй юм. Blazor нь эхлэх If you're curious, here's the quickest path to a running Blazor app: # Create a new Blazor Web App (.NET 8+) dotnet new blazor -o MyBlazorApp cd MyBlazorApp dotnet run Энэ нь. Үгүй that spins for three minutes downloading half the internet. No folder larger than your actual code. No or Ямар ч байтугай. npm install node_modules .babelrc webpack.config.js Нөхцөл Microsoft-ийн докторууд MSDN-ийн өдрүүдээс хойш урт хоосон байна. албан ёсны Blazor документын FAQ: Common Concerns About Blazor I've heard every objection in the Blazor vs React debate. Some are valid. Most aren't. Blazor WebAssembly багц хэмжээ нь маш их байна уу? 2020-д? Да, энэ нь хязгаарлагдмал байсан. Эхний ачаалал 2-3MB-ийг хүрч болно. Одоо? .NET 8+ математик өөрчилж байна: AOT компиляцийг Runtime-ийг багасгах IL trimming strips unused code Lazy loading defers non-critical assemblies .NET 10 автоматаар компрессийг нэмнэ Гэсэн хэдий ч, найдвартай хариу нь: WebAssembly-ийг бүхэнтэй хуваалцахгүй. Landing Pages (Zero WASM) -ийг Static SSR-ийг ашиглах. Авторизованы хэсэгт Interactive Server-ийг ашиглах. WebAssembly-ийг офлайн үзэсгэлэн, хэрэглэгчийн хуваалцахын тулд Save. Are JavaScript developers easier to hire than Blazor developers? Энэ нь Хэрэв та үнэхээр ажиллуулах гэж юу гэж бодож байна. Хамгийн алдартай C# хөгжүүлэгч нь Blazor-ийг нэг долоо хоногийн дотор олж авах болно. Компонент загвар нь тавтай морилно уу, синтез нь зүгээр л Razor юм, мөн тэд энэ хэлний мэддэг. Энэ нь "React хөгжүүлэгч" -ийг ажиллуулахын тулд харьцуулахын тулд 3 жилийн өмнө энэ нь мэддэг бөгөөд одоо сервер Components-ийг олж авах хэрэгтэй. хавхлага, таны баг сонгосон мета-хавхлага ямар ч. use .NET талантын багц том, тогтвортой, бүрэн багц чадвартай юм. Таны backend хөгжүүлэгч kontext-switching хэлүүдгүйгээр frontend PR-ийг шалгаж болно. Does React have more third-party components than Blazor? Yes. Full stop. Бүх React-ийн бүрэлдэхүүн хэсгүүдний библиотек нь аюулгүй байдлын хавтгай, харьцуулахад хязгаарлагдмал хуваалцтай багц, READMEs нь "TODO: документын нэмэх" гэж хэлдэг. Blazor-ийн байгаль орчны систем нь багатай боловч та олж авсан багц нь одоо ч байтугай байлгахыг хүсч байна. is the one I reach for first. Material Design, free, and the maintainers actually respond to issues. and Бүх нь үнэгүй олон нийтийн лиценз санал болгож, Хэрэв та илүү шаардлагатай бол. Enterprise дэлгүүр нь ихэвчлэн дэмжлэг contracts тухай. MudBlazor Radzen Syncfusion Telerik Хэрэв та JavaScript библиотекарыг хэрэглэдэг вэ? lets you interop cleanly: IJSRuntime @inject IJSRuntime JS

@code { private async Task InitializeChart() { await JS.InvokeVoidAsync("Chart.bindings.init", chartElement, chartData); } } You're not locked out of the JavaScript ecosystem. You just don't Энэ нь depend Blazor SEO нь сайн байна уу? Static SSR нь чист HTML-ийг бий болгодог. Google энэ нь үздэг, индекс, хийж байна. Next.js SSR-ийг хаана ч C#-д. Энэ нь Blazor-д зөвхөн WebAssembly-д байгаа үед 2020-д ач холбогдолтой байсан. Энэ нь жилийн турш ач холбогдолгүй байсан. Blazor Mobile Apps ашиглаж болно? Blazor Hybrid байдаг. Таны бүрэлдэхүүн хэсгүүд нэг удаа бичж, MAUI (iOS / Android / Windows / macOS), WPF, эсвэл Windows Forms-д тэднийг ажиллуулах. Эдгээр C# бүрэлдэхүүн хэсгүүд, нарийн апп хавхлага. Ямар ч "хэвлэх нэг удаа, ямар ч орд" биш боловч ихэвчлэн хэрэглээний тохиолдолд хялбар байдаг. Blazor Tooling нь React-тэй VS Code шиг сайн байна уу? Би бодож байна гэж бодож байна, гэхдээ энэ нь субъектив юм. Visual Studio нь Blazor: тавтай морилно уу тавтай морилно уу тавтай морилно уу тавтай морилно уу, IntelliSense нь таны бүх кодыг мэддэг, бүрэлдэхүүн хэсгүүд, үйлчилгээг хооронд ажилладаг refactoring, Hot Reload нь ихэвчлэн ажилладаг, нэгтгэсэн туршилтын болон профилинг. VS код нь React: syntax highlighting, IntelliSense Хэрэв TypeScript зөв тохирсон байгаа бол ажиллаж байгаа, хүсэлт тавтай морилно уу, тавтай морилно уу, эсвэл тавтай морилно уу. launch.json The debugging alone sold me. Setting a breakpoint in a Blazor component and stepping through to the database, in one IDE, one language? That's just pleasant. Blazor Microsoft-ийн борлуулагч лок-ийг үүсгэдэг вэ? .NET нь нээлттэй эх үүсвэр юм (MIT лиценз). Blazor нь нээлттэй эх үүсвэр юм. Та Linux, Docker, AWS, Azure дээр, ямар ч газар дээр ажиллуулж болно. Is there ecosystem gravity toward Azure? Sure. But I've deployed Blazor apps to AWS, DigitalOcean, and bare metal servers without issue. Энэ нь React-тэй харьцуулахын тулд, энэ нь техникийн эх үүсвэртэй боловч Мета-ийн эх үүсвэрүүдээр хянах болно. Facebook-ийн ангиллын бүрэлдэхүүн хэсгүүдгүй байсан үед, бүх экосистем хавтгайж байна. Server Components-ийг толгох үед бүхэн хамарсан. Хамгийн сүүлийн үеийн Microsoft нь Roadmap-ийг хуваалцах болно. Blazor Hot Reload зөв ажиллаж байна уу? Энэ нь .NET 5-д хязгаарлагдмал байсан. .NET 8-д энэ нь ашиглаж болно. Эдүүлбэр A файлуудыг, хадгалах, өөрчлөлтийг үзнэ үү. Методын бүтэц, Razor markup, CSS, бүх хурдан. .NET 10 эцэст нь сайн хийж байна .razor Энэ нь Vite шиг хурдан байна уу? Үгүй. Энэ нь маш хурдан байна гэж би үүнийг мэддэггүй байна уу? Үгүй. Өнгөрсөн дуудлага Switching to Blazor hasn't solved all my problems. I still write bugs. I still make architecture mistakes. I still occasionally spend too long debugging something that turns out to be a typo. But I've stopped spending mental energy on which state management library is "correct" this month. I don't wonder whether my TypeScript types match runtime data anymore (spoiler: they often didn't). I'm not updating seventeen npm packages every time Dependabot yells at me. Нэг хэл. Нэг экосистем. Би .NET-ийг 10 жилийн турш ажилласан загварууд. Энэ нь компромисс юм, би үүнийг үнэ цэнэтэй байна. Хэрэв та .NET-ийн хөгжүүлэгч бол та өөрийн програм хангамжийг үзэж байгаа бол with existential dread-Blazor might be worth an afternoon of your time. package.json Дараа нь юу вэ? If you want to try it: . Энэ нь бүх тохиргоог юм. dotnet new blazor -o MyFirstBlazorApp && cd MyFirstBlazorApp && dotnet run Microsoft-ийн тогтвортой байна, болон Би олж авсан хамгийн сайн технологийн subreddits нэг юм. Блэйзрын тусламж R / Блэзер Questions? Drop a comment or find me on social. I like talking about this stuff. Sources: Бүтээгдэхүүн : The State of React and the Community in 2025 If Not React, Then What? Why the Latest JavaScript Frameworks Are a Waste of Time Is Blazor Better Than JavaScript? Blazor vs React: Хэмжээтэй харьцуулалт Debug ASP.NET Core Blazor Apps - Microsoft унших .NET 8-ийн Blazor: сервер дээрх болон Streaming Rendering Static Server-Side Rendering-ийн Blazor-ийн ашиг .NET 10-ийн шинэ зүйлүүд - Microsoft Learn .NET 10-д ASP.NET Core-д шинэ зүйлүүд - Microsoft-ийн судалгаа npm Supply Chain Attack - Пало Алто сүлжээ Shai-Hulud 2.0 Supply Chain Attack - Wiz npm left-pad Incident - Wikipedia Event-stream Malicious Package - Snyk The "Everything" багц Chaos - Socket About the Author Би систем Архитектор юм, дистрибуирован систем, .NET чист код, бүртгүүлэх, гүйцэтгэл, үйлдвэрлэлийн босоо. Би ихэвчлэн илрүүлэх байна Би үүнийг хүлээн зөвшөөрөх хүссэн илүү их удаа буцаж байна. node_modules LinkedIn: Бидтэй холбоо барина уу GitHub: mashrulhaque Twitter/X: @mashrulthunder