How Servers and Browsers Interact
You may have heard the terms "servers", "browsers", "clients", "networks", etc. If you're anything like I was, you must be wondering to yourself, "What the heck is that?" In this VERY watered-down tutorial, I will break down these concepts for you. To make it fun even, I will use food analogies throughout the whole tutorial to break it down for you.
Browsers and Clients
The browser and the client refer to the same entity: the device through which the user views websites (eg Google Chrome, Firefox, Safari, etc.)
Browser/client is the customer looking at the menu.
Servers
The server is a computer that responds to requests over the internet.The server is the waiter who takes the client's orders, brings it to the kitchen, and returns with the food item. In similar fashion, the server takes and processes orders in response to client demands/requests. In Internet-speak, the server can request data from APIs or databases, runs backend logic, sends data, and more to browsers so the client can view the website. TLDR: when a client requests to view a website, a request is sent to the server to pre-load the data. Sometimes, the loading can happen with a delay. This happens with client-side rendering.
Let's differentiate Client-side vs Server-side Rendering:
Client-side rendering happens in the user's browser after the page loads, while server-side rendering generates the HTML on the server before sending it to the browser. Server-side rendering is better for search engine optimization (SEO) because search engines can immediately read the content without waiting for JavaScript to run. Client-side rendering may result in slower initial load times and less visibility to search engines if not handled properly.
The Interaction
If the previous section confused you, let me explain how the browser and server communicate.
- User enters URL in browser (client).
- Browser sends an HTTP request to the server in a form called the GET Request. In layman terms, the request is basically going, "Please give me the content for this page! I wanna see!"
- Assuming we're using Next.js, the server identifies that the route to that desired page exists. If the route is a Server Component (look below if you're confused), it will run server-side running. (Seriously, if you're confused, look below).
- If extra data or API calls need to be made, the server component will have to do some extra work. For instance, if making API calls, the component will use what's called asynchronous functions like
await fetch()to fetch for information. (Again, if you're confused, look below). Here, APIs are like where the kitchen gets their ingredients from. Alternatively, if conducting database queries, this will also be processed. Databases are like the inventory of all the resources the kitchen has. - These requests are often complex so it can take some time. We wouldn't want the server to just sit there not doing anything until the results came back; that would be inefficient. Thus, server components use asynchronous functions and await (ie server waits asynchronously for the data to be retrieved, in the meantime it can do other tasks). Once everything has been received and processed, the page is rendered. This is called Server-side Rendering. Basically saying the server prepares everything before the page is displayed on the browser. Asynchronous functions are like timers; reminders that allow us to complete other tasks but remind us when the task we're awaiting on has finished.
Server Components
This is where the browser content is going to go. The server component is like the prepared dish made on demand based on the client's request.
Asynchronous Functions
As mentioned before, it would be very inefficient if the server just stood around not doing anything until the dish was finished by the kitchen. Imagine if you went to a restaurant and saw the waiter just stand there staring at the kitchen staff until the food was done being prepared. That would be a horrible waiter! Instead, a good waiter would be multi-tasking, tending to other customers, cleaning tables, getting water, etc. In the same fashion, an efficient server would continue on with other tasks while the required data was done being fetched.
Servers can do this "asynchronous" labor while the data/requests are being fetched because of theasync and awaitkeywords in JavaScript. To be clear, async declares a function that will return a promise.await pauses the execution of this function until the promise is delivered.