What is static site generation (SSG) in Next.js?
Static Site Generation (SSG) is a feature provided by Next.js to pre-generate HTML files for your web application's pages at build time. This means that instead of generating the HTML content on the server for each user request, Next.js generates static HTML files for all the possible routes of your application during the build process. These static files can then be served to users directly from a content delivery network (CDN), resulting in faster page load times and better performance.
- 1
Build Process: When you build your Next.js application, the framework goes through all the defined pages and components, executes any necessary data fetching, and generates static HTML files for each route.
- 2
Data Fetching: fetch data directly in page from api, database (for nextjs 13+/ app router). For older versions using page router we used
getStaticPropsfunction to fetch data from APIs, databases, or other sources and pass it as props to the React component. - 3
HTML Generation: After fetching the necessary data, Next.js generates static HTML files for each page, including the fetched data. This process ensures that the content is pre-rendered and ready to be served to users.
- 4
Deployment: Once the build process is complete, you can deploy the generated static files to a web server or a content delivery network (CDN) for distribution.
- 5
User Access: When a user requests a page, the static HTML file is delivered directly from the server or CDN, resulting in instant loading times. The JavaScript bundles are still downloaded to provide interactivity and dynamic updates on the client side.
Scenario Questions
- 1
If you need to add a new marketing page that never changes, how would you implement it using Next.js SSG?
- 2
What happens during the build step when you use getStaticProps for a page, and how does that affect the generated HTML?
- 3
Suppose you forget to export getStaticProps from a page that should be static—what will Next.js do at build time?
- 1
We have a product catalog where data updates daily. How would you choose between getStaticProps with revalidation and server‑side rendering?
- 2
During a recent deployment, a page that used getStaticProps started showing stale data. Walk me through how you would debug the issue.
- 3
If a page's getStaticProps fetches data from an external API that sometimes fails, how would you handle errors to avoid breaking the build?
- 1
Our site has 10,000 product pages generated at build time, causing long CI builds. What strategies would you use to keep build times reasonable while still delivering static pages?
- 2
Explain how Incremental Static Regeneration interacts with CDN caching, and what edge cases you need to watch for in a high‑traffic environment.
- 3
When introducing SSG to an existing Next.js app that mixes SSR and client‑side rendering, what architectural changes would you make to ensure consistency and performance?
- 1
We are planning a phased migration of a legacy monolithic e‑commerce platform to a Next.js front‑end using SSG where possible. How would you design the migration roadmap, considering SEO, data freshness, and cross‑team ownership?
- 2
Describe how you would set up a CI/CD pipeline and monitoring to safely roll out incremental static regeneration across multiple micro‑frontends, handling rollbacks if a regeneration fails.
- 3
In a multi‑region deployment, how would you coordinate static generation and revalidation to minimize latency while keeping content consistent globally?
Follow-up Questions
- ❓How does ISR differ from a full rebuild?
- ❓What are the trade‑offs of using fallback: true versus false?
- ❓How would you monitor content freshness for statically generated pages in production?