Ambil Data API dengan getServerSideProps() - Next.js Part 3

🌐 Ambil Data API dengan getServerSideProps() - Next.js Part 3

Pada tutorial kali ini, kita akan belajar mengambil data dari API secara server-side menggunakan fitur getServerSideProps() milik Next.js. Fitur ini sangat cocok digunakan untuk halaman yang datanya harus selalu up-to-date atau hasilnya tergantung request user.

 

📘 Apa itu getServerSideProps?

getServerSideProps() dijalankan setiap kali halaman di-request. Artinya data akan selalu fresh dan bisa digunakan untuk:

• Halaman detail berita
• Data berdasarkan login user
• Update stok, harga, statistik realtime

🧪 Contoh API: JSON Placeholder

Kita akan menggunakan API publik: jsonplaceholder.typicode.com

📄 Buat Halaman Baru: pages/posts.js

// pages/posts.js
export default function Posts({ posts }) {
  return (
    <div>
      <h1>📄 Daftar Post dari API</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <strong>{post.title}</strong><br />
            <small>{post.body.slice(0, 60)}...</small>
          </li>
        ))}
      </ul>
    </div>
  );
}

export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

🧠 Penjelasan Kode

• getServerSideProps() dijalankan di server setiap kali halaman diminta
• fetch() mengambil data dari API eksternal
• Data dikirim ke komponen sebagai props

📍 Akses di Browser

Setelah file posts.js dibuat, buka di browser:

http://localhost:3000/posts

📦 Struktur Setelah Ditambah

my-next-app/
├── pages/
│   ├── index.js
│   ├── about.js
│   └── posts.js  ← halaman baru

🧩 Kombinasi dengan Layout

Agar halaman lebih rapi, bungkus komponen dengan <Layout> seperti yang sudah kita buat di part sebelumnya.

// pages/posts.js
import Layout from '../components/Layout';

export default function Posts({ posts }) {
  return (
    <Layout>
      <h1>📄 Daftar Post dari API</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <strong>{post.title}</strong><br />
            <small>{post.body.slice(0, 60)}...</small>
          </li>
        ))}
      </ul>
    </Layout>
  );
}

📌 Kapan Gunakan getServerSideProps?

• Jika data harus selalu real-time
• Jika bergantung pada request (query params, login)
• Jika ingin hasil SEO-ready dan server-rendered

📌 Alternatif: getStaticProps()

Kalau datanya tidak sering berubah, gunakan getStaticProps() untuk static generation yang lebih cepat. Akan dibahas di part berikutnya.

✅ Kesimpulan

Sekarang kamu sudah tahu cara mengambil data real-time langsung dari server di Next.js! Hal ini sangat penting untuk aplikasi berita, dashboard, dan semua yang butuh data segar.

Di Part 4 kita akan bahas cara menggunakan getStaticProps() untuk halaman yang tidak berubah (misalnya landing page, artikel, dsb).

Yuk lanjut belajar, makin seru dan siap bangun web profesional! 🚀