The Web For Aspiring Developers (Part II: Servers and Hosting)
Tags: codenewbie, webdev, beginners
Published: 2021-01-13 14:26:52

*Originally published on [https://frontendjoy.com/blog/how-the-web-works-for-aspiring-developers-part-two-servers-and-hosting](https://frontendjoy.com/blog/how-the-web-works-for-aspiring-developers-part-two-servers-and-hosting)*

Imagine it's your best friend's birthday 🎁.

You've decided to surprise him and cook its favorite food, `turtle with banana curry sauce` 🐢🥘.

Unfortunately, you don't know how to cook that meal. So you need:

- **Ingredients** - e.g: turtle, banana, ...
- **Instructions** on what to put in the meal, how to mix the ingredients, how long the cooking, etc...

**Similarly**, to display a web page, your browser needs:

- **Data** (ex: images, videos, JSON, etc.) - For example, when using twitter.com, you need a list of posts.
- **Instructions** on what to show, how, where. Those are stored in files (e.g: HTML, CSS, JS files)

These **must be stored** somewhere. That's where servers intervene.


![cooking vs accessing a Web resource](https://frontendjoy.com/_next/image?url=%2Fstatic%2Fimages%2Fhow-the-web-works-for-aspiring-developers-servers%2Fcooking_vs_displaying_page.webp&w=1200&q=75)


# What is a server?

A **server** is a computer that provides resources to other computers called **clients**.
It stores data (e.g., files, images, etc.) and delivers it to clients **on demand**.
Think of it as a **24-hour restaurant** that serves food to clients.

There are various types of servers :

- **Web servers** ⇒ store and serve files needed to show a web page
- **Mail servers** ⇒ store and deliver emails
- **Database servers** => store and provide data
- Etc.

> So, if you want your website available online,
> you must store data + instructions on one or more servers.

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mb8cbbccpgvtby86s88n.jpeg)](https://twitter.com/intent/follow?original_referer=https://dev.to&region=follow_link&screen_name=joyancefa&tw_p=followbutton "Follow on Twitter")

# How to get one?

Any computer, even your own, can act as a server as long as it can store and deliver information.

Big websites like [google.com](http://google.com/) or [facebook.com](http://facebook.com/) have many servers. Think of them as restaurant chains (e.g., McDonald's, KFC).

But, like most people/companies, **you don't wanna own a server** because :

- They are expensive to maintain.
- They must be up 24H/7j to serve all clients around the world.
- They have to deliver the data fast.
- They need to preserve the websites from security attacks.
- Etc.

Instead, you pay 💰💰💰 a **Web hosting company** (e.g., [Bluehost](https://www.bluehost.com/), [Hostgator](https://www.hostgator.com/)). These companies own servers and **rent some space** on them. When you store your website data on these servers, we say your website is "hosted."


![Examples of servers](https://frontendjoy.com/_next/image?url=%2Fstatic%2Fimages%2Fhow-the-web-works-for-aspiring-developers-servers%2Fservers.webp&w=1200&q=75)

## What are the main types of Web hosting?

Depending on your needs and budget, if you want to "host" your website, you generally have **4 options** :

1. **Shared hosting**: you rent a part of a server and share its resources with other websites.
   This is equal to **renting a room in a shared apartment**: you share resources with other tenants.
   High traffic on them (i.e., too many visitors) will affect you.

![Shared hosting vs renting a room in an apartment](https://frontendjoy.com/_next/image?url=%2Fstatic%2Fimages%2Fhow-the-web-works-for-aspiring-developers-servers%2Fshared_hosting.webp&w=1200&q=75)


2. **VPS (Virtual Private Server) hosting**: you rent a larger part of a server and share fewer resources.
   See it like **renting an apartment in a building**: you have your own bathrooms/doors, but you still share some resources (water, heat, etc.).

   
   ![VPS hosting vs renting an apartment in a building](https://frontendjoy.com/_next/image?url=%2Fstatic%2Fimages%2Fhow-the-web-works-for-aspiring-developers-servers%2Fvps_hosting.webp&w=1200&q=75)

3. **Dedicated hosting**: you rent the whole server/computer. Think of it as **renting an entire building**.

![Dedicated hosting vs renting a building](https://frontendjoy.com/_next/image?url=%2Fstatic%2Fimages%2Fhow-the-web-works-for-aspiring-developers-servers%2Fdedicated_hosting.webp&w=1200&q=75)

4. **Cloud hosting**: you rent different servers. Think of it as **renting many buildings**.
   When one is inaccessible, you can still use others.

![Cloud hosting vs renting multiple buildings](https://frontendjoy.com/_next/image?url=%2Fstatic%2Fimages%2Fhow-the-web-works-for-aspiring-developers-servers%2Fcloud_hosting.webp&w=1200&q=75)

# Conclusion

Your browser **needs some data** to display a web page.
Powerful, 24H/7j online computers called **servers store that data**.
Because these are expensive, only big websites (e.g., google.com, twitter.com) have their own servers. Most use **Web hosting companies** (e.g., BlueHost, DreamHost) that have servers and rent some "place" on it.