Blazor VS. NextJS Head To Head! Which One Wins?

[@user-dc9zo7ek5j]

There are a couple of things that you've missed comparing against. 1. system libraries, 2. managing state, 3. type safety, 4. simplicity/error handling. On all of the points I've mentioned, Blazor wins. 1. JS developers do not rely on the standard library (because it is quite small and insufficient), rather they rely on NPM packages to make react/datetime/parsing/network requests usable, but since they are from other developres that do not develop the library full time, they are not that stable, resulting in projects that quickly become obsolete/unrunnable unless they are updated every year. 2. Managing state in react applications is pure chaos, with different libraries that all aim to do one thing, but in their own different way like redux, mobx. In Blazor state can be managed in different ways on the component itself, either by prop drilling, cascading parameters or even, use DI. Although benchmarks show that blazor is one of the slowest SPA frameworks, badly managing state in react is very easy, which results in terrible performance. 3. There are 2 types of applications, one with TS, and the other one with pure JS. In Blazor, C# is robust enough to prevent most mistakes, add nullability to the whole mix and you've got code that you guess how it would run without running the whole app/specific component. 4. The most important part for client apps is error handling, in order to properly handle errors in React a lot of boilerplate code needs to be copy pasted for each page and in general, view code, validation code, http code is intermixed inside the component. Blazor separation of concerns is stricter than in React's and prevents such mix of logic, with each part of the complexity that JS developers place in a single component is spread out through model attributes (validations), DI (services), view logic (data error handling). Blazor is also very strict about errors and will stop the whole application from being interactive if such occurs, while in React, there is a mentality of ignoring errors/warnings since the component quietly stops working but everything else continues. In general Blazor is also much simpler in implementation, because it does not want to replace HTML, rather it embraces it. Making components does not consist of prop drilling 10 layers into more basic components, rather, the chain is reduced by using HTML/CSS and even JS interop.

[@Codewrinkles]

Thank you very much for your really nice contribution to this topic. Initially, state management was planned to be part of this video, but in the end I decided to leave it out because the video would have been too long. Also, I think in the end state management is not a simple topic neither in React, nor in Blazor and I wouldn't say we have any real unified approach on it in any of the stacks. Still, I agree with you that Blazor has some very nice features that derive from being a .NET framework that makes things a little easier.

[@georgepark375]

Also, regarding state management, the very interesting approach is to use client events via MediatR to change the state of the components that listen to the events. Idk how to achieve this on React, but for me it is really interesting approach to create a loosely coupled components for modular frontend

[@Codewrinkles]

TBH I never thought about that, but sounds actually like a cool idea. Or at least worth investigating. Thanks for sharing.

[@vuslatozel]

The only and very important problem with blazor is hot reload. It is the slowest of all and sometimes you have to stop and restart and remove browser cache and refresh to see latest changes. Man it's very challenging. I'm on macos which has some microsoft joke softwares like visual studio for mac and even at windows with actual visual studio it is not working well. But the rest of the development experience is very nice. Javascript frameworks are generaly a waste of time. I can generally deliver a web app around 2-6 weeks. my first angular project took 12x more with similar project scope and while developing, angular had 4 major updates. I'll never ever going to work with it again.

[@guilleocampo]

Having used Blazor last months, my main objection is the infamous "Could not reconnect to the server. Reload the page to restore functionality" error, derived from the SignalR connection lost. Yes, using WASM that isn't a concern, but brings another set of drawbacks.

[@johnhershberg5915]

Definitely the biggest drawback. Having to manage the SignalR connection is turning out to be a huge pain. I would love some video on how people out there are handling it.

[@Autystyczny]

@@johnhershberg5915 .NET 8 solved the issue, both improving the connection with the signalR in server mode but also by introducing auto mode which 1st loads as server but downloads WASM in the background so whenever the component is being used next it is running on WASM.

[@odumahojorma]

for me its wasm or ssr

[@guilleocampo]

@@odumahojorma SSR doesn't use SignalR?

[@alphamaster2]

@@guilleocampo SSR just serves static files. But there is not interactivity. If you want interactivity, then you need to choose between SignalR or Wasm

[@Robd515]

Just discovered this channel, I loved the video and appreciate your opinions! lol I laughed quite a bit as well. That was a nice comparison. I’m looking forward to checking out your other videos, cheers.

[@ronny3326]

Good video mate. Regarding rendering - Maybe I misunderstood, but in Blazor Web, you really don't need to create multiple Blazor projects to choose between CSR/SSR for components as that can be done individually for each component in the same Blazor web app.

[@Codewrinkles]

If you want to use webassembly interactivity, you need an additional project, as you need a WebAssembly host that's shipped to the browser. If you just want to use server interactivity (what is my personal preference) then you don't need an additional project.

[@UMARZONE]

Great comparision, i request you to please make video on Blazor vs React

[@clouds187]

Amazing video and demonstration of both the pros and cons of both frameworks! I would love to see you make a video to show us how to setup tailwindcss with blazor :)

[@Codewrinkles]

I'm not sure I'll do that. I'm actually not a fan of Tailwind at all. I know the NextJs app in the video had tailwind, but that's because I chose it by mistake when creating the NextJs app.

[@Codewrinkles]

@ClaudioBernasconi has a nice video on that: kzbin.info/www/bejne/pqbXY6Bqrbl9aZIsi=a8-8haK34WXEvpfg

[@abobonickname5696]

New JavaScript frameworks won't stop coming. There are so many

[@Codewrinkles]

Yeah, there's a new JS framework each day, they say :)) Still React (and NextJS that just wraps React in a framework) possibly has the widest adoption right now. And I don't see things changing in the future.

[@rogerperkins]

Blazer sounds good, can I assume Microsoft is converting all there web sites to use Blazor?

[@Codewrinkles]

I assume so as well :)

[@Sawashil]

What about Nuxt vs Blazor?

[@Codewrinkles]

Can't tell since I din't work with nuxt in any prod app

[@Eirenarch]

An interesting comparison will be SSR + hydration as I suspect this is where next will win

[@Codewrinkles]

From my point of view, that goes into the "rendering" part and obviously Next will win by far, as it doesn't need to create complex tech around it (like websockets or webassembly). So, it has a clear advantage in this area.

[@majormartintibor]

Great video!

[@wilson.kutegeka]

Interesting comparison, we have learnt a thing or two. But I saw that even the part where Next JS won, the marks were given to Blazor. I also wanted you to add light on the fact that NEXT JS uses JS, which is a natural language for the Internet while C# is the one used in Blazor. Isn't Next JS having an upper hand in that regard.

[@Codewrinkles]

It for sure has an upper hand in this regard. The Blazor team needed to find a lot of different technical tricks to circumvent this.

[@PhantasyAI0]

nextJS won on what? what crack are you smoking?

[@alex.nolasco]

Indeed Jobs Blazor: 94 Next.js: 147 React.js: 4,434 🤔

[@mubashir3]

In the beginning you talked about being objective about the comparison. As someone who has used both Blazor and React extensively, I can tell you that this video was not objective. You make Blazor videos, so it wasn't all that surprising that Blazor wins, for you. If anyone has used both extensively then it is easy for them to see where Blazor wins. It win only if for those who are very comfortable with C# and Blazor already and do not wish to learn React/NextJS/Typescript. The fundamental issue with Blazor is speed. The initial load time is much much slower. And the rendering time is slower too. It will never win on performance. Second is ecosystem. React has a large and rich ecosystem with tools that are indispensable. For example there is no equivalent of RelayJS in Blazor. There are very many legitimate reasons why React is miles ahead of Blazor in the marketplace. Blazor is trying to improve. But it is mostly trying to copy good ideas of React with server side rendering etc. But, all of that is for naught. The fundamental flaws in Blazor's design cannot be fixed easily, if at all. Eventually, I think Blazor will go the way of Microsoft Silverlight and other such ill-conceived ideas.

[@Codewrinkles]

The problem is: Blazor becomes better, while React becomes worse and worse. Also, the "speed" you are mentioning is a valid argument. However, it's only as valid as the programmers who write the apps. Bad programming? No, problem, React is there to help. The speed argument however becomes invalid in case of people who understand programming and write good code.

[@PK-xu7gu]

@@Codewrinkles You just proved his point. I'm a .Net dude and followed the Blazor development closely with Sanderson. Had high hopes for it, but in the end went with Vue as it was a far better programming experience for a front end.