Javascript Frameworks for Static Sites

Posted on by Chris

Javascript frameworks and libraries have evolved to resolve many of the early problems faced by web apps. They offer a wide arrange of built-in tools and support for SPA’s (Single Page Apps) like decoupling the front-end, building UI’s with stateful components, and working with dynamic data. They also offer the ability to create rich, native-like user experiences via routing with page transitions. The former sounds great for large-scale, complex apps, but what about small-scale, simple apps and static web sites? I’ve heard great things in regards to server side rendering, but what I want to know is: are they a good fit for creating pre-rendered sites for static hosts like Github Pages or Netlify?

Let’s find out…

Objectives Checklist

  • Does it offer full control over the final exported markup? In other words, can it be used to generate clean, well-formed, semantic markup will be SEO-friendly, accessible, and performant (using known best practices and techniques)?
  • Is it truly pre-rendered or does it require a JS framework to function as a site when hosted? For example, does the exported site only run with a router? …can it easily be moved around within sub-directories with relative paths?
  • Does it offer support/alignment for rich-like experiences (e.g. page transitions) when used as a static site generator? For example, if a custom or found page transition system (e.g. a plugin) works when developing locally, will it work when the site is exported and hosted as a static generated pre-rendered site of html files?
  • Is it overkill (too much trouble/hassle to setup, configure, etc) for a static site? For example, is a Config file required? …does it require buying into an elaborate, opinionated directory-structure/build-tool/workflow ecosystem?

The Big Three JS Frameworks

Static sites aside, Angular, React, and Vue are the most popular JS frameworks, each offer different advantages over one another. For the purposes of this blog, let’s focus on static site generation, which leads us to the following:

List of Static Site Generators (SSG’s)

Learning Notes

After listening to Guillermo Rauch on Episode 354 of the Shop Talk Show I decided to do some hello-world level intro Next tests.

  1. https://nextjs.org/learn/basics/getting-started
    • Learned about the power of the <Link> tag for navigating between pages inside of a pages/ directory (eg. index.js and about.js).
    • Learned about Webpack’s hot module replacement
    • Learned how shared components can be used for two common use cases:
      1. as a shared/common/reusable header component that is imported at the top of each page via a component tag <Header />.
      2. as a Layout, where the content between Layout tags are passed to a shared/common/reusable Layout.js file via props {props.children].
    • Learned about creating dynamic pages via a url query string vs. clean urls with route masking.
    • Learned how to export out static pages using npm run export via a next.config.js file. NOTE: you had to list out each and every page that you wanted exported to html.
  2. Looked in Netlify CMS and did some simple tests.

Personal Tests

Resources & Random Stuff: