Topics
client-side vs server-side: A comprehensive Guide for Beginner
HTTP Request: Response Cycle: What happens behind the scene ?
Web Servers and Hosting: How your website becomes accessible to the world
My selected topic is :-
1. client-side vs server-side: A comprehensive Guide for Beginner
When discussing client-side and server-side, the first question is: Who is the client, and what is the server?
Example in the Digital World:
When you create a Gmail account, you are the client, and Google acts as the server.
Real-Life Analogies:
Grocery Shopping: When you visit a grocery shop to purchase items, you are the client, and the shopkeeper serves as the server, providing you with the items you need.
Hotels and Restaurants: When you dine at a hotel or restaurant, you are the client, while the hotel manager or owner serves as the server, offering services as part of their business.
In computing terms, both the client and the server play crucial roles in rendering or processing information:
The client typically renders the user interface and handles interactions, such as displaying web pages, forms, or applications for users.
The server processes and renders data or responses, such as delivering requested resources, managing databases, or running backend logic.
Before diving into client-side and server-side rendering, let's first understand how a website works.
If Shubham wants to access Malay's data, Facebook won't send him Malay's data because Facebook, or any other server, don’t share someone else's data.
There are many protocols for sharing data with clients. These protocols explain how a client communicates with a server or how a browser interacts with a server. You can learn more from this link.
Okay, Let us come to rendering part of both Client side and Server side
First, we need to understand how our data flows from the source code to the client's browser.
Summary of the diagram
Source code is combination of frontend and backend code which deploy after building phase of the source code to a server. After deploying the server communicates with the browser or client via HTTPS, ensuring secure data transmission.Client-side Rendering (CSR) :-
→ Client side rendering is a way of displaying web pages
→ Rather than using static HTML and CSS, client side rendering utilizes JavaScript, which will run and display a web page
→ Using client side rendering has been relatively more recent, and gained popularity in Frontend Development.
In Client-Side Rendering (CSR) with React, the browser downloads a minimal HTML page and the JavaScript needed for the page. The JavaScript is then used to update the DOM and render the page. When the application is first loaded, the user may notice a slight delay before they can see the full page, this is because the page isn't fully rendered until all the JavaScript is downloaded, parsed, and executed.
After the page has been loaded for the first time, navigating to other pages on the same website is typically faster, as only necessary data needs to be fetched, and JavaScript can re-render parts of the page without requiring a full page refresh.
Let’s understand the CSR workflows
<div id="root"> for JavaScript to render the app). → The JavaScript file is executed, fetching dynamic content (if needed) and rendering the user interface (UI) on the client side. → The CSS file is also loaded for styling.Let's look at some pros and cons of client-side rendering.
Pros :-
High Performance:- Client-side rendering (CSR) generates HTML on demand. Unlike regular HTML pages, it doesn't refresh or re-render the entire page. Instead, it updates content on a single page, which saves a lot of computing power and RAM. This makes it faster than server-side rendering (SSR).
Enhanced User Experience: CSR offers a more fluid and interactive user experience since interactions are handled directly in the browser without requiring server requests for every change.
Cons :-
Slower Initial Page Load: When the page first loads, it can be a bit slow, showing empty styled components. It looks like there is data to display, but it's just empty UI.
SEO Optimization: Search engines might not effectively crawl or index content generated dynamically through JavaScript, which can affect SEO and discoverability.
Server-side Rendering (SSR) :-
→ Server side rendering is another way of displaying a web page.
→ This type of rendering utilizes HTML and CSS, converting it so the Web browser can understand it and display it.
Let us understand SSR workflows
Let's look at some pros and cons of server-side rendering.
Pros :-
Faster Initial page load time :-When the first page loads it is quite faster than client side rendering of first page
SEO optimizable: :- SEO optimization happens because the server generates and sends fully-rendered HTML pages to the browser. This allows search engine crawlers to access and index content directly, leading to better visibility in search results.
Cons :-
- Each page refresh or navigation triggers a new request to the server, which then dynamically renders the HTML and sends it back.
When we need CSR ? :-
When slow initial load is not a problem.
When we need lot of interactivity in an app
When we want an app to function like a single-page application that doesn't reload with every refresh.
When we need SSR ? :-
When initial loading time is more important.
When JavaScript and heavy interactivity is not required on the client - content website
Key Differences:
CSR (React) provides a faster user experience after the initial page load, as the page doesn't reload for navigation.
SSR involves reloading the entire page whenever a new component or route is accessed, making it slower for subsequent page navigation but better for SEO since the content is fully rendered on the server.