There are different types of websites/web apps that come with their own advantages and tradeoffs. The main categories of websites include:
- Static websites
- Single page applications (SPAs)
- Server side rendering (SSR)
- Static site generator
When choosing which type of website is best for your needs, you need to look at many factors including SEO, speed, ease of maintenance, technical skill, hosting, and more.
In this article, I will be comparing these four different types of websites based on SEO, speed, ease of maintenance.
SEO (Search Engine Optimization) relates to the process of increasing the traffic to a website from search engines.
Speed refers to how fast your website loads upon initial request and on any subsequent page requests.
Ease of maintenance deals with how convenient it is to update your code; is it modular or repeated?
Static websites
Static websites are made up of static HTML pages (which may include JavaScript and CSS).
Static simply means the site is not generated on the server. Instead of being rendered dynamically, the HTML (and CSS/JS) files just sit on the server waiting to be sent off to a client.
These website pages are uploaded to a CDN / web host. To view a new page on the site, a new request needs to be made to the server.
Static websites have good SEO because web crawlers can view all of the HTML content since the fully populated pages are sent from the server.
On the other hand, static sites are more annoying to update because they require more code re-writing. For example, if you want to change the design of a navigation bar used on all pages, you must manually update it on each page.
These sites can also be slow when navigating to a new page because you need to make a new request to the server each time.
These websites also are not the best at handling and displaying dynamic data.
Single Page Application (SPA)
A single page application is a web application that loads only a single page and updates the body content dynamically using client-side JavaSCript.
Only a single server request is made for an initial mostly-empty HTML page. The pages are populated with content using JS on the client side.
Some examples of SPA frameworks are React or Vue. These frameworks control all of the content, pages, and data fetching from the browser, not the server.
SPAs are faster than traditional static sites because SPAs only require 1 server request.
SPAs utilize component-driven design which makes updating the UI easier because you only have to update it in one place
SPAs are not SEO friendly because the server sends back blank HTML pages.
Server Side Rendered (SSR)
Server side rendered pages are rendered on the server– on the fly– after every page request
When a page request is made, the server first gets any data for the page from a database, then puts that data into a template file, and sends back the resulting HTML page to the browser.
SSR pages are good for SEO and they are easy to re-design because they use templating.
Because a fresh request must be made for every page, these types of sites can be slow.
Static Site Generator
Static Site Generation describes the process of compiling and rendering a website at build time before the site is deployed to the server.
Static pages are compiled at build-time (before deployment)
Before deployment, the SSG framework builds the site and fetches any data that needs to be put into pages. The framework then spits out static pages and a JS bundle that can be deployed to a CDN or static host.
The initial request for the site requires the server to send the files (similar to static site), but the site behaves more like a SPA afterwards: all routing is handled by the JS bundle.
This makes SSGs good for SEO, speed, and updatability.
You will have to decide which type of website is best for you based on the strengths and weaknesses of each type and how important these factors are to the website you’re building.
Joshua Bowen's Notes 