The Client & Server model is actually a very detailed and nuanced architecture. However, in the case of our MERN stack project, the definition is simplified and relaxed.

Definitions

Client

in the “coding” world and in this case, a client would be a device (computer, mobile, etc.) requesting some resource(s) through networks

Server

a centralized hub serving resources to many clients

Client & Server model

You may have heard the terms “frontend”, “backend”, or “fullstack”. This is analogous to client and server terms and usually used to describe areas of expertise. “Frontend” is referring to the user interface (e.g websites) and a “frontend” developer is one that usually builds websites. “Backend” is a wider scope and covers databases, security, server-side functions, and much more. Backend developers don’t really work with what’s displayed on a website (that’s the frontend-er’s job), but they implement the functionality such as submitting a form or visiting another page. “Fullstack” refers to having knowledge in both frontend and backend. And in the MERN guide, we go into a fullstack project.

Why Client & Server? 🤷

In the MERN boilerplate, the project is split into client/ and server/ subfolders. Though both subfolders are in 1 root folder, they are independent of each other. The client/ folder contains code for the UI/UX (user interface and user experience) and is what the user sees when visiting the url to the website. server/ contains code for additional functions and interact with the database containing important information.

There are a lot of reasons why the client and server model is advantageous. Here are a few.

• 👟 Faster processing for the client. Not all devices are created equal. 1+1 on one computer may take longer to compute than another. By putting the “expensive” (using the most processing and takes the most time) functions in the server (which usually has a high processing power), it offloads the amount of processing/computing the client does.
• 🔒 More secure. Databases contain sensitive information (e.g. passwords). If your client accesses the database directly, it is prone to malicious attacks since all the credentials to access the database is on the client side. A server acts like a middleman, hiding the database credentials and only returning specific data. There are more security benefits, but they are very technical and a bit outside this scope.
• 📈 Scalable. ****You scale your application by increasing performance to satisfy the increased requests. Frontend and backend scales differently, and it usually refers to the scaling of the backend and database. You can scale your server in many ways (better processing power per server, or more servers). Having more servers, especially all around the world, means a better balance of handling many clients with a faster response time.