DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for What is a Web Server and how do Web Browsers communicate with it?
Duc Le
Duc Le

Posted on

What is a Web Server and how do Web Browsers communicate with it?

Introduction

The World Wide Web (WWW), commonly known as the Web is very important in our lives. It is an information system enabling documents and other web resources to be accessed over the Internet.

In this article, I will give an overview on what is a Web Server, how it works, and how Web Browsers communicate with it.

What is a Web Server?

β€œWeb Server” can be refer to both software or hardware.

Web Server as a hardware is a computer that stores web server software and a website’s component files (for example, HTML documents, images, CSS stylesheets, and JavaScript files). A web server connects to the Internet and supports physical data interchange with other devices connected to the web.

Web Server as a software includes several parts that control how web users access hosted files. Or you can call it is an HTTP server. An HTTP server is software that understands URLs (web addresses) and HTTP (the protocol your browser uses to view webpages). An HTTP server can be accessed through the domain names of the websites it stores, and it delivers the content of these hosted websites to the end user’s device.

How does a Web Server work?

At the most basic level, whenever a browser needs a file that is hosted on a web server, the browser requests the file via HTTP. When the request reaches the correct (hardware) web server, the (software) HTTP server accepts the request, finds the requested document, and sends it back to the browser, also through HTTP. (If the server doesn’t find the requested document, it returns a 404 response instead.)

To publish a website, you need either a static or a dynamic web server.

A static web server, or stack, consists of a computer (hardware) with an HTTP server (software). We call it β€œstatic” because the server sends its hosted files as-is to your browser.

A dynamic web server consists of a static web server plus extra software, most commonly an application server and a database. We call it β€œdynamic” because the application server updates the hosted files before sending content to your browser via the HTTP server.

For example, to produce the final webpages you see in the browser, the application server might fill an HTML template with content from a database. Sites like Medium or Wikipedia have thousands of webpages.

These kinds of sites are composed of only a few HTML templates and a giant database, rather than thousands of static HTML documents. This setup makes it easier to maintain and deliver the content.

How Browsers communicate with Servers

If you pay attention, you will know Web browsers communicate with web servers using the HyperText Transfer Protocol (HTTP). When you click a link on a web page, submit a form, or run a search, the browser sends an HTTP Request to the server.

This request includes:

  • A URL identifying the target server and resource (e.g. an HTML file, a particular data point on the server, or a tool to run).
  • A method that defines the required action ( GET, POST, PUT, PATCH,…)
  • Additional information can be encoded with the request (for example, HTML form data, URL parameters, or cookies)

Web servers wait for client request messages, process them when they arrive, and reply to the web browser with an HTTP Response message. The response contains an HTTP Response status code indicating whether or not the request succeeded (e.g. β€œ200 OK" for success, "404 Not Found" if the resource cannot be found, "403 Forbidden" if the user isn't authorized to see the resource, etc.). The body of a successful response to a GET request would contain the requested resource.

When an HTML page is returned it is rendered by the web browser. As part of processing the browser may discover links to other resources (e.g. an HTML page usually references JavaScript and CSS pages), and will send separate HTTP Requests to download these files.

Both static and dynamic websites (discussed in the following sections) use exactly the same communication protocol/patterns.

Conclusion
In the article, we have discussed on what is a web server, how it works and how web browsers communicate with it.

The article is heavily based on MDN, you can find it here.

Top comments (1)

Collapse
 
naubit profile image
Al - Naubit

Hey, it was a nice read, you got my follow, keep writing!

Join 900k+ Developers on DEV

You'll see more of the content that brought you here.