57-Nodejs Course 2023: Http Response In Depth

In our previous article, i introduced our Response class layer, but i totally forgot to explain what is Http Response in depth as i did in Http Requests, so this article will be a more academic to illustrate the Http Response in depth.

Http Response

Http Response is the response that the server sends to the client, (server here means our application probably), it contains mainly the status code, headers, and the body.

I said probably the response will be from our application as some times the server respond directly without even reaching our application, for example if the user hits a url to path of application does not exists, thus the server will respond directly with 404 status code and html page to the client.

Response Parts

Now let's see what does the response consists of in detail.

Status Code

The status code is a number that represents the status of the response, it can be 200, 201, 400, 404, 500, etc. The status code is the most important part of the response as it tells the client what happened, for example if the status code is 200, it means the request was successful, if the status code is 400, it means the request was not valid, if the status code is 500, it means the server has encountered an error.

So each status code starts with a number represents a group of related status codes, for example 2xx means the request was successful, 4xx means the request was not valid, 5xx means the server has encountered an error.

Types of status codes:

• 1xx: Informational - Request received, continuing process, usually used by proxies and load balancers.
• 2xx: Success - The action was successfully received, understood, and accepted.
• 3xx: Redirection - Further action must be taken in order to complete the request.
• 4xx: Client Error - The request contains bad syntax or cannot be fulfilled.
• 5xx: Server Error - The server failed to fulfill an apparently valid request.

Here is a list of the most common status codes with its best practices recommendations:

• 200 - OK: The request was successful, this is the most common status code.
• 201 - Created: The request was successful and a new resource was created, this usually used with POST requests to create a new resource.
• 301: Moved Permanently: The URL has been changed permanently, this usually used when the url of a resource has been changed.
• 400 - Bad Request: The request was not valid, this usually used when the request body is not valid, AKA when validation fails.
• 401 - Unauthorized: The request was not authorized, this usually used when the user is not logged in and trying to access a protected route with a logged in user only.
• 404 - Not Found: The requested resource was not found, this usually used when the user is trying to access a resource that does not exists, for example when user trying to access a product with id 123 but there is no product with id 123 or that id is not active.
• 422 - Unprocessable Entity: The request was valid but the server cannot process it, this usually used when the request body is valid but the server cannot process it, for example when the user is trying to create a new product but the product name is already taken.
• 429 - Too Many Requests: The user has sent too many requests in a given amount of time, this usually used when the client is sending too many requests in very short time, so the server will block the user for a while.
• 500 - Internal Server Error: The server has encountered an error, this usually used when the server has encountered an error and can't handle the request, for example when the server is trying to connect to the database but the database is down.

Here is another less common status codes:

• 204: No Content: The request was successful but there is no content to send in the response, this usually used with DELETE requests to delete a resource.
• 302: Found: The URL has been changed temporarily, this usually used when the url of a resource has been changed temporarily.
• 304: Not Modified: The client has a cached version of the resource, this usually used with GET requests to get a resource.
• 403 - Forbidden: The request was not authorized, this usually used when the user is logged in but trying to access a protected route that he is not allowed to access, can be used with permissions system.
• 409 - Conflict: The request was valid but the server cannot process it because of a conflict, this usually used when the user is trying to create a new product but the product name is already taken.
• 410 - Gone: The requested resource is no longer available and will not be available again, this usually used when the user is trying to access a resource that does not exists, for example when user trying to access a product with id 123 but there is no product with id 123 or that id is not active.

Headers

The headers are key-value pairs that contains additional information about the response, for example the Content-Type header tells the client what is the type of the response body, the Content-Length header tells the client how long is the response body, the Cache-Control header tells the client how long the response can be cached, the Set-Cookie header tells the client to set a cookie, the Location header tells the client to redirect to a new url, etc.

Here is a list of the most common headers with its best practices recommendations:

• Content-Type: Tells the client what is the type of the response body, most common types are: application/json for json response, text/html for html response, text/plain for plain text response, application/octet-stream for binary response AKA streaming files, this header is used in both request and response.
• Content-Length: Tells the client how long is the response body, the length is in bytes, this header is used in both request and response.
• Cache-Control: Tells the client how long the response can be cached, this header is used in both request and response, its value is in seconds, for example Cache-Control: 3600 means the response can be cached for 1 hour, Cache-Control: 0 means the response can't be cached, Cache-Control: no-cache means the response can be cached but the client must revalidate it before using it, Cache-Control: no-store means the response can't be cached and must not be stored anywhere, Cache-Control: public means the response can be cached by any cache, Cache-Control: private means the response can be cached by private caches only, Cache-Control: max-age=3600 means the response can be cached for 1 hour, Cache-Control: s-maxage=3600 means the response can be cached for 1 hour by shared caches only, Cache-Control: must-revalidate means the response can be cached but the client must revalidate it before using it, Cache-Control: proxy-revalidate means the response can be cached by shared caches only but the client must revalidate it before using it.
• Set-Cookie: Tells the client to set a cookie, this header is used in both request and response, its value is in the format key=value; path=/; expires=Wed, 21 Oct 2015 07:28:00 GMT; domain=example.com; secure; HttpOnly, the key is the name of the cookie, the value is the value of the cookie, the path is the path of the cookie, the expires is the expiration date of the cookie, the domain is the domain of the cookie, the secure means the cookie can only be sent over https, the HttpOnly means the cookie can't be accessed by javascript, for example Set-Cookie: name=John Doe; path=/; expires=Wed, 21 Oct 2015 07:28:00 GMT; domain=example.com; secure; HttpOnly, actually this header we'll not probably work with as we work with APIs only and we don't need to set cookies, but it's good to know about it.
• Location: Tells the client to redirect to a new url, this header is used in both request and response, its value is the new url, for example Location: https://example.com, actually this header we'll not probably work with as we work with APIs only and we don't need to redirect, but it's good to know about it.

Also you can send any other headers that contains additional information about the response, for example you can send the X-Total-Count header to tell the client how many items are in the response body, you can send the X-Page-Count header to tell the client how many pages are in the response body, you can send the X-Current-Page header to tell the client what is the current page in the response body, you can send the X-Per-Page header to tell the client how many items per page are in the response body, etc.

This we'll use in our APIs to send additional information about the pagination details.

Body

The body is the actual content of the response, for example the body of a json response is a json object, the body of a html response is a html document, the body of a plain text response is a plain text, the body of a binary response is a binary file, etc.

In out apis we'll send json responses, so the body of a json response is a json object, unless we're returning files or streaming files, in that case we'll send binary responses.

Response Time

The response time is the time it takes for the server to send the response to the client, this time is measured in milliseconds, for example if the response time is 100ms then it means the server took 100ms to send the response to the client, the less the response time the better, the response time is affected by many factors, for example the server hardware, the server software, the server network, the server location, the server load, the server database, the server database network, the server database location, the server database load and the complexity of the request, for example if the request is simple then the response time will be less than if the request is complex.

Response Size

The response size is the size of the response in bytes, for example if the response size is 1000 bytes then it means the response is 1000 bytes long, the less the response size the better, actually if the response is large, the browser will take more time to render it, so the less the response size the better, i encountered this issue before as the response time was long because the response was over 2MB, so the browser took more time to render it, so i reduced the response size by removing some data from the response and the response time was reduced from 2 seconds to 500ms.

🎨 Conclusion

In this article we illustrated Http response in more detail, the response status code, the response headers and the response body, we also illustrated the response time and the response size.

In our next article, we'll continue with our Response class to implement response events and enhance request class as well to use our response class to send response.

🚀 Project Repository

You can find the latest updates of this project on Github

😍 Join our community

Join our community on Discord to get help and support (Node Js 2023 Channel).

🎞️ Video Course (Arabic Voice)

If you want to learn this course in video format, you can find it on Youtube, the course is in Arabic language.

📚 Bonus Content 📚

You may have a look at these articles, it will definitely boost your knowledge and productivity.

General Topics

• Event Driven Architecture: A Practical Guide in Javascript
• Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript
• After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL

Packages & Libraries

• Collections: Your ultimate Javascript Arrays Manager
• Supportive Is: an elegant utility to check types of values in JavaScript
• Localization: An agnostic i18n package to manage localization in your project

React Js Packages

• useFetcher: easiest way to fetch data in React Js

Courses (Articles)

• React Js: Let"s Create File Manager With React Js and Node Js