Hi, I am Toomas

Two Forms of Pre-rendering

Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page.

function test() {
  console.log("notice the blank line before this function?");
}
service: appsync-api # Make sure it matches the .env SERVICE_NAME or manifest will not work

variablesResolutionMode: 20210326
configValidationMode: error # Throw error instead of warn in false configurations
unresolvedVariablesNotificationMode: error # Throw error when variables are not found
useDotenv: true # Automatically include variables from .env.{stage}
  • Static Generation is the pre-rendering method that generates the HTML at build time. The pre-rendered HTML is then reused on each request.
  • Server-side Rendering is the pre-rendering method that generates the HTML on each request.

Importantly, Next.js lets you choose which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.