Search code examples
javascriptnode.jsreactjsreact-server

Difference between React Server and React Client


I have been researching react.js framework for quite a bit. I am yet to fully understand the difference between client side and server side rendering (despite effort searching for CLEAR difference). Thus, I would highly appreciate for kind souls to provide a clear and crisp explanation for this topic?

Btw, I am from .NET background, thus I am still trying my best to adjust my thoughts towards more JS-oriented way of programming.

Thanks!


Solution

  • In server side rendering you're dealing with a web server (think writing some C#.Net or whatever), you have no document or window as you do in the browser. So what react does is builds a "virtual" DOM in memory then it can actually convert that into a string of HTML with special attributes that it'll pick up in the browser. Then you respond to the HTTP request with that string of html. Then when you load up the react application in the browser, it'll pick up where the server left off and build another "virtual" DOM in the browser's memory. If you do it correctly it won't have to manipulate the document at all during this process, so the browser loads this dynamic page as if it were a static html file. But now you have a live React virtual DOM and the application can navigate to different pages, or update in other ways, using React's amazing rendering engine, giving you a very optimized web experience with very little work.

    Getting this all right takes a lot of piecing NPM packages together and trying to find examples that match your use case most closely, which is probably going to be a little frustrating coming from .NET where everything is really consolidated into a single framework. There's a lot of different tools and techniques (lint, transpile, bundle, test, build, etc.) to consider for every piece of your app and it can take some time and fiddling to get it all working together. Basically this is the price you pay to get the most optimal web apps these days. It's amazing what these tools can do, but there's definitely a steep learning curve getting started. People here are always quick to help though!