Client-Side Rendering
In a typical SPA, when a client makes a request, the server sends a single HTML page to the browser (the client).
This HTML page often contains just a simple div tag a reference to a JavaScript file.
This JavaScript file contains everything your application needs to run, including the React library itself and your application code.
It is downloaded when the HTML file is parsed.
The downloaded JavaScript code then generates the HTML on your computer and inserts it into the DOM under the root div element and you see the user interface in the browser.
Drawbacks: SEO + Performance
Server-Side Rendering
Instead of sending a nearly empty HTML file that depends on client-side JavaScript to construct the page, the server takes charge of rendering the full HTML.
This fully-formed HTML document is then sent directly to the browser. Since the HTML is generated on the server, the browser is able to quickly parse and display it, improving the initial page load time.
Hydration
The full interactivity of the page is on hold until the JavaScript bundle — comprising React itself along with your application specific code — has been completely downloaded and executed by the browser.
This important phase, known as hydration, is where the static page, initially served by the server, is brought to life. During hydration, React takes control in the browser, reconstructing the component tree in memory based on the static HTML that was served. It carefully plans the placement of interactive elements within this tree.