Introduction
So finally blazor webassebmly is lunched by microsoft on 19th May 2020. This is a fully-featured and supported release of Blazor WebAssembly that is ready for production use. Full stack web development with .NET is now here! So this video is all about Client Side Blazor vs Server Side Blazor. I also talk about the pros and cons of both and end this blog post with conclusion.
On a side note, I also make a video about this topic on YouTube click here to watch the video. (if you understand Urdu or Hindi).
How JavaScript Code Compiled in Browser
Before understanding the working of client side blazor, it is important for us to understand how javascript code got compiled in browser then it will be easy for us to understand how client side blazor work. So normally we have a browser like google chrome or firefox and a javascript engine is embedded inside the browser. We write javascript code and parse the code to browser then javascript engine compile that code and make a abstract syntax tree then the code is converted into byte code that then do the DOM manipulation. So this is the normal flow of javascript.
Web Assembly Came into Picture
So hope you got how javascript got compiled and do DOM manipulation. but there is a thing that came into picture in march 2017 named webassembly and web assembly have the power of executing any type of code into browser. This thing open up new doors for new programming language in a mean while microsoft think how about if we execute .NET Runtime over webassembly. This thing give the birth to blazor and from there two pieces of blazor one is client blazor and second server blazor came into picture. Now lets talk about the client blazor.
How Client Side Blazor Work
So in javascript pipeline code is compiled into bytecode and that bytecode perform DOM manipulation. In client side blazor .NET Runtime directly got compiled into bytecode with webassembly and then that bytecode do the DOM manipulation. So if i put things together then inside browser we have webassembly, .NET Runtime and on top of that blazor is loaded that perform DOM manipulation. This is the typical path of blazor client. Now lets talk how server side blazor work.
How Server Side Blazor Work
Server side blazor is little different then blazor webassembly. In server side blazor we have the same component. Mean our webassebmly our .NET Runtime on top of that blazor got loaded but now all these things are present on server and from server we send a single javascript file to client browser that javascript file create a signalR connection so that client and server communicate with each other on runtime and that javascript file is responsible for DOM manipulation. I also write an article about SignalR. You can click here to read. So take a breath we learn a lot just couple of minutes mores. Lets talk about pros and cons.
Shared Benefits of Client Side Blazor and Server Side Blazor
- Full Stack With Dot NET
- Code Sharing Between Back End and Front End
Pros of Client Side Blazor
- Low server overhead
Cons of Client Side Blazor
- More Payload on Client Browser
- Disconnected Approach
Pros of Server Side Blazor
- Less Payload on Client
- Less Abstraction on Server
- Pre Rendering
Cons of Server Side Blazor
- Connection is Required
- More Resources Required on Server
Conclusion
so if we take a look at both technologies client side blazor vs server side blazor. We can see that both have there own advantages and disadvantages. In some scenarios client work better and some cases server work better. This is totally depend on your personal choice which one to choice. One thing that I can mention here is all these new technologies like webassebmly and blazor open new doors for other programming languages to come over web. As we have different choices our back end and choice what suites us in future we have also multiple options on client side to choose best fit for our business need.
