Hello learners!
Ever thought how does your display so many visuals on the screen? Ever thought who sends those visuals? Ever thought how all of this works in sync?
This article comprehensively answers the above questions. The article revolves around the concept of Client-Side & Server-Side, how they work with each other to display your favourite websites to you. The article will be easy to comprehend with diagrams, analogies and easiest explanations. So let’s dive into it.
Client-Side 👨🏻💻
Whatever the user directly interacts with is called Client-Side. It involves both the user-interface as well as the logic that runs in your browser.
All the page renderings, clicks, typing, animations etc. are demonstrated on the Client-Side. The browser (Client) takes the help of the server to fetch the information to be rendered and displays it accordingly.
Analogy → You watch live cricket on TV. You directly interact with the TV by using the remote. This is client side.
Workflow Of Client-Side 🌊
The browser send a request to the browser to fetch the information that it needs to display
The server sends the requested data in return. It can be HTML, CSS files.
After receiving these files, the browser (client) displays the content accordingly to the user.
Challenges For Efficient Client-Side Rendering 🧗🏻
Performance Challenges → If the server responds back with files which are too large, let’s say a JavaScript file, then there can be some performance issues on the client side. It can slow down the rendering on the page.
Compatibility Issues → The behaviour of the client side can vary from browser to browser. It becomes important for the frontend developers to test the web application across various browsers and also for the browser vendors to follow the standards while building their browsers.
Security → It becomes important to make sure that the Client-Side is protected from attacks specifically targeted on it. For example → Cross-Site Scripting (XSS), it happens when a culprit injects some malicious scripts into the website’s content and the malicious script gets executed when the user uses the browser.
Server-Side ⚙️
Client-Side can be directly interacted by the user but it is not the same with Server-Side. Whatever happens on the Server-Side remains hidden from the user. It is where the backend logic of the web-application resides. It is responsible for storing/retrieving the data, processing the requests of the client & sending appropriate responses in return to the client.
Analogy → You don’t know what is happening behind the scenes. You are just enjoying the cricket match on TV, but you don’t know what operations are being done in the background to stream it live. This is Server-Side.
Workflow Of Server-Side 🌊
The client sends the request to the server.
The server processes the received request.
It performs backend operations using the logic which has been coded in the server program, if needed, based on the type of request along with some other operations.
It returns the processed data to the client. For example, a JSON data or a rendered HTML page. Rendered HTML page enables the client to load the page faster as it already comes in a rendered format.
Challenges For Efficient Server-Side Operations 🧗🏻
Latency Challenges → If the backend logic implemented by the developer is inefficient then it can take too much time for the requests made by the client to be processed leading to slower page loading and other issues.
Server Overload → If a website is facing high traffic then it can lead to server overloading. Rate limiting can be helpful in this sense.
Security Issues → Backend contains so much of the information → Database information, Backend Logics and what not! It becomes important to protect it from attacks like DDoS, Data Breaching etc.
Conclusion 🏁
It is evident after covering the topic that both the Client-Side & the Server-Side, work together and not against each other. That is why the cover image of the article shows them shaking hands rather than fighting. They both complement each other’s working and both serve different purpose at the same time. Knowing the workflow of both sides become important to understand how the whole thing works together in giving the user the best experience. Thank you for reading till here. Follow for more such articles.