Frontend development has become very easy over the years. We have so many tools and frameworks that make coding simple and organized. We have Vuejs, Angular, jquery, React, etc. So many choices exist that are different in their approach.
Out of all of these, one has become the most popular — Reactjs. React was created in 2013 by a Facebook engineer. Since then, it has slowly picked up more users every year. One of the main reasons for its popularity is the ease of use. If you know basic vanilla javascript, HTML, and CSS, you won't have any problem with React.
You can break down every application into different components. Every component has its own logic and CSS. For example, you might have a Navbar. You can create one component and use it through your application. Breaking down everything into smaller pieces is excellent when making rich UI web apps.
That's not all! You also get a virtual DOM for fast rendering, easy testing capabilities with Jest, and easy scaling capabilities. You can also use React native to make Android and IOS apps easily.
There is also great community support, and countless companies use it in their tech stack.
All this sounds so great, doesn't it? I would say almost everything is perfect. React uses something called Client-Side Rendering(CSR). Let's look at more of this in detail in the next section.
Client-Side Rendering
In CSR, the initial request loads the page, CSS, and javascript(no HTML). The initial page load is very slow but renders faster later. The Javascript then creates the HTML for users to view the page. This happens after the browser executes React. When you go to a different page, the javascript requests more information and creates new HTML. This HTML is injected into the same initial HTML file in the root div.
Pros of CSR
Great for making Web applications. The learning curve at the start is great for new developers. After the initial load, page rendering is very fast. Great user experience. Great support from libraries. (NPM packages)Cons of CSR
Very slow initial load Bad SEOServer-Side Rendering
As the name suggests, the server renders the HTML and serves it to the browser. You don't have to wait for so long on the initial load. Every page is a separate call to the server.
Since the whole page comes from the server, search engine crawlers can crawl everything. Every page can have separate meta tags and keywords related to it.
Pros of SSR
Find out more about this interesting topic here.
