Data Fetching Overview

Examples

• WordPress Example (Demo)
• Blog Starter using markdown files (Demo)
• DatoCMS Example (Demo)
• TakeShape Example (Demo)
• Sanity Example (Demo)
• Prismic Example (Demo)
• Contentful Example (Demo)
• Strapi Example (Demo)
• Prepr Example (Demo)
• Agility CMS Example (Demo)
• Cosmic Example (Demo)
• ButterCMS Example (Demo)
• Storyblok Example (Demo)
• GraphCMS Example (Demo)
• Kontent Example (Demo)
• Static Tweet Demo

Data fetching in Next.js allows you to render your content in different ways, depending on your application’s use case. These include pre-rendering with Server-side Rendering or Static Generation, and updating or creating content at runtime with Incremental Static Regeneration.

SSR: Server-side renderingLearn more about server-side rendering in Next.js with getServerSideProps.

SSG: Static-site generationLearn more about static site generation in Next.js with getStaticProps.

CSR: Client-side renderingLearn more about client side rendering in Next.js with SWR.

Dynamic routingLearn more about dynamic routing in Next.js with getStaticPaths.

ISR: Incremental Static RegenerationLearn more about Incremental Static Regeneration in Next.js.

Learn more

Preview ModeLearn more about the preview mode in Next.js.

RoutingLearn more about routing in Next.js.

TypeScriptAdd TypeScript to your pages.