{"id":3162,"date":"2020-09-10T11:25:00","date_gmt":"2020-09-10T11:25:00","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/data-fetching-strategies-in-nextjs\/"},"modified":"2026-04-27T09:54:05","modified_gmt":"2026-04-27T09:54:05","slug":"duomenu-gavimo-strategijos-nextjs","status":"publish","type":"post","link":"https:\/\/thecodest.co\/lt\/blog\/data-fetching-strategies-in-nextjs\/","title":{"rendered":"Duomen\u0173 gavimo strategijos \"NextJS"},"content":{"rendered":"\n<p>And these are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Client-side rendering: CSR,<\/li>\n\n\n\n<li>Server-side rendering: SSR,<\/li>\n\n\n\n<li>Static site rendering: SSG,<\/li>\n\n\n\n<li>\u200bIncremental static regeneration: ISR.<\/li>\n<\/ul>\n\n\n\n<p>NextJS, unlike the plain <a href=\"https:\/\/thecodest.co\/lt\/blog\/conditional-component-visibility-in-react\/\">React<\/a> app, offers a feature called pre-rendering. This means that pre-rendered HTML is displayed during the initial load. In traditional React applications, the entire app is loaded and rendered on the client\u2019s side. Then, after the <a href=\"https:\/\/thecodest.co\/lt\/blog\/hire-vue-js-developers\/\">JS<\/a> <a href=\"https:\/\/thecodest.co\/lt\/dictionary\/what-is-code-refactoring\/\">code<\/a> is loaded, the application becomes interactive.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Static Generation<\/h2>\n\n\n\n<p>In SSG, the HTML is generated in build-time and reused for each request. After a production build is created, every request is going to reuse that statically generated HTML file.<\/p>\n\n\n\n<p>There are also two types of static generation: with and without <a href=\"https:\/\/thecodest.co\/lt\/blog\/app-data-collection-security-risks-value-and-types-explored\/\">data<\/a>.<\/p>\n\n\n\n<p>In the first case, the HTML will be generated after fetching the data by resolving the promise. In this case, we can use the getStaticProps data fetching method\u2026 but only if you are using Next.js 9.3 or newer. If not, think about upgrading it, because the older getInitialProps method is no longer recommended and will be deprecated. This method also is called on in every client-side navigation so it\u2019s not efficient if you don\u2019t want to fetch data on every request.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">export async function getStaticProps() {\n  const res = await fetch(\"https:\/\/jsonplaceholder.typicode.com\/posts\");\n  const posts = await res.json();\n  return {\n    props: { posts },\n  };\n}<span style=\"background-color: initial; font-family: inherit; font-size: inherit;\"> <\/span><\/code><\/pre>\n\n\n\n<p>The really cool thing is a newly released feature called ISR (Incremental Static Regeneration), which is something between SSG and SSR. It allows you (by using a specific key called revalidate) to make the page incrementally regenerated. It means that with this key you don\u2019t need to rebuild the app each time you want to get an update of the data fetched from the server. Just add the revalidate key with the revalidation period in seconds.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">export async function getStaticProps() {\n  const res = await fetch(\"https:\/\/jsonplaceholder.typicode.com\/posts\");\n  const posts = await res.json();\n  return {\n    props: {\n      posts,\n    },\n    revalidate: 30,\n  };\n}<\/code><\/pre>\n\n\n\n<p>It means that if requests come after that period, then it will fetch the data from the server again.<\/p>\n\n\n\n<p>Another situation is when you use a dynamic page, and the path depends on some external data. In that case, we can use the getStaticPaths method telling which dynamic routes should be pre-loaded:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">export async const getStaticProps = ({ params }) => {\n  const res = await fetch(`https:\/\/jsonplaceholder.typicode.com\/posts\/${params.id}`);\n  const post = await res.json();\n  return {\n    props: { post },\n  };\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">export async function getStaticPaths() {\n  const res = await fetch(\"https:\/\/jsonplaceholder.typicode.com\/posts\");\n  const posts = await res.json();\n  const paths = posts.map(({ id }) => ({ params: { id: `${id}` } }));\n  return {\n    paths,\n    fallback: false,\n  };\n}<\/code><\/pre>\n\n\n\n<p>There is a nice way to check which dynamic routes have been created. You can run the next build and next export and after that you will have a static version of your app in the newly created out directory.<\/p>\n\n\n\n<p>Let`s now limit the pre-build paths:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">export async function getStaticPaths() {\n  return {\n    paths: [{ params: { id: \"1\" } }, { params: { id: \"2\" } }],\n    fallback: false,\n  };\n}<\/code><\/pre>\n\n\n\n<p>After running the next export, we can notice in both cases (with and without a limited number of paths) a different number of posts found in my-appoutposts.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/next_export.png\" alt=\"next_export\" title=\"code\"\/><\/figure>\n\n\n\n<p>Let\u2019s now take a closer look at the crucial and required fallback parameter. It says what to do if the page was not pre-rendered at the build-time. If it\u2019s set to true, the getStaticProps runs and generates that page. If false, we\u2019ll get 404 after trying to load that specific path. Another thing: pages with fallback that are enabled in getStaticPaths cannot be exported.<\/p>\n\n\n\n<p>Below you can find the results of trying to load the same dynamic page in both cases:<\/p>\n\n\n\n<p>First case (without limited paths)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/first.png\" alt=\"first\" title=\"code\"\/><\/figure>\n\n\n\n<p>Second case (with limited paths and fallback set to false)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/second_fallback_false.png\" alt=\"second<em&gt;fallback<\/em&gt;false\" title=\"code\"\/><\/figure>\n\n\n\n<p>Second case (with limited paths and fallback set to true)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/second_fallback_true.png\" alt=\"second<em&gt;fallback<\/em&gt;true\" title=\"code\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Server-Side Rendering<\/h2>\n\n\n\n<p>The main difference with SSG: new HTML is generated on every request. It\u2019s used mostly when we are fetching some external data. In this case, there is no need to rebuild the app every time we want to update the data from the server.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">export async function getServerSideProps() {\n  const res = await fetch(\"https:\/\/jsonplaceholder.typicode.com\/posts\");\n  const posts = await res.json();\n  return {\n    props: {\n      posts,\n    },\n  };\n}<\/code><\/pre>\n\n\n\n<p>The getServerSideProps method looks very similar to getStaticProps. The difference is that getServerSideProps runs on every request, while getStaticProps runs once in build-time.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Client-Side Rendering<\/h2>\n\n\n\n<p>With client-side rendering, the initial load of the page is a bit slow. Communication with the server happens in the run-time. You can do it in a more traditional way:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">const Blog = () => {\n\n\n const [posts, setPosts] = useState([]);\n  useEffect(() => {\n    const fetchData = async () => {\n      const res = await fetch(\n     \"https:\/\/jsonplaceholder.typicode.com\/posts\");\n      const posts = await res.json();\n      setPosts(posts);\n    };\n    fetchData();\n  }, []);<\/code><\/pre>\n\n\n\n<p>Also, we can use another solution, &#8216;swr&#8217; \u2013 React Hooks library for data fetching by Vercel*, which is strongly recommended by NextJS creators. The SWR stands for State While Revalidate.<\/p>\n\n\n\n<p><sup>*<\/sup> Data source: <a href=\"https:\/\/swr.vercel.app\/\">SWR by Vercel<\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">import useSWR from \"swr\";\n\n\nconst Blog = () => {\n const fetcher = (url) => fetch(url).then((r) => r.json());\n const { data: posts = [], error } = useSWR(\n    \"https:\/\/jsonplaceholder.typicode.com\/posts\", fetcher);\n if (error) return &lt;div>Failed to load posts&lt;\/div>;\n if (!posts.length) return &lt;div>loading...&lt;\/div>;\n return (\n    &lt;>\n      {posts.map((post) => (\n            {post.title}\n        ))}\n    &lt;\/>\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<p>NextJS gives <a href=\"https:\/\/thecodest.co\/lt\/blog\/why-us-companies-are-opting-for-polish-developers\/\">us<\/a> the additional possibility of choosing which of the data fetching strategies we want to use on each page. We don\u2019t need to follow only one solution for the whole application.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Shortcut<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>getServerSideProps &#8211; when you need to pre-render app on each request with fetched data<\/li>\n\n\n\n<li>getStaticProps &#8211; when the data can be fetched once at build-time and used on each request with no update<\/li>\n\n\n\n<li>getInitialProps &#8211; not recommended, will be deprecated<\/li>\n\n\n\n<li>getStaticPaths &#8211; for pre-rendering dynamic paths<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/nextjs-pros-and-cons.png\" alt=\"NextJs pros and cons\" title=\"NextJs pros and cons\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/thecodest.co\/contact\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/cta_2.jpeg\" alt=\"Digital product development consulting\"\/><\/a><\/figure>\n\n\n\n<p><strong>Read more:<\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/thecodest.co\/blog\/rails-api-cors-dash-of-consciousness\/\">Rails API &amp; CORS. A dash of consciousness<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/thecodest.co\/blog\/why-you-should-probably-use-typescript\/\">Why you should (probably) use Typescript?<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/thecodest.co\/blog\/highest-quality-code-in-your-saas-project\">Highest quality code in your SaaS project. Why should you care about it as a (non-technical) founder?<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pastaruoju metu NextJS vis labiau populiar\u0117ja kaip React program\u0173 k\u016brimo b\u016bdas. Be abejo, prie to labai prisideda tai, kad NextJS si\u016blo kelias skirtingas duomen\u0173 gavimo strategijas.<\/p>","protected":false},"author":2,"featured_media":3163,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-3162","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Data fetching strategies in NextJS - The Codest<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/lt\/tinklarastis\/duomenu-gavimo-strategijos-nextjs\/\" \/>\n<meta property=\"og:locale\" content=\"lt_LT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Data fetching strategies in NextJS\" \/>\n<meta property=\"og:description\" content=\"Recently, NextJS is gaining more and more popularity as a way to build React applications. Certainly, a major contributor is the fact that NextJS offers several different data fetching strategies.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecodest.co\/lt\/tinklarastis\/duomenu-gavimo-strategijos-nextjs\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-10T11:25:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-27T09:54:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nextjs.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minut\u0117s\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/data-fetching-strategies-in-nextjs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/data-fetching-strategies-in-nextjs\\\/\"},\"author\":{\"name\":\"thecodest\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\"},\"headline\":\"Data fetching strategies in NextJS\",\"datePublished\":\"2020-09-10T11:25:00+00:00\",\"dateModified\":\"2026-04-27T09:54:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/data-fetching-strategies-in-nextjs\\\/\"},\"wordCount\":760,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/data-fetching-strategies-in-nextjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/nextjs.png\",\"articleSection\":[\"Software Development\"],\"inLanguage\":\"lt-LT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/data-fetching-strategies-in-nextjs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/data-fetching-strategies-in-nextjs\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/data-fetching-strategies-in-nextjs\\\/\",\"name\":\"Data fetching strategies in NextJS - The Codest\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/data-fetching-strategies-in-nextjs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/data-fetching-strategies-in-nextjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/nextjs.png\",\"datePublished\":\"2020-09-10T11:25:00+00:00\",\"dateModified\":\"2026-04-27T09:54:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/data-fetching-strategies-in-nextjs\\\/#breadcrumb\"},\"inLanguage\":\"lt-LT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/data-fetching-strategies-in-nextjs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"lt-LT\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/data-fetching-strategies-in-nextjs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/nextjs.png\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/nextjs.png\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/data-fetching-strategies-in-nextjs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecodest.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Data fetching strategies in NextJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"name\":\"The Codest\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecodest.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"lt-LT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"lt-LT\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"width\":144,\"height\":36,\"caption\":\"The Codest\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/pl.linkedin.com\\\/company\\\/codest\",\"https:\\\/\\\/clutch.co\\\/profile\\\/codest\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\",\"name\":\"thecodest\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"lt-LT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"caption\":\"thecodest\"},\"url\":\"https:\\\/\\\/thecodest.co\\\/lt\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Duomen\u0173 gavimo strategijos NextJS - The Codest","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thecodest.co\/lt\/tinklarastis\/duomenu-gavimo-strategijos-nextjs\/","og_locale":"lt_LT","og_type":"article","og_title":"Data fetching strategies in NextJS","og_description":"Recently, NextJS is gaining more and more popularity as a way to build React applications. Certainly, a major contributor is the fact that NextJS offers several different data fetching strategies.","og_url":"https:\/\/thecodest.co\/lt\/tinklarastis\/duomenu-gavimo-strategijos-nextjs\/","og_site_name":"The Codest","article_published_time":"2020-09-10T11:25:00+00:00","article_modified_time":"2026-04-27T09:54:05+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nextjs.png","type":"image\/png"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"5 minut\u0117s"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thecodest.co\/blog\/data-fetching-strategies-in-nextjs\/#article","isPartOf":{"@id":"https:\/\/thecodest.co\/blog\/data-fetching-strategies-in-nextjs\/"},"author":{"name":"thecodest","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76"},"headline":"Data fetching strategies in NextJS","datePublished":"2020-09-10T11:25:00+00:00","dateModified":"2026-04-27T09:54:05+00:00","mainEntityOfPage":{"@id":"https:\/\/thecodest.co\/blog\/data-fetching-strategies-in-nextjs\/"},"wordCount":760,"commentCount":0,"publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"image":{"@id":"https:\/\/thecodest.co\/blog\/data-fetching-strategies-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nextjs.png","articleSection":["Software Development"],"inLanguage":"lt-LT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thecodest.co\/blog\/data-fetching-strategies-in-nextjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thecodest.co\/blog\/data-fetching-strategies-in-nextjs\/","url":"https:\/\/thecodest.co\/blog\/data-fetching-strategies-in-nextjs\/","name":"Duomen\u0173 gavimo strategijos NextJS - The Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/data-fetching-strategies-in-nextjs\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/data-fetching-strategies-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nextjs.png","datePublished":"2020-09-10T11:25:00+00:00","dateModified":"2026-04-27T09:54:05+00:00","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/data-fetching-strategies-in-nextjs\/#breadcrumb"},"inLanguage":"lt-LT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/data-fetching-strategies-in-nextjs\/"]}]},{"@type":"ImageObject","inLanguage":"lt-LT","@id":"https:\/\/thecodest.co\/blog\/data-fetching-strategies-in-nextjs\/#primaryimage","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nextjs.png","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nextjs.png","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/thecodest.co\/blog\/data-fetching-strategies-in-nextjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecodest.co\/"},{"@type":"ListItem","position":2,"name":"Data fetching strategies in NextJS"}]},{"@type":"WebSite","@id":"https:\/\/thecodest.co\/#website","url":"https:\/\/thecodest.co\/","name":"The Codest","description":"","publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecodest.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"lt-LT"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"lt-LT","@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","width":144,"height":36,"caption":"The Codest"},"image":{"@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/pl.linkedin.com\/company\/codest","https:\/\/clutch.co\/profile\/codest"]},{"@type":"Person","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76","name":"thecodest","image":{"@type":"ImageObject","inLanguage":"lt-LT","@id":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","caption":"thecodest"},"url":"https:\/\/thecodest.co\/lt\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/posts\/3162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/comments?post=3162"}],"version-history":[{"count":10,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/posts\/3162\/revisions"}],"predecessor-version":[{"id":7780,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/posts\/3162\/revisions\/7780"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/media\/3163"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/media?parent=3162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/categories?post=3162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/tags?post=3162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}