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
- 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.
- Good for SEO
- Easy to learn
- 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.
- 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.
- 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.
- 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
hbscomes under this category.
- Good for SEO as we get content-rich HTML back from the server on each request.
- Easy to update
- 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 HTMLpages 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.
- 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
Routing is handled in the browser which makes the website really quick and no extra requests for other pages are sent to the server.
- 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.
- High build time
🎯 Wrap Up!!
That's all for this article. Thank you for your time!! Let's connect to learn and grow together.