BanTool Documentation

Appearance

Chapter 1: Understanding SSG and Data Fetching ​

Yes, that's a primary use case and one of the most powerful features of Static Site Generation (SSG). It fetches data from an API at build time to create static HTML pages, which are then served to users.

How It Works ​

Let's walk through building a blog with Nuxt in SSG mode to see how this works in practice.

  1. During Development: You write the code that instructs Nuxt on how to connect to an API (like a headless CMS) and fetch all your blog posts.

  2. When You Run the build Command:

    • The build process is executed either on your local machine or on a CI/CD server.
    • During this phase, Nuxt runs your code, calls the API, and retrieves the data for all your posts—let's say you have 100 of them.
    • Using this data, Nuxt generates 100 individual HTML files (e.g., /posts/post-1.html, /posts/post-2.html, etc.). Each file is a complete webpage containing the full content of a blog post.

  3. When You Deploy:

    • You upload the generated folder of HTML, CSS, and JavaScript files to a static hosting provider like Vercel, Netlify, or GitHub Pages.

Now, when a user visits yourblog.com/posts/post-1, the server instantly sends back the pre-built post-1.html file. No API calls are made at the time of the user's request, making the site incredibly fast.

When Does the Data Get Updated? ​

This is a key concept in SSG. If you publish a new post in your CMS, the live website won't update automatically.

To see the new content, you must rebuild the website.

In a real-world setup, this is usually automated with webhooks:

  1. You write a new post and hit "Publish" in your CMS.
  2. The CMS sends a webhook notification to your hosting platform (e.g., Vercel).
  3. Vercel receives the signal, pulls your latest code, runs the build command again to include the new post, and deploys the updated static site.

What Is SSG Not Suited For? ​

SSG isn't the right choice for content that must be generated at the moment of a user's request. Examples include:

  • Personalized data for logged-in users (e.g., "Welcome back, Alex!").
  • Real-time data that changes constantly (e.g., stock prices, live weather updates).
  • E-commerce shopping carts.

For these scenarios, you would typically use Server-Side Rendering (SSR) or combine SSG with Client-Side Rendering (CSR), where the static page fetches personalized data from the browser.