Data Fetching
Note: Next.js 13 introduces the app/ directory (beta). This new directory has support for colocated data fetching at the component level, using the new React use hook and an extended fetch Web API.
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 rendering
- SSG: Static-site generation
- CSR: Client-side rendering
- Dynamic routing
- ISR: Incremental Static Regeneration
getServerSideProps
If you export a function called getServerSideProps (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps.
Data Fetching: getServerSideProps | Next.js
getStaticProps
If you export a function called getStaticProps (Static Site Generation) from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.
Data Fetching: getStaticProps | Next.js
MongoDB
How to Integrate MongoDB Into Your Next.js App | MongoDB
Building Modern Applications with Next.js and MongoDB | MongoDB
Prisma ORM
Using Prisma ORM with MongoDB in Next.js | by Eshwaren M | ITNEXT
Authentication and DB access with Next, Prisma, and MongoDB
Mongoose
Using Mongoose with Next.js 11. A simple guide on how to use the… | by Eshwaren M | ITNEXT