Anuradha Aggarwal

Posted on Jan 10, 2022 • Edited on Feb 27, 2022 • Originally published at anuradha.hashnode.dev

Different Types of Websites

#webdev #beginners #websites #design

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.

✅ 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.

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.

✅ 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

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.

✅ 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.