snow dock
İki projede localimde çalışıyor.
export default async function Home() {
const value = await fetch("localhost:3000/api/products");
let datas = await value.json();
console.log(datas);
return <div>{JSON.stringify(datas)}</div>;
}
ServerSideRendering Fetch hatası veriyor ama aynı kodu clientSide yaptığım zaman hata almıyorum neden?
vagrant prawnBOT
Hi @snow dock. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Next.js'in Server Side Rendering (SSR) özelliği, her istekte sayfanın HTML'ini oluşturur. Bu, getServerSideProps adlı bir fonksiyonu dışa aktararak yapılır. Ancak, SSR'de yerel API'ye yapılan isteklerde bazen sorunlar yaşanabilir. Bu, genellikle API'nin sunucu tarafında çalıştırıldığından ve bu nedenle istemci tarafında olduğu gibi aynı ortama erişemediğinden kaynaklanır.
Bunun yerine, Next.js'in yeni veri alma sistemini kullanmayı düşünebilirsiniz. Bu sistem, yerel fetch() Web API'si üzerine inşa edilmiştir ve Server Components'te async ve await kullanır. Bu, her istekte kendi önbellekleme ve yeniden doğrulama kurallarını belirlemenize olanak sağlar.
Aşağıdaki örnekte olduğu gibi fetch fonksiyonunu kullanabilirsiniz:
export default async function Page() {
// This request should be cached until manually invalidated.
// Similar to `getStaticProps`.
// `force-cache` is the default and can be omitted.
const staticData = await fetch(`<https://...`,> { cache: 'force-cache' })
// This request should be refetched on every request.
// Similar to `getServerSideProps`.
const dynamicData = await fetch(`<https://...`,> { cache: 'no-store' })
// This request should be cached with a lifetime of 10 seconds.
// Similar to `getStaticProps` with the `revalidate` option.
const revalidatedData = await fetch(`<https://...`,> {
next: { revalidate: 10 },
})
return <div>...</div>
}
Kaynak: Next.js Fetch API (https://nextjs.org/docs/app/api-reference/functions/fetch)
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: