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.

SSGs pretty much do the same thing but they pre-build the HTML template with the data in the build process and not on runtime. Thereby it removes the time taken for processing the data and building the HTML before rendering the page. It can be used to build JAM stack sites that use Javascript, APIs, and Markup.

Why Static Site Generators?

Security

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.

Scale

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.

Performance

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.

Maintainability

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.

Portability

We can host the Static sites from any servers or hosting services. Hence the portability is not compromised as in traditional infrastructure.

Developer Experience

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.
• Next.js — This is a React framework and is greatly used in server-side rendering and statically exported Javascript applications. It has built-in CSS, image optimization, analytics, and internationalization.
• 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