SSG with Next.js

Learn Static Site Generation (SSG)

BASIC STATIC SITE GENERATION

Basic static site generation when fallback: false. All pages are generated on build time. Client gets pre-generated HTML that gets cached.

STEP #1Server generates the page on build time

STEP #1Server generates pages with or without dynamic data

STEP #2Client immidiately shows the static generated page

Static site generation when you statically generate a small subset of pages and use fallback: true for the rest (imagine 100K pages).

STEP #1Server generates pages with defined paths on build time

STEP #2Client immidiately shows the static generated page

STEP #3If a user requests a non-generated page (undefined path)

3.1Next.js will serve a “fallback” version (loading state)

3.2Next.js will send an API request to the server

3.3Server will statically generate this page in the background

3.4Next.js will serve the generated page to the browser

3.5Next.js will add this path to the list of pre-generated pages

STEP #4On a Subsequent request to same path (generated above)

4.1Next.js will serve the generated page

4.2Just like other pages pre-generated at the build time

PROIncredibly fast

PROBuilt once and served by CDN

PROPage gets cached for long-time

PROPage gets displayed immidiately

PROBuild Offline Progressive Web Apps

PROGenerate millions of pages incrementally

PROGreat for Search Engine Optimization (SEO)

PRONo server needed (CDN only / non-incremental)

PROPre-generate the page ahead of a user's request

CONSlow server side site-builds

CONRegenerate all pages every time (when fallback is false)

CONIncompatible with libraries that need access to the document

USECASEBlog posts

USECASEMarketing pages

USECASEHelp and documentation

USECASEE-commerce product listings

USECASEPages that are infrequently updated