Frontend System Design Course
Frontend System Design
/
Intermediate

Static Site Generation (SSG)

Definition

SSG renders your React application to static HTML files at build time (when you run `npm run build`), rather than on every request. These files are then uploaded to a CDN for incredibly fast delivery.

Explain Like I'm New

The chef cooks 1,000 pizzas in the morning, puts them in the display case, and hands them to customers instantly as they walk in, rather than cooking them to order.

Interview Questions

basic

  • What is the core concept of Static Site Generation?
  • What are the pros and cons of Static Site Generation?

intermediate

  • How does Static Site Generation impact SEO and initial page load times?
  • When would you NOT choose to use Static Site Generation?

advanced

  • How does Static Site Generation fit into a heavily scaled microservices architecture?
  • What are the security implications of Static Site Generation?

trick

  • Can you combine Static Site Generation with other rendering strategies on the same page?

Flash Cards

Question

Define Static Site Generation.

Click to reveal answer
Answer

Static Site Generation is a critical architectural pattern in frontend design.

Question

What is the main tradeoff of Static Site Generation?

Click to reveal answer
Answer

Usually a tradeoff between Server CPU usage, TTFB (Time to First Byte), and Client CPU usage.