Static Site Generation (SSG) with Next.js Quiz Quiz

Explore core concepts and practical insights of Static Site Generation (SSG) using Next.js. This quiz evaluates your understanding of SSG features, configuration, data handling, and deployment strategies specific to this popular static site framework.

1. Purpose of getStaticProps in SSG

   Which function is primarily used to fetch data at build time for a page when using Static Site Generation (SSG) in Next.js?

   1. getStaticProps
   2. useStaticProps
   3. getInitialProps
   4. getServerSideProps

   Explanation: The correct answer is getStaticProps because this function runs at build time and fetches data needed to render the page as a static file. getInitialProps executes on the server for every request, not at build time, so it's unsuitable for pure SSG. getServerSideProps fetches data for each request on the server, defeating the static generation purpose. useStaticProps is not an actual function in this context and is therefore an invalid option.

2. Incremental Static Regeneration (ISR)

   What feature allows a statically generated page to update at runtime by regenerating after a certain interval without a full rebuild?

   1. Automatic Static Optimization
   2. Static Paths Routing
   3. Dynamic Server Loading
   4. Incremental Static Regeneration

   Explanation: Incremental Static Regeneration allows specific static pages to be regenerated on the server after a set time interval, updating content while keeping build times fast. Automatic Static Optimization refers to the general process where pages without data-fetching methods are statically generated, but doesn't permit runtime updates. Static Paths Routing relates to dynamic route generation, not regeneration. Dynamic Server Loading is not a relevant term in the context of statically updating pages.

3. SSG and Dynamic Routes

   When generating static pages for dynamic routes like /posts/[id], which function must be implemented to define the possible paths?

   1. getStaticPaths
   2. getStaticRoutes
   3. useDynamicPaths
   4. createStaticPaths

   Explanation: Selecting getStaticPaths is correct, as this function returns an array of route parameters that will be statically generated at build time. getStaticRoutes and createStaticPaths sound similar but are not recognized functions for this task. useDynamicPaths is also not a valid hook or function for defining route generation in SSG.

4. Build Output of SSG

   After building a static site with SSG enabled, what is typically produced as output for each static page?

   1. An HTML file and a serialized JSON data file
   2. A serverless function for each route
   3. A CSS-only file for every page
   4. A single bundled JavaScript file

   Explanation: For each statically generated page, the build outputs an HTML file along with a JSON file containing the pre-fetched data. A serverless function is used for server-side rendering, not static generation. Although JavaScript bundles are created, they are not the main output per page. CSS files are bundled when necessary, but there isn’t a CSS-only file generated for every page by default.

5. When SSG May Not Be Suitable

   In which scenario is Static Site Generation with Next.js generally not recommended?

   1. When pages rely on constantly changing user-specific data
   2. When using a content delivery network for distribution
   3. When the content rarely updates
   4. When deploying posts from a static markdown source

   Explanation: SSG is not suitable for pages requiring frequent updates with user-specific or real-time data, as the pages are generated at build time and do not reflect constant changes. When content changes rarely, SSG is efficient and highly optimized. Deploying from markdown sources is an ideal use case for SSG. Distributing static sites via a content delivery network is also well-aligned with SSG methodology.