Static Site Generator (SSG) — Improve Performance by Prebuilding Pages
Static site generator(SSG) is a tool to pre-build the entire frontend into highly optimized static pages and assets during the build process.
It is an alternative to database-driven content management systems(CMS) like WordPress and Drupal. In the traditional CMS, the content is stored in the database. When a request is made by the server, the data is retrieved in the backend and merged with the template files, and sent as an HTML page as a response.
Why Static Site Generators?
SSGs result in fewer servers and systems thereby eliminating most attacks.
The pages served are pre-generated and read-only which further reduces the attack.
Since the files are static there is no need to determine which files to cache or not. When sites can be served entirely from CDN, all the files can be cached. This reduces deployment strategy, time, and great load capacity.
Static sites eliminate the need to generate files on runtime. This heavily improves page loading time.
Since the pages are pre-rendered in SSG, when a server requests a file, the file is immediately returned without any processing. With pages already available, high performance is achieved without any complex architecture.
There is no need for maintenance on the systems, as most of the work is done in the build process and the files generated are stable and rendered directly through CDN or a simple server.
We can host the Static sites from any servers or hosting services. Hence the portability is not compromised as in traditional infrastructure.
Many tools are available in the market to build static sites. They are not confined to a particular technology. You can directly go to https://jamstack.org/generators/ and filter the static generators based on language, templates, licenses, and even GitHub stars.
Most popular Static Site Generators
- Gatsby — This is a great framework written in React and it uses GraphQL for data manipulation. It also has a great plugin ecosystem that allows us to choose from a number of data sources. It supports PWA. Many starter kits are available in the community.
- Hugo — This is written in GO language and has a fast build process. It is mostly used in blogs. Built-in support for pagination, redirection, and multiple content types. It also has many themes.
- Jekyll — This is built with Ruby. It is mostly used in blogs and content-oriented websites. It is very simple and data is given as Markdown. It has great community support and is also free to host on Github pages.
- Nuxt — This is written in Vue.js. This supports server-side rendering. We can also create Single page applications in Nuxt. It has a great performance, developer-friendly. Also supports preprocessors like Sass, Less, etc.
- VuePress — This is also written in Vue.js. It is mostly used in technical docs but not restricted to it. SPAs can also be created in VuePress. We can use the Markdown content and use custom themes as well. Internationalization support available by default.
Advantages of static site generators
- Performance is the main benefit of using SSG
- It can be served over a CDN
- It is more secure as we do not need to worry about database vulnerabilities
- It can replace traditional servers and databases with microservice APIs.
- Less expensive as hosting of static files is cheap
- better developer experience as they can focus on development and do not worry about the content
- useful for the content editor as well as they can write the content without worrying about the design.
- No need to worry about database traffic spikes
Author: Rohini Chellapandian