Beginner's Guide to Static Site Generators Part 1

The rapidly evolving Jamstack ecosystem and static site generators have garnered significant interest in their approach and tools. While not yet mainstream, it is certain that the competition among VCs to invest in companies in this field will open up a wider path for adoption.

 

The benefits of using a static site generator include speed, security, and scalability, among many others. Many web developers use third-party APIs to add dynamic elements and enhance the functionality of static sites.

 

First, we will explain the basics.

1. What is a static site generator?

Static Site Generator (SSG) is a tool for building static pages from input files. It imports content (such as headless CMS) and applies selected templates to generate static HTML pages.

 

The biggest difference between SSG's approach and the traditional web development approach represented by WordPress is that instead of building pages every time a user accesses the site, SSG builds pages during construction. Essentially, the already built pages are stored on a CDN and provided when a user accesses the website.

 

 

In this method, although the loading is fast, there may be a lack of dynamic functionality required for the current website. However, we will discuss this later.

 

1-1 Why use a static site generator?

As mentioned before, there are many benefits to creating a website in this way. By providing static HTML pages, the loading speed and overall performance of the website is greatly improved compared to traditional dynamic websites (built with traditional CMS such as WordPress or Drupal). Additionally, deploying and storing static sites is surprisingly easy.

 

 

By providing only static files, the range of possible harmful attacks is reduced and security issues are minimized. Additionally, the server structure becomes simpler, making maintenance and scalability easier.

 

In addition, there are cost benefits to using a static site generator. By utilizing a CDN, not only can you achieve stable high-speed and constant connectivity globally, but you can also significantly reduce hosting costs.

 

1-2 Disadvantages of Static Site Generators

There are also disadvantages to static site generators that may come as a surprise. The workflow is more developer-oriented and significantly different from traditional monolithic approaches, requiring more technical skills to handle SSGs. Additionally, using SSGs alone may prove difficult for content managers and editors. Fortunately, the ecosystem of tools focused on static site development is expanding, making it possible to easily solve this problem by using a variety of headless CMS solutions.

 

Adding dynamic elements and interactions with users on a page can be tricky, but the Jamstack ecosystem already has solutions for this.

 

Due to the wide range of options available, decision-making (which SSG to choose) has become unexpectedly difficult.

 

1-3 How to Choose a Static Site Generator?

The selection of an appropriate static site generator varies depending on the project's needs, the experience of the team involved in the project, the required features for the chosen project, and the programming language used.

 

1-4 What are you building?

In simple blogs for projects, or in feature-rich e-commerce sites, it is not the same. Also, there are various "forms" in SSG, and some are designed for specific front-end or back-end, but not only that. There are also those created to quickly build photo gallery sites. Additionally, there are those that make it easy to create documentation pages and websites. Most of them are useful for managing general websites with blogs.

 

1-5 Who is this for?

Consider the needs of the project and think about who will be using/editing the website. While it is great to improve efficiency through the use of SSG, will non-technical users be the ones working on this site? If so, please consider not burdening them. Consider using a combination of SSG and headless CMS.

 

1-6 What are the languages and frameworks?

SSG has evolved significantly in recent years. Now, you can find website generators that run on a vast number of programming languages, using various template languages and conventions, and can operate in any type of environment.

 

Are you coding with JavaScript? Popular SSGs include Next.js and Gatsby. Are you tired of heavy JS frameworks? Take a look at Eleventy. Do you enjoy writing in Go? In that case, Hugo is the best option. If Ruby is your preferred language, consider using Jekyll. Are you using Vue? Give Nuxt.js and Gridsome a try.

 

By using your preferred language and framework, you can make your work easier, but first keep in mind the needs of the project.

 

What is the best static site generator for 1-7 2021?

In this day and age, it can be a double-edged sword to advise on the best option for anything. Therefore, instead of a "best" ranking, we would like to introduce some of the most popular options we have used so far.

 

Easy to understand, for comparison, the reviews of each static site generator have the same structure. First, we will talk about the history and current status of the project.

 

Next, we will introduce our excellent features and strengths. Then, we will focus on our ecosystem and introduce some of our most popular projects.

 

Finally, we will introduce the starting and deployment methods for projects using the SSG. And lastly, as a review, we will introduce the best features and use cases.

2. Next.js

Next.js is a small, configuration-free framework built on top of React, Webpack, and Babel for server-rendered universal JavaScript web applications. It initially started with a focus on enabling smooth universal JavaScript experiences. It has since evolved to support features such as static site generation, TypeScript, dynamic pages, and serverless functions.

 

2-1 Next.js 1.0 - Beginning

I discovered the first version of Next.js in the fall of 2016. I created a simple file like the one below.

 

  // pages/index.js
   import React from 'react'
   export default () => <div>Hello world!</div>
  

 

After executing in the terminal, magic happened. With just two lines of code and one command, my new hello world site was up and running. The experience was incomparable to developing a custom theme for WordPress. Next.js and Now (now known as Vercel) felt incredibly easy to use.

 

A few months later, we launched our first project using Next.js and the WordPress API. This project had serious performance issues. It was not a good idea to retrieve data from multiple API endpoints for each request. Perhaps we should have exported those pages as static pages. However, in the first version of Next.js, this was not a trivial matter.

 

2-2 Fast Forward to Next.js 9.3

Next.js has evolved to support static site generation. Vercel has evolved to support serverless.

 

Introduced three new data acquisition methods in version 9.3.

 

• getStaticProps: This will be one post content for getting data at build time.

• getStaticPaths: Specifies a collection of dynamic routes.

• GetServerSideProps: Gets data for each request.

 

The following is a simple example of static generation.

 

  
  // pages/posts/[slug].js
   // [slug] filename means it's a dynamic parameter
   // it will be passed to getStaticProps `params` object
   const BlogPost = ({ data }) => <Post content={data} />

  

  // executed only at build time
   export async function getStaticPaths() {
     const response = await fetch('https://api.domain/posts')
     const data = await response.json()

  

    // all paths we want to pre-render
     const paths = posts.map((post) => ({
       params: { slug: post.slug }
     }))

  

    return { paths }
   }

  

  // executed only at build time
   export async function getStaticProps({ params }) {
     const response = await fetch(`https://api.domain/posts/${params.slug}`)
     const data = await response.json()

  

    return { props: { data, fallback: false } }
   }

  

  export default BlogPost
  

 

In the above code, all blog posts are retrieved from the API during construction and an array of paths with slugs is created for each one. The data for each blog post is retrieved in getStaticProps based on the slug parameter.

 

If you are familiar with Gatsby, you will notice that getStaticProps is similar to createPages in gatsby-node.js. However, I think Next's approach is easier to understand. The difference is that you don't need to specify the path to the template and you pass the slug in the context. In Next, everything is contained in the same file. In this case, the value of the slug can be accessed through query parameters.

 

If you add a new post, you will need to rebuild the project unless you change the fallback to true. If there is no existing HTML file on the CDN, Next.js will try to retrieve and cache the content on the client side. Fallback is very useful when you have a large collection of frequently updated posts.

 

2-3 Image Component

In Next.js 10, new built-in image components and optimizations have been introduced. You no longer have to worry about shipping large images for mobile devices. Next handles resizing and generates the latest WebP image format, which is about 30% smaller than JPG. If your website has a lot of images, bandwidth and client-side performance will significantly decrease.

 

<Image /> To use the component, import it from next/image.

 

  import Image from 'next/image'

  

  const Hero = () => (
     <section>
       <Image src="/assets/cute-hero.png" width={500} height={500} />
       <h1>Hello world!</h1>
     </section>
   )

  

  export default Hero
  

 

Next.js's approach does not affect build time at all. All optimizations are done at the time of request. Currently, Next supports four cloud providers: Vercel, Imgix, Cloudinary, and Akamai.

 

2-4 File Configuration

Next.js is zero-config from the start.

 

  ├── package-lock.json
   ├── package.json
   ├── pages
   │   ├── about.js
   │   ├── blog
   │   │   ├── [slug].js
   │   │   └── index.js
   │   └── api
   │       ├── posts.js
   │       ├── about.js
   │       ├── blog.js
   │       ├── contact.js
   │       └── index.js
   └── public
       └── logo.png
  

 

All files in the src/api directory are lambda functions.

 

2-5 Ecosystem

Next.js has a great community that continues to grow. On Github, you can read interesting conversations and discuss RFCs. The Vercel team is clear about the direction of the framework and also accepts proposals from the community.

 

There are many examples of integration with various tools such as Headless CMS, CSS-in-JS, and auth.

 

2-6 How do I get started?

The easiest and recommended way to start a new Next.js project is to use create-next-app.

 

  npx create-next-app
   # or
   yarn create next-app
  

 

With this one command, you can configure your project. For those who want to know more, we recommend the official Learn Next tutorial.

 

 

This will help you understand how to navigate between pages, add static assets, and retrieve data. Once this is done, you will be ready to build your first Next.js application.

 

2-7 Deployment of Next.js

The recommended platform is, of course, Vercel. The company's CDN is designed at the edge and supports features such as incremental static generation. First, the page is input into a durable store (S3), then the path name is purged, allowing users to see the latest content.

 

 

Preview mode works seamlessly on the Vercel platform, just like the fallback function. Once you connect your repository, no additional settings are needed and everything will work immediately.

 

If for some reason you do not want to use Vercel, you can deploy Next.js to any modern hosting platform such as Netlify, Render, AWS, DigitalOcean, etc. Netlify manages a special next-on-netlify package that enables server-side rendering for pages. Features such as incremental static regeneration, fallbacks, and previews do not work the same as Vercel, so it is not a one-to-one replacement.

 

2-8 Conclusion

With Next.js, you can build all kinds of websites and applications. From simple marketing pages and blogs, to e-commerce and PWAs using cookie-based authentication.

 

Perfect for projects that require flexible construction of specific parts of a website. The first static site generator with dynamic extension capabilities. The hybrid mode is truly amazing. If you don't need React and don't plan on updating the project frequently, you may not need anything beyond this.