Posted on Oct 22 • Originally published at javascript.plainenglish.io Most developers, including myself, were confused about the difference between CSR and SSR. We couldn’t understand Hydration and its basic principles. However, let me fix all that for you. And trust me, it is easy to understand.But there’s a requirement to learn Hydration. We must first understand client-side rendering (CSR) and server-side rendering (SSR). The concept of Hydration lies within the problems of CSR.The eBook is a 4-step framework to build projects and learn skills that enable you to attain practical experience in your field and become a developer whom recruiters and clients cannot say "No" during the discovery call.CSR is a rendering method that renders the entire application on the client (the user’s browser), including the execution of huge JavaScript files instead of rendering specific pieces of code on the server that do not require user input and others on the client.When users visit our website, CSR renders an empty HTML document on their Browser without any data because that’s how fundamentally React works. If you’ve used React, you would know that every HTML page gets combined into one root file, and that file looks something like this.This empty file gets returned to the client browser when there’s a request. Once the browser locates the bundled JS files in this HTML file, the browser begins executing and parsing that JavaScript code, which contains the HTML DOM elements to fill the empty root div. Till then, the user witnesses a blank page.The JavaScript code in the