36:I[785930,["/_next/static/chunks/0z6glri_ynjka.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/3gubybbngp2qm.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1a1yoot52xn6a.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/36bmrmq388gfb.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/25iah0ttg18gk.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2z5lx46yo95b7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/11wtuihyk9yk1.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jrz3a08x3tnu.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jp7f5swiv6tg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2l09q34zhqapg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1gbwln3k9mrj7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d"],"Image"] 37:I[40979,["/_next/static/chunks/0z6glri_ynjka.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/3gubybbngp2qm.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1a1yoot52xn6a.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/36bmrmq388gfb.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/25iah0ttg18gk.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2z5lx46yo95b7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/11wtuihyk9yk1.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jrz3a08x3tnu.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jp7f5swiv6tg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2l09q34zhqapg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1gbwln3k9mrj7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d"],"ResourceGate"] 38:I[895679,["/_next/static/chunks/0z6glri_ynjka.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/3gubybbngp2qm.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1a1yoot52xn6a.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/36bmrmq388gfb.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/25iah0ttg18gk.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2z5lx46yo95b7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/11wtuihyk9yk1.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jrz3a08x3tnu.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jp7f5swiv6tg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2l09q34zhqapg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1gbwln3k9mrj7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d"],"MemberGate"] 39:I[369503,["/_next/static/chunks/0z6glri_ynjka.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/3gubybbngp2qm.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1a1yoot52xn6a.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/36bmrmq388gfb.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/25iah0ttg18gk.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2z5lx46yo95b7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/11wtuihyk9yk1.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jrz3a08x3tnu.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jp7f5swiv6tg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2l09q34zhqapg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1gbwln3k9mrj7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d"],"RichTextPreview"] 3c:I[955340,["/_next/static/chunks/0z6glri_ynjka.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/3gubybbngp2qm.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1a1yoot52xn6a.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/36bmrmq388gfb.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/25iah0ttg18gk.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2z5lx46yo95b7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/11wtuihyk9yk1.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jrz3a08x3tnu.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jp7f5swiv6tg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2l09q34zhqapg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1gbwln3k9mrj7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d"],"ArticleToc"] 3d:I[459300,["/_next/static/chunks/0z6glri_ynjka.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/3gubybbngp2qm.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1a1yoot52xn6a.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/36bmrmq388gfb.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/25iah0ttg18gk.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2z5lx46yo95b7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/11wtuihyk9yk1.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jrz3a08x3tnu.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jp7f5swiv6tg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2l09q34zhqapg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1gbwln3k9mrj7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d"],"TutorialPagination"] 2a:["$","$L18",null,{"href":"/category/nextjs","className":"hover:underline","children":["$","span",null,{"className":"inline-flex items-center whitespace-nowrap rounded-full border border-border px-2.5 py-0.5 text-xs font-medium leading-relaxed text-muted-foreground","children":"Next.js"}]}] 2b:["$","span",null,{"className":"text-sm text-muted-foreground","children":"14:20 video • ~6 min read"}] 2c:["$","time",null,{"dateTime":"2025-09-08T14:00:00.000Z","className":"text-sm text-muted-foreground","children":"September 8, 2025"}] 2d:["$","span",null,{"className":"inline-flex shrink-0 items-center whitespace-nowrap rounded-full px-2 py-0.5 text-xs font-medium leading-relaxed bg-secondary text-secondary-foreground","children":"Members only"}] 2e:["$","p",null,{"className":"mb-8 max-w-[56ch] text-lg break-words text-muted-foreground","children":"Learn the best ways to fetch and use data in Next.js."}] 2f:["$","div",null,{"className":"mb-8","children":[["$","div",null,{"className":"relative aspect-video rounded-[--radius] overflow-hidden bg-overlay group","children":[["$","$L36",null,{"src":"https://images.nlvcodes.com/nlvcodes/youtube-thumb-T2Is8ogAODQ.jpg","alt":"The RIGHT ways to fetch data for your website","fill":true,"className":"object-cover","priority":true,"loading":"eager","blurDataURL":"","placeholder":"$undefined"}],["$","a",null,{"href":"https://www.youtube.com/watch?v=T2Is8ogAODQ","target":"_blank","rel":"noopener noreferrer","className":"absolute inset-0 flex flex-col items-center justify-center bg-overlay/40 hover:bg-overlay/60 transition-colors","children":[["$","svg",null,{"className":"w-20 h-20 text-overlay-foreground mb-4 group-hover:scale-110 motion-safe:transition-transform drop-shadow-lg","viewBox":"0 0 24 24","fill":"currentColor","children":["$","path",null,{"d":"M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"}]}],["$","p",null,{"className":"text-overlay-foreground font-medium text-lg group-hover:underline drop-shadow-lg","children":"Watch on YouTube"}],["$","p",null,{"className":"text-overlay-foreground/80 text-sm mt-2 max-w-md text-center px-4 drop-shadow","children":"The RIGHT ways to fetch data for your website"}]]}]]}],["$","div",null,{"className":"rounded-xl border border-border/50 bg-muted mt-6 p-4","children":["$","$L24",null,{"showLabel":true}]}]]}] 30:["$","div",null,{"className":"my-8","children":["$","$L37",null,{"githubUrl":"https://github.com/nick-vogel/nlv_codes_examples/tree/main/nextjs/20250902-nextjs-data-fetching","document":"$undefined","isGated":true}]}] 31:["$","div",null,{"id":"tutorial-body","className":"mb-12","children":["$","$L38",null,{"fallback":[["$","div",null,{"className":"mb-8","children":["$","$L39",null,{"data":{"root":{"type":"root","children":[{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"There comes a time and place where every website needs to fetch data to then be processed or rendered on the frontend. With Next.js, you're able to fetch data in server and client components and even stream components that depend on that data. I'll cover the best ways to fetch and use data in this guide.","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"If you want the code I use for this guide, there's a link to the repo above the embedded video. Now, let's dive in.","format":0,"version":1}]},{"type":"heading","tag":"h2","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Using Server Components","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"If you're planning on having a primarily server-side rendered website, you'll want to use server components to fetch your data. You can use server components to fetch data from an external API, a headless CMS, or directly from your database. Since sensitive information is not sent from the server to the client, you're able to include credentials using environment variables here without fear that they will be exposed.","format":0,"version":1}]},{"type":"heading","tag":"h3","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Using ","format":0,"version":1},{"type":"text","text":"fetch","format":16,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"This project is setup with Payload CMS, which allows me to hit an API route to receive information using a REST API, so let's see what pages are available. Let's go to my already existing ","format":0,"version":1},{"type":"text","text":"[slug]/page.tsx","format":16,"version":1},{"type":"text","text":" file.","format":0,"version":1}]},{"type":"block","fields":{"blockType":"code","language":"tsx","code":"export default async function Page() {\n \n const data = await fetch('http://localhost:3000/api/pages')\n const pages = await data.json()\n console.log(pages)\n \n return

Page

\n}","filename":"src/app/(frontend)/[slug]/page.tsx","id":"68aba2eeb9f5e300013aaf5b"}},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"We'll see in the console log all of our page information from Payload CMS.","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Our ","format":0,"version":1},{"type":"text","text":"fetch","format":16,"version":1},{"type":"text","text":" response isn't cached by default, but the route will be pre-rendered by Next.js and the output will be cached to boost performance. We could add ","format":0,"version":1},{"type":"text","text":"{cache: 'no-store'}","format":16,"version":1},{"type":"text","text":" to use dynamic rendering instead.","format":0,"version":1}]},{"type":"block","fields":{"blockType":"code","language":"tsx","code":"export default async function Page() {\n \n const data = await fetch('http://localhost:3000/api/pages', { cache: 'no-store'})\n const pages = await data.json()\n console.log(pages)\n \n return

Page

\n}","filename":"src/app/(frontend)/[slug]/page.tsx","id":"68aba2eeb9f5e300013aaf5c"}},{"type":"heading","tag":"h3","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Using an ORM or your database","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"You're also able to use an Object Relational Mapper (ORM) to get data from your database. Tools like Prisma make this possible. However, you're also able to communicate directly with your database. Here's how I would do it with Payload CMS.","format":0,"version":1}]},{"type":"block","fields":{"blockType":"code","language":"tsx","code":"import {getPayload} from 'payload' \nimport config from '@payload-config'\n\nexport default async function Page() {\n const payload = await getPayload({config})\n const pages = await payload.db.find({collection: 'pages'})\n console.log(pages)\n\n return

Page

\n}","filename":"src/app/(frontend)/[slug]/page.tsx","id":"68aba2eeb9f5e300013aaf5d"}},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"As you can see, both of these methods return the same results. It will ultimately be up to how you want to query your data.","format":0,"version":1}]},{"type":"heading","tag":"h2","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Using Client Components","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"There's a time and place for fetching data on the server side, but there are also reasons why you would want to fetch data on the client side. For example, if you want to stream data to speed up your site's load time, you can use React's ","format":0,"version":1},{"type":"text","text":"use","format":16,"version":1},{"type":"text","text":" hook to handle this.","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"To show this off, I'm going to create a new client component in my ","format":0,"version":1},{"type":"text","text":"components","format":16,"version":1},{"type":"text","text":" directory. First, I'll create a ","format":0,"version":1},{"type":"text","text":"Pages","format":16,"version":1},{"type":"text","text":" folder and add an ","format":0,"version":1},{"type":"text","text":"index.tsx","format":16,"version":1},{"type":"text","text":" file inside it","format":0,"version":1}]},{"type":"block","fields":{"blockType":"code","language":"tsx","code":"'use client' \nimport { use } from 'react' \nimport { Page } from '@/payload-types' \n \nexport default function Pages({ pages }: { pages: Promise }) { \n const allPages = use(pages) \n \n return ( \n

{page.updatedAt}

\n ) \n}","filename":"/components/Pages/index.tsx","id":"68aba2eeb9f5e300013aaf5e"}},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Then I'll import this into the ","format":0,"version":1},{"type":"text","text":"page.tsx","format":16,"version":1},{"type":"text","text":" file I've been working in. We'll pass in our ","format":0,"version":1},{"type":"text","text":"data","format":16,"version":1},{"type":"text","text":" constant into the component.","format":0,"version":1}]},{"type":"block","fields":{"blockType":"code","language":"tsx","code":"import Pages from '@/components/Pages' \nimport { Suspense } from 'react'\nexport default async function Page() {\n\n\t// we'll need to take away the await in this fetch call, but then process the response to get the json() then the docs\n\tconst data = fetch('http://localhost:3000/api/pages', { cache: 'no-store' }).then(res => res.json().then(res => res.docs))\n \nreturn

{data.title}

\n Page loading...

}>\n \n \n \n}","filename":"src/app/(frontend)/[locale]/[slug]/page.tsx","id":"68aba2eeb9f5e300013aaf5f"}},{"type":"block","fields":{"blockType":"note","content":{"root":{"type":"root","children":[{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"About streaming: Streaming is used to break up a page's HTML into smaller chunks to help speed up initial load time. This gives the perception that your site is faster than it is. What this does is it uses React's Suspense boundary to allow a page to load even when it's still awaiting data from the client. The suspense boundary takes a fallback, which is what will be displayed while the promise resolves. It should also be noted that streaming is only available when `cacheComponents` is active in your Next config file, but that's only available in the canary branch of Next.js 15","format":0,"version":1}]}],"direction":"ltr","format":"","indent":0,"version":1}},"id":"68aba2eeb9f5e300013aaf60"}},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Of course, with a payload this small, we are unlikely to see the effects of the ","format":0,"version":1},{"type":"text","text":"Suspense","format":16,"version":1},{"type":"text","text":" boundary even with a slow network.","format":0,"version":1}]},{"type":"heading","tag":"h3","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Other libraries","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"You don't have to use the ","format":0,"version":1},{"type":"text","text":"fetch","format":16,"version":1},{"type":"text","text":" API if you don't want to. You're more than welcome to use other libraries like SWR and TanStack Query. You'll need to follow the documentation provided by those tools to get started.","format":0,"version":1}]},{"type":"block","fields":{"blockType":"membership","heading":null,"message":null,"id":"68aba2eeb9f5e300013aaf61"}},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"By default, Next.js extends your ","format":0,"version":1},{"type":"text","text":"fetch","format":16,"version":1},{"type":"text","text":" requests to memoize them automatically. That means that unless you opt out, your ","format":0,"version":1},{"type":"text","text":"fetch","format":16,"version":1},{"type":"text","text":" API calls are automatically deduplicated to conserve resources. That memoization lasts the lifetime of the request.","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"If you're not using fetch and are accessing your database directly, you can simply wrap your database in a ","format":0,"version":1},{"type":"text","text":"React","format":16,"version":1},{"type":"text","text":" ","format":0,"version":1},{"type":"text","text":"cache","format":16,"version":1},{"type":"text","text":" function to deduplicate the requests.","format":0,"version":1}]},{"type":"block","fields":{"blockType":"code","language":"tsx","code":"import { getPayload } from 'payload'\nimport config from '@payload-config'\nimport Pages from '@/components/Pages'\nimport { Suspense, cache } from 'react'\n\nexport default async function Page() {\n const payload = await getPayload({ config })\n\n const getCachedPages = cache(async () => {\n const dbPage = await payload.db.find({ collection: 'pages' })\n return dbPage.docs\n })\n\n console.log(await getCachedPages())\n\n return

\n \n

\n}\n}","filename":"src/app/(frontend)/[slug]/page.tsx","id":"68aba2eeb9f5e300013aaf62"}},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Fetching and handling data is very simple to do with Next.js, and with the tools we've covered so far, you'd be able to build a dynamic and powerful website or app. There's much more to ","format":0,"version":1},{"type":"text","text":"fetch","format":16,"version":1},{"type":"text","text":" than we've covered so far. Let's discuss those options next.","format":0,"version":1}]},{"type":"heading","tag":"h2","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Options for fetch","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Since Next.js simply extends ","format":0,"version":1},{"type":"text","text":"fetch","format":16,"version":1},{"type":"text","text":", you're able to use everything that's included in the ","format":0,"version":1},{"type":"text","text":"fetch","format":16,"version":1},{"type":"text","text":" API. One option we've already looked at is the cache option.","format":0,"version":1}]},{"type":"heading","tag":"h3","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"cache","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"The ","format":0,"version":1},{"type":"text","text":"cache","format":16,"version":1},{"type":"text","text":" option allows you to control your caching behavior for a given request. We've already covered the default case, but you can set this to ","format":0,"version":1},{"type":"text","text":"no-store","format":16,"version":1},{"type":"text","text":" to force Next.js to fetch from the server every request. You can also set it to ","format":0,"version":1},{"type":"text","text":"force-cache","format":16,"version":1},{"type":"text","text":", which will check for a fresh cache match and return that. If there isn't a match for the cache or it returns a stale match, Next.js will hit the API again and store the fresh version with the new resource.","format":0,"version":1}]},{"type":"heading","tag":"h3","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"next","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"There are some Next.js specific options that are nested in the ","format":0,"version":1},{"type":"text","text":"next","format":16,"version":1},{"type":"text","text":" object of the options. The first is ","format":0,"version":1},{"type":"text","text":"revalidate","format":16,"version":1},{"type":"text","text":", which sets the cache lifetime of a resource. ","format":0,"version":1},{"type":"text","text":"false","format":16,"version":1},{"type":"text","text":" will cache the resource forever, ","format":0,"version":1},{"type":"text","text":"0","format":16,"version":1},{"type":"text","text":" will prevent the resource from being cached, and a number can be provided, in seconds, to set a limit on how long a resource should be cached.","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"You're not able to use a revalidate number and an option like ","format":0,"version":1},{"type":"text","text":"cache: no-store","format":16,"version":1},{"type":"text","text":" since these conflict. Neither will be used in production; they'll be ignored. If you do this by accident, you'll start getting warnings in your terminal in development.","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"You also have the option to include ","format":0,"version":1},{"type":"text","text":"next.tags","format":16,"version":1},{"type":"text","text":" as an array of strings. This allows you to set tags on the ","format":0,"version":1},{"type":"text","text":"fetch","format":16,"version":1},{"type":"text","text":" call to then be used in an on-demand revalidation using ","format":0,"version":1},{"type":"text","text":"revalidateTag","format":16,"version":1},{"type":"text","text":" from Next.js.","format":0,"version":1}]},{"type":"heading","tag":"h3","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Other options","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Other options you might use are ","format":0,"version":1},{"type":"text","text":"body","format":16,"version":1},{"type":"text","text":", which allows you to send data to the server. You'd use this in conjunction with another common option, ","format":0,"version":1},{"type":"text","text":"method","format":16,"version":1},{"type":"text","text":". When you use ","format":0,"version":1},{"type":"text","text":"method: 'POST'","format":16,"version":1},{"type":"text","text":" or ","format":0,"version":1},{"type":"text","text":"method: 'PUT'","format":16,"version":1},{"type":"text","text":", you'll often include a request body with the fetch API call to send that data.","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"credentials","format":16,"version":1},{"type":"text","text":" is another option you'll use often, which allows you to ","format":0,"version":1},{"type":"text","text":"\"omit\"","format":16,"version":1},{"type":"text","text":" or ","format":0,"version":1},{"type":"text","text":"\"include\"","format":16,"version":1},{"type":"text","text":" request credentials in a request. You also have the option to restrict this to only include credentials from same-origin requests. You can also use ","format":0,"version":1},{"type":"text","text":"headers","format":16,"version":1},{"type":"text","text":" to add any ","format":0,"version":1},{"type":"text","text":"Headers","format":16,"version":1},{"type":"text","text":" object in the request.","format":0,"version":1}]},{"type":"block","fields":{"blockType":"code","language":"typescript","code":"async function example() {\n const response = await fetch(\"https://nlvcodes.com/\", {\n body: JSON.stringify({ username: \"example\" }),\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n credentials: \"include\",\n });\n}","filename":null,"id":"68aba2eeb9f5e300013aaf63"}},{"type":"heading","tag":"h2","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Closing Thoughts","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"That's all there is to it for fetching data. You have a lot of flexibility in how you fetch and cache data with Next.js. Be sure to explore your options and different caching strategies as they come up for your next project.","format":0,"version":1}]}],"direction":"ltr","format":"","indent":0,"version":1}},"paragraphLimit":2,"className":"prose max-w-[70ch]"}]}],"$L3a"],"children":"$L3b"}]}] 32:["$","div",null,{"className":"mb-8 flex flex-wrap gap-2","children":[["$","span",null,{"className":"sr-only","children":"Tags"}],[["$","span","0",{"className":"inline-flex items-center whitespace-nowrap rounded-full border border-border px-2.5 py-0.5 text-xs font-medium leading-relaxed text-muted-foreground","children":"data-fetching"}],["$","span","1",{"className":"inline-flex items-center whitespace-nowrap rounded-full border border-border px-2.5 py-0.5 text-xs font-medium leading-relaxed text-muted-foreground","children":"databases"}]]]}] 33:["$","section",null,{"aria-labelledby":"keep-going","className":"mt-10 mb-14","children":[["$","h2",null,{"id":"keep-going","className":"mb-4 text-[1.375rem] font-extrabold tracking-tight","children":"Keep going"}],["$","div",null,{"className":"grid grid-cols-1 gap-5 md:grid-cols-3","children":[["$","article","68f83071556c13aca37dc930",{"className":"rounded-xl border border-border/50 bg-muted p-6 relative","children":[["$","span",null,{"className":"text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground","children":["Tutorial · ","19:56 video • ~11 min read"]}],["$","h3",null,{"className":"mt-2 text-base font-bold leading-snug","children":["$","$L18",null,{"href":"/tutorials/ultimate-guide-to-server-actions","className":"text-foreground hover:underline after:absolute after:inset-0","children":"Ultimate Guide to Server Actions"}]}]]}],["$","article","68af6a04e45fc9fdb4b8d4b0",{"className":"rounded-xl border border-border/50 bg-muted p-6 relative","children":[["$","span",null,{"className":"text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground","children":["Tutorial · ","22:18 video • ~7 min read"]}],["$","h3",null,{"className":"mt-2 text-base font-bold leading-snug","children":["$","$L18",null,{"href":"/tutorials/i-bet-you-didnt-know-endpoints-could-do-this","className":"text-foreground hover:underline after:absolute after:inset-0","children":"I bet you didn’t know endpoints could do this"}]}]]}],["$","article","68aa0552428f171a51fd990e",{"className":"rounded-xl border border-border/50 bg-muted p-6 relative","children":[["$","span",null,{"className":"text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground","children":["Tutorial · ","18:30 video • ~11 min read"]}],["$","h3",null,{"className":"mt-2 text-base font-bold leading-snug","children":["$","$L18",null,{"href":"/tutorials/image-features-you-need-to-know","className":"text-foreground hover:underline after:absolute after:inset-0","children":"Image features you NEED to know"}]}]]}]]}]]}] 34:["$","$L3c",null,{"contentId":"tutorial-body"}] 35:["$","$L3d",null,{"previous":{"title":"Do THIS and never post off-schedule again","slug":"do-this-and-never-post-off-schedule-again","id":"68aa0555428f171a51fd9a16"},"next":{"title":"I bet you didn’t know endpoints could do this","slug":"i-bet-you-didnt-know-endpoints-could-do-this","id":"68af6a04e45fc9fdb4b8d4b0"}}]