Fetching isn't done in production build, while it is done in development for Nextjs server component

Question

SOLVED

I was about to use internationalization for translating the pages at the very beginning of the project. There are some codes for configuring internationalization in next.config.js like the following, all I need to do to get rid of the problem is to delete this configurations:

//next.config.js
const nextConfig = {
 i18n: {
    locales: ["en-US", "tr-TR", "ru-RU"],
    defaultLocale: "tr-TR",
  },
...
}

I'm new to nextjs and I have a next.js app with App router (The one that the pages goes in src/app folder).

I fetch all blog posts in /blog-posts and single blog post in /blog-posts/example-name dynamic route. There was no problem while I was developing the app in localhost. Two fetches work correctly in development. But, after I deployed the app on Vercel, it just fetches all blog posts in /blog-posts page but when I go to /blog-posts/example-name it shows the 404 page and says Failed to load resource in the console. There is no logs about the problem in logs section of the project in vercel.

If it helps you to understand more, here is the last deployment link: https://medzoa-veterinary-m9b7f0phg-w1that.vercel.app/blog-yazilari

I do the fetching just as the Next docs recommend: The function that does the fetch:

async function getData() {
  const res = await fetch("https://*backendurl*/api/getBlogPosts");

  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error("Failed to fetch data");
  }

  return res.json();
}

and I call the function in the page:

const data = await getData();

Vercel deployment build logs (with { cache: 'no-store' } option):

Route (app)                                Size     First Load JS
┌ ○ /                                      0 B                0 B
├ λ /blog-yazilari                         315 B          84.1 kB
├ λ /blog-yazilari/[slug]                  536 B          84.3 kB
├ ○ /favicon.ico                           0 B                0 B
└ ○ /magaza                                135 B          77.8 kB
+ First Load JS shared by all              77.7 kB
  ├ chunks/769-f274f40a4e22dc69.js         25.2 kB
  ├ chunks/bce60fc1-5c8e6a0bf302e824.js    50.5 kB
  ├ chunks/main-app-6118df2562cf8b41.js    216 B
  └ chunks/webpack-753df88ab1dee99a.js     1.75 kB
Route (pages)                              Size     First Load JS
─ ○ /404                                   182 B          75.5 kB
+ First Load JS shared by all              75.4 kB
  ├ chunks/framework-8883d1e9be70c3da.js   45 kB
  ├ chunks/main-c4daa89c94afb7ed.js        28.4 kB
  ├ chunks/pages/_app-998b8fceeadee23e.js  195 B
  └ chunks/webpack-753df88ab1dee99a.js     1.75 kB
λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

And there is nothing about blog posts page in ISR functions:

favicon.ico
Node.js 18.x
7,5 MB
IAD1


index
Node.js 18.x
7,5 MB
IAD1


index.rsc
Node.js 18.x
7,5 MB
IAD1


magaza
Node.js 18.x
7,5 MB
IAD1


magaza.rsc

score 0 · Answer 1 · answered Jul 16 '23 at 12:42

0

By default, fetch will automatically fetch and cache data indefinitely. Check out the docs here.

To fetch fresh data on every fetch request, use the cache: 'no-store' option like so.

fetch('https://...', { cache: 'no-store' })

answered Jul 16 '23 at 12:42

Mayank Kumar Chaudhari

16,027
10
55
122

Thanks Mayank. I thouht the same but it doesn't work either. I tried other options for fetching but, when I do {cache:'no-store'}, it doesn't fetch neither blogPosts nor single blog post. https://medzoa-veterinary-btyxvo5fq-w1that.vercel.app/blog-yazilari I edited the question to add vercel deployment build log. – Mithat Akbulut Jul 16 '23 at 13:04

Fetching isn't done in production build, while it is done in development for Nextjs server component

1 Answers1