Different Types of Websites
Tags: webdev, beginners, websites, design
Published: 2022-01-10 01:52:10

In the web development world, there are many types of websites. Let's explore each of them one by one.

- Static Website
- Single Page Applications
- Server-Side Rendering (SSR)
- Static Site Generator


## 🎯 Static Website

- Just be made of HTML pages and could also include CSS and javascript
- We have to upload HTML pages to CDN to host them on the web and whenever we request those pages in a browser it would return them to us. 
- So for every new page, we made a new request to the server. 

![static 4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641751175240/CrLzE5Iz1.png)

### ✅ Advantages

- Good for SEO
- Easy to learn

### ❌ Disadvantages

- Hard to update/maintain pages (re-writing a lot of the same code on every page).
- New request to the server is made for every page which eventually slows down the website.
- Generally does not contain dynamic data.

## 🎯 Single Page Application

- Based on the concept of **Client-Side Rendering**.
- A single-page application is an app that works inside a browser.  
- SPAs are structured as a single HTML page that has no preloaded content.
- Content is loaded via Javascript files for the entire application and housed within a single HTML page.
- Only a single server request was made for the initial empty HTML page.
- Everything else (routing, data) is handled by the SPA in the browser.
- Typical React/ Vue applications come under this category. 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641740735930/rGfyKuLoa.png)

This type of website basically handles navigation in-page, without loading new pages via HTTP. A SPA website usually loads once, & after that manages all links & forms submission with JS through AJAX request in the background.

### ✅ Advantages

- There is no extra request to the server for other pages which makes the website bit faster. 
- Since SPAs are component-driven so it is easy to update.

### ❌ Disadvantages

- It is not good for SEO because of load time & the initial request is for a blank HTML page.

## 🎯 Server-Side Rendering

- HTML pages are built on the server-side after every page request.
- Server gets the data from various sources like databases, aggregates them into template files, and then sends the resulting HTML file back to the browser. 
- PHP or Nodejs with templating engines like `EJS`, `jade`, `hbs` comes under this category.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641748425131/jlBxfwOD3.png)

### ✅ Advantages
- Good for SEO as we get content-rich HTML back from the server on each request.
- Easy to update

### ❌ Disadvantages
- New request to the server is made for every page.
- Server can take time getting data from various sources & rendering pages that slow down a website a little bit.


## 🎯 Static Site Generator

- Process that takes templates, components, and data and then generates `static HTML` pages based on these things not on the server but at **build time** before we even deploy the application to the web.
-  **Gatsby** with React can be used for Static-Site Generator. Other examples are **Next.js** or **Nuxt.js**.
- Inside a Gatsby run a build command on our computer, It takes all of our React components, fetches any data that it needs and combines them, and then generates a **static HTML** file for each page that we have along with the Javascript bundle too.
- Then, we just deploy all of those HTML pages & Javascript to a CDN to host, so it becomes a bit like a **static site** at this point where each page has its own ready-made html file.
- So, once we deployed this we'd maybe request one of these pages from the browser and the server would send it right back pretty quickly since there is no Server-side rendering involved. It's all pre-rendered HTML

![ssg.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641749547508/7gszqnB_T.png)

- Once we have the page in the browser, the javascript bundle in that HTML page (also generated by gatsby) would kick in and the website would behave much like a Single Page Application.

- Routing is handled in the browser which makes the website really quick and no extra requests for other pages are sent to the server.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641749814953/u-KBjTaXEr.png)

### ✅ Advantages

- Better SEO, because our initial request for a page sends back a content-rich pre-rendered HTML.
- Easy to update
- Faster, as no extra request is made to the server.  
- Can handle as many different data sources.

### ❌ Disadvantages

- High build time
 
## 🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together.

[LinkedIn](https://www.linkedin.com/in/anuradha-aggarwal-4a2751107/) [Twitter](https://twitter.com/Anuradh06359394) [Instagram](https://www.instagram.com/blogcode404/)

[![Buy-me-a-coffee](https://cdn.buymeacoffee.com/buttons/v2/default-blue.png)](https://www.buymeacoffee.com/anuradha2612)