Table of Contents
Introduction
The Importance of Intentional Learning
The Birth of React
Understanding Server-Side Rendering (SSR)
The Dominance of Server-Side Rendering in Early Web Development
How Server-Side Rendering Works in React
Challenges of Server-Side Rendering
JavaScript to the Rescue
Enhancing Interactivity with JavaScript
Tools for Dynamic DOM Manipulation
Client-Side Rendering (CSR)
How Client-Side Rendering Works
Benefits of CSR for User Experience
CSR and Single Page Applications (SPAs)
What Are SPAs?
How SPAs Work Behind the Scenes
React: Simplifying Dynamic User Interfaces
React’s Core Focus on UI Development
How React Simplifies DOM Updates with the Virtual DOM
Comparing CSR and SSR
Strengths and Weaknesses of Each Approach
When to Use CSR vs. SSR
Conclusion
Reflecting on the Evolution of Web Development
React’s Role in Modern UI Development.
Learning intentionally is one of the best ways to kick off your learning journey. When you are about to learn something new, the first thing to do is ask why this thing exists in the first place and what problem it solves.
The idea of React was born out of the need to build a more dynamic and interactive user interface (UI). The team at Facebook was really overwhelmed because the server side couldn't do more on the interactivity and dynamism required for their applications. The client-side wasn't the savior they expected either; it fell short; it was slow due to large JavaScript bundles that made the user experience less efficient.
React came out of all these; our focus in this article is to break down client-side rendering and server-side rendering. Because I am a React developer, I will be channeling the conversation around React and how it concerns React.
Once upon a time in the era of web development, the server side was dominant, and as you would guess, websites were statically built; all the content was generated on the server and sent to the browser as a complete HTML file, with almost no interactivity going on.
Simply put, the server-side component renders all the content on the server, and a full HTML is sent to the browser.
Here is how server-side rendering works: in React:
All the code written in the body of the component and inside the return block is executed on the server, which is your computer or another server hosting your app. After this execution, a fully formed HTML is generated and sent to the browser.
Every time a user interacts with the page, be it via a click button or something else, the browser would have to send a request to the server, and a new HTML file would be generated. This process was slow and obviously caused a reload anytime it was triggered.
Javascript to the Rescue
As the web revolved, the need for a more interactive and dynamic user experience became a thing, shifting much of the responsibility for rendering content from the server to the browser. Thankfully, JavaScript made this possible. It allowed developers to interact with the browser directly via the DOM. With tools like document.getElementById() and innerHTML, developers can now dynamically change the content of an HTML page.
Client-side Rendering
In client-side rendering (CSR), everything happens on the browser. First, a basic HTML and CSS file is sent to the browser, after which JavaScript updates everything that needs to be updated and renders the rest of the content dynamically.
This seamless interaction made Single Page Applications possible, users can interact on a single page without any reload.
CSR and Single Page Applications (SPAs)
How SPAs Work:
Here, the browser loads a single HTML file and uses JavaScript to dynamically update the page as the user interacts with it. Under the hood, data is fetched using an API. In the end, there is seamless interaction because only the necessary data is fetched, resulting in smooth transitions and no page reload.
React is a JavaScript library with a sole focus on creating interactive and dynamic user interfaces (UIs). While there are other tools like React Router, React Form, and more that complement React to handle specific tasks, the core value of React is to fine-tune the user experience and make building UIs easier for developers.
How React Simplifies DOM Updates:
In JavaScript, as a developer, you would have to manually update the DOM, and this process can be very tedious and error-prone. React simplifies this process by allowing developers to focus on building a good UI while it takes care of updating the DOM. React does this with its Virtual DOM, a lightweight, in-memory version of the DOM. React uses this virtual DOM to figure out the particular changes needed and update the actual DOM, making the process seamless and fast.
So far, we have covered how client-side rendering (CSR) and server-side rendering (SSR) each have their own unique strengths and weaknesses. We also went down the JavaScript lane and how it became the backbone of modern web development. Finally, the obvious elephant in the room, React, we dabbled into how React simplifies this process by providing a way to build dynamic and efficient user interfaces that enhance the user experience.
I would really appreciate your input on this article, as well as your opinions and constructive criticism. Thank you.
Photo Credit: Altamira.ai