Next.js ile Sıralı Veri Alma Maceram: Verilerle Dans! 💃🕺

Merhaba kod sever dostlarım! 🙌 Bugün Next.js Sunucu Bileşenlerinde sıralı veri alma işini nasıl hallettiğimi anlatacağım. Bağımlı API istekleriyle uğraşırken biraz terledim, ama sonunda her şey tıkır tıkır çalıştı! 😎 JSONPlaceholder API’sini kullanarak blog benzeri bir arayüz yapacağız ve verileri bir bir çekeceğiz. Hazırsanız, kod dünyasına dalalım! 🚀

Neden Sıralı Veri Alma? 🤔

Veri çekerken iki yol var:

• Paralel: Her şey aynı anda yüklenir, tam bir kaos partisi! 🎉
• Sıralı: Bir veri diğerine bağlıdır, adeta bir domino etkisi. 🁡

Bu yazıda sıralı veri almaya odaklanıyoruz çünkü bazen bir API’nin sonucu, diğerini çağırmak için şart. Mesela, önce blog gönderilerini çekip sonra her gönderinin yazarını almak gibi. Yavaş mı? Evet, biraz. Ama bazen bu dansı böyle oynamak zorundayız! 😜

Ne Yapıyoruz? 📝

JSONPlaceholder API’siyle oynayacağız:

• /posts: Blog gönderilerini veriyor (her birinde userId var).
• /users/:id: Gönderinin yazarının detaylarını çekiyor.

Hedefimiz: Önce gönderileri al, sonra her gönderinin userId’sine bakarak yazarın adını getir. Hadi kodlayalım! 💻

Kod Zamanı: Sıralı Veri Alma 🎬

İlk iş, Next.js Sunucu Bileşeninde sıralı veri alma işini çözmek. İşte benim yazdığım kod, tadına bakın:

// app/posts/page.jsx
async function fetchPosts() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  return res.json();
}

async function fetchUser(userId) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  return res.json();
}

export default async function PostsPage() {
  const posts = await fetchPosts();

  return (
    <div>
      <h1>Blog Gönderileri 🚀</h1>
      <ul>
        {posts.map(async (post) => {
          const user = await fetchUser(post.userId);
          return (
            <li key={post.id}>
              <h2>{post.title}</h2>
              <p>Yazar: {user.name} ✍️</p>
              <p>{post.body}</p>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

Bu Kod Ne Yapıyor? 🧐

• fetchPosts: Tüm blog gönderilerini topluyor.
• fetchUser: Verilen userId’ye göre yazarın bilgilerini çekiyor.
• Her gönderi için userId’yi alıp yazar bilgisini sırayla çekiyorum. async/await sağ olsun, her şey düzenli! 😇

Ama dürüst olalım, bu yöntem biraz yavaş. Her kullanıcı için tek tek istek atıyoruz, sanki bir kuyrukta sıramızı bekliyoruz. 🐢

Suspense ile Şov Yapalım! 🎭

Next.js’in Suspense özelliği devreye giriyor! Bu, veriler yüklenirken kullanıcıya “bir saniye, kahve alıyorum” demenin şık bir yolu. ☕ Her gönderiyi ayrı ayrı yükleyip, yüklenirken “Yükleniyor…” mesajı gösteriyoruz. İşte kod:

// app/posts/page.jsx
import { Suspense } from 'react';

async function fetchPosts() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  return res.json();
}

async function fetchUser(userId) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  return res.json();
}

async function PostItem({ post }) {
  const user = await fetchUser(post.userId);
  return (
    <li>
      <h2>{post.title}</h2>
      <p>Yazar: {user.name} ✍️</p>
      <p>{post.body}</p>
    </li>
  );
}

export default async function PostsPage() {
  const posts = await fetchPosts();

  return (
    <div>
      <h1>Blog Gönderileri 🚀</h1>
      <ul>
        {posts.map((post) => (
          <Suspense key={post.id} fallback={<p>Yükleniyor... ⏳</p>}>
            <PostItem post={post} />
          </Suspense>
        ))}
      </ul>
    </div>
  );
}

Suspense Niye Harika? 😍

• Parçalı Yükleme: Her gönderi kendi hızında yükleniyor, biri takılsa diğerleri devam ediyor.
• Kullanıcıyı Mutlu Et: “Yükleniyor…” mesajıyla kullanıcıyı oyalıyoruz, sıkılmasın! 😜
• Modülerlik: Kodumuz artık daha düzenli, sanki bir LEGO seti gibi! 🧱

Performansı Artırma Yolları 🚀

Sıralı veri alma biraz ağırkanlı, kabul. Ama birkaç numarayla hızlandırabiliriz:

• Önbellek Kullan: Aynı userId’yi tekrar tekrar çekmeyelim. Bir Map ile önbellek kuralım:

const userCache = new Map();

async function fetchUser(userId) {
  if (userCache.has(userId)) {
    return userCache.get(userId);
  }
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  const user = await res.json();
  userCache.set(userId, user);
  return user;
}

• Paralel Düşün: Eğer bazı veriler bağımsızsa, paralel çekmeyi deneyin.
• Next.js’in Fetch Önbelleği: Next.js’in kendi önbellekleme sihirbazlığını kullan, istekleri azalt! 🪄

Son Sözler 🎤

Next.js Sunucu Bileşenleri ve Suspense ile sıralı veri alma işini çözdük! 😎 JSONPlaceholder ile oynarken hem öğrendik hem eğlendik. Bağımlı verilerle çalışıyorsanız, Suspense ve önbellekleme gibi araçlarla uygulamanızı uçurabilirsiniz. 🚀

Siz bu sıralı veri alma işini nasıl hallediyorsunuz? Yorumlarda anlatın, belki benden daha havalı bir yönteminiz vardır! 😜 Kodlamaya devam, görüşürüz! 👋