In web development, client-side is a term that describes that describe where application code runs.
The Client-side is everything in a web application displayed or occurring on a client’s (end user’s) device, including what they see – images, text, and the rest of the UI. It also involves any actions performed by the app within the user’s browser.
The browser on the client-side interprets markup languages like CSS and HTML. Many developers now run client-side methods in their application architecture as business logic for dynamic webpages, such as in modern web applications.
This methodology is a shift from performing everything on the server-side. Client-side processes are nearly always written in JavaScript.
What is the Client-Server Model?
The client-side model is the basis for much of the internet. In the model, user devices communicate via a network with centrally located servers to obtain the data they need, rather than communicating with each other.
End-user devices, such as smartphones, desktop computers, and laptops, are considered the server’s ‘clients.’ In other words, it is as if they were customers acquiring a company’s services. Clients’ devices forward requests to servers for applications or webpages, and servers respond.
Developers use the client-server model because servers are typically more reliable and robust than user devices. They also are frequently maintained and stored in controlled environments to ensure constant availability.
Even if individual servers go down, other servers typically back them up. So, if users turn their devices on or off or break or lose them, it should not affect internet service for others.
Servers can simultaneously support multiple client devices, and each client device sends requests to various servers while accessing and browsing the internet.
Client-Side: Use Cases
Netflix is a globally known brand, hence an excellent example of how a client-side model works. If a user types ‘netflix.com’ into their browser bar, they generate a request to the DNS servers for the netflix.com IP address.
The DNS servers respond by serving the IP address to the browser. The user’s browser applies this IP to request Netflix’s servers to provide the content on the page – such as the Netflix logo, search bar, or movie thumbnail images. Netflix then loads the content on the client’s device. The client-side browser interprets how the HTML, JavaScript, and CSS controlling the Netflix main page appears to the user.
Moreover, the page can also respond to ‘events.’ for example, if the user’s mouse hovers over a movie thumbnail image, the image enlarges, and neighboring thumbnails move a little to the side to make room for the enlarged image.
But, again, this is a client-side process – the code inside the actual webpage responds to the user’s mouse and commences this action without communicating with the server.
Server-side refers to where processes run – in this case, on the server and not on the client.
