Although building and publishing a website is as easy as its ever been--easy enough that a beginner web developer can get a basic website up and going in the matter of days--the wide range and diversity of tools and technologies available to help you do so can make it difficult to orient yourself as you're surveying/navigating the space of modern web development. The table below contains a small sampling of the many different platforms you can use to build your website (the frontend part) and a short description of the platform taken directly from their websites.
As you investigate and try to make sense of what these platforms do, you will find yourself looking things up like:
- Static Site Generation (SSG) vs Server-Sider Rendering (SSR) vs Client-side rendering (CSR)
- Single Page Application (SPA) vs Multi-page Application (MPA)
- Static Website vs Dynamic Website
- Statically served website vs Dynamically served website
- Statically rendered vs Dynamically rendered
All of these terms relate to the topic of "rendering" which, in the context of this article, refers to to the creation/preparation of the html, css, and javascript files the browser uses to produce a web page, and clarifying their definitions is the goal of this article. What these words mean is highly contextual, and having a clear understanding of their definitions and the different ways they are used will preempt any confusion that may arise when encountering the same words describing various concepts.
Rendering HTML vs Rendering Pixels
In the context of this article, the word render refers to the creation/preparation of a website's html/css/js, but there's one other context in which you will see this word frequently used and that is in the process that the browser uses to paint all the pixels on the screen (https://blog.logrocket.com/how-browser-rendering-works-behind-scenes/). It's important to keep in mind that these are two different processes so you don't get confused when reading an article that contains the word rendering in both senses of the word.
Static vs Dynamic
- Static Website vs Dynamic Website
- Statically served website vs Dynamically served website
- Statically rendered vs Dynamically rendered
A static website refers to a website whose web pages' html, css, and js is prepared ahead of time before requests are made for it. It doesn't refer to what's happening on the screen--a static website can have animations and user interactivity and provide a "dynamic" experience. The website is referred to as static because the javascript that powers those animations and interactivity is generated once at build time.
A dynamic website refers to a website whose web pages' html, css, and js is prepared after a request is made for it. Again--it doesn't refer to what's happening on the screen--you can have a dynamic website that's all text with no animations or user interactivity. It refers to the fact that the html, css, and js for the website is prepared by request. A dynamic website takes more time to serve, but it's the only good option you have if something on your website that needs to be up to date. For example, sports scores, store inventory, cart inventory.
A potential source of confusion with the terms static and dynamic is that in certain cases, when building a static website, you can say that the static website web pages were dynamically generated at run time (see Static Site Generator below). This usually means that the web pages that were generated were based off a template, and that the template is used to generate each webpage using whatever content is passed in for each web page one at a time at build time.
(Traditional) Single Page Applications vs (Traditional) Multi-page Applications
Single page applications introduced a new paradigm for building websites. They stood in contrast to the traditional way of dynamically rendering websites--instead of the server having to continuously generate different pages of content as the user navigates a website--the work of requesting the data necessary to produce those dynamic pages was offloaded to the client-side in the browser. Hence, client-side rendering. Using AJAX technology, single page applications made it so that the client browser can make http requests in the background while the page is loading, and also allowed for the content on the page to change as desired on the web page without a page refresh.
In a single page application, you receive a single blank html page and a javascript bundle. This javascript bundle contains everything you need to render the html, css, and js your website needs to run. This javascript bundle contains a framework that under the hood aims to update the content on the page without doing a whole page refresh. Instead of the page refreshing during page navigation or due to a user input, the framework that came in the javascript bundle does the job of manipulating the HTML and CSS on the page.
I put the word traditional in the title for this section in parenthesis because Single Page Applications are no longer limited to being used on the client in order to render a website (client-side rendering). They are now being used to create static websites in what we call Static Site Generation--and are now being used on the server side of the client-server model via Server-Side Rendering.
Static Site Generation vs Server-Side Rendering
Static Site Generators use Single Page Applications on the server to generate all the pages of the website at build time. Even though the static websites produced by static site generators are rendered on the server side of the client-server model, static site generation isn't referred to as server-side rendering. In modern web development parlance, server-side rendering refers to websites that are rendered on the server side via a single page application. Instead of using an SPA to render the website on the client-side, it's done on the server-side.
And it is at this interface between the SPA on the server, the rendered html file that is sent, the bundled SPA that the client will download, and the reconciling that has to be done between the rendered html file that was sent and the SPA framework on the client-side that takes over after the browser receives the html file is where a lot of innovation and confusion is taking place.
Rendering Deep Dive
These are the resources I recommend you look into as you dive deep into the topic of rendering on the web:
- https://javascriptpatterns.vercel.app/patterns/rendering-patterns/introduction
- https://www.patterns.dev/react/client-side-rendering
- https://web.dev/articles/rendering-on-the-web
- https://css-tricks.com/static-vs-dynamic-vs-jamstack-wheres-the-line/
- https://dev.to/this-is-learning/patterns-for-building-javascript-websites-in-2022-5a93
- https://igor.dev/posts/experiences-web-frameworks-future-me/#frameworks
- https://www.babbel.com/en/magazine/exploring-web-rendering-isomorphic-javascript-hydration (5 part series of articles)
- https://www.babbel.com/en/magazine/exploring-web-rendering-partial-hydration-a-k-a-islands
- https://www.babbel.com/en/magazine/exploring-web-rendering-progressive-hydration
- https://www.babbel.com/en/magazine/exploring-web-rendering-streaming-html
- https://www.babbel.com/en/magazine/exploring-web-rendering-server-components-architecture