Perbedaan Data Fetching getStaticProps dan getServerSideProps di Next.js

Next.js memiliki cara dalam mengatasi persoalan mengenai SEO dengan SPA. Next.js mengatasi masalah tersebut dengan memanfaatkan React.js untuk merender di sisi server, baik pada waktu pembuatan maupun dalam waktu proses. Rendering pada waktu pembuatan sama dikenal dengan Static Site Generation (SSG), sedangkan rendering pada waktu berjalan (per perminataan) dikenal dengan Server Side Rendering (SSR).

Teknik ini juga dikenal sebagai React isomorphic, frase mewah yang berarti React yang berjalan di server.

Next.js mempunyai 2 metode yaitu getStaticProps() dan getServerSideProps(). Metode ini dapat disertakan dalam komponen React apa pun yang dibuat dengan menggunakan Next.js yang akan memberi komponen dengan data props baik pada waktu pembuatan maupun proses.

Perbedaan dari metode getStaticProps() dan getServerSideProps() yaitu:

Kapan Harus Menggunakan getStaticProps atau getServerSideProps

Jika Anda membutuhkan banyak data dinamis pada halaman Anda, merender halaman Anda pada waktu berjalan (SSR) akan lebih terukur, dan oleh karena itu getServerSideProps akan menjadi metode yang lebih disukai. Halaman yang dibuat menggunakan getServerSideProps untuk SSR tidak akan secepat SSG, namun ini optimal jika dibandingkan dengan menggunakan kerangka kerja SPA standar.

Akan tetapi jika halaman Anda lebih sederhana, seperti posting blog, Anda akan mendapatkan peningkatan kinerja merender halaman HTML statis pada waktu pembuatan (SSG), dan karenanya getStaticProps akan lebih disukai. Halaman yang dibangun menggunakan getStaticProps untuk SSG akan sangat cepat.

Contoh Kode dengan Menggunakan getStaticProps

Sebenarnya jika kalian sudah terbiasa menggunakan React, ketika kalian ingin mengimplementasikan Next.js bukan menjadi masalah yang besar. Namun hanya perlu membiasakan diri. Karena Next.js dibangun di atas React

Mari kita lihat kode getStaticProps langsung dari dokumen NextJs sebelum melihatnya di dalam komponen:

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  };
}

Kode diatas merupakan fungsi sederhana yang dapat diekspor dari komponen React yang dibangun menggunakan Next.js. Sekarang, mari kita lihat komponen sederhana yang menggunakan metode ini:

const Blog = ( {post} ) => {
  return (
      <div>
          <h1>Blog List</h1>
              <ul>
                    {post.length > 0 ? post.map((postItem) => <li>{postItem}</li>) : "No post!"}
              </ul>
        </div>
  )
};

export default Blog;

export async function getStaticProps() {
   const post = await fetch('https://exampleapi.com/bloglist');
    return {
        props: {
            post
        }
    }
}

Penjelasan mengenai kode di atas, kita memiliki komponen “Blog” yang menampilkan daftar blog. itu akan menerima prop “bloglist” yang berisi data blog. prop bloglist dideklarasikan dan diisi dalam metode getStaticProps().

Jadi getStaticProps() akan melayani 2 tujuan yaitu:

• memberi tahu kerangka kerja React untuk merender konten ini pada waktu pembuatan.
• mengisi objek data dan mengirimkannya ke komponen sebagai prop.

Contoh Kode dengan Menggunakan getServerSideProps

Menggunakan metode getServerSideProps untuk SSR semudah menggunakan metode sebelumnya untuk SSG. Berikut adalah contoh metode getServerSideProps dari dokumen NextJs:

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

Sebenarnya ini sangat mirip dengan contoh sebelumnya yang menggunakan metode getStaticProps. Padahal perbedaannya terletak pada nama metodenya itu sendiri. Jadi, tidak perlu menampilkan contoh komponen lengkap menggunakan getServerSideProps(), karena satu-satunya hal yang diperlukan untuk menyelesaikan SSR daripada SSG adalah mengubah nama metode Anda menjadi getServerSideProps().

Penutup

Jadi kesimpulannya next.js menawarkan 2 metode dalam merender sebuah halaman web sebagai halaman HTML statis yang dirender pada waktu pembuatan (SSG), atau sebagai halaman yang dirender secara dinamis saat run time (SSR). Kedua teknik tersebut memilik implikasi besar terkait SEO.

Pada artikel ini kita telah membahas mengenai Perbedaan Data Fetching getStaticProps dan getServerSideProps di Next.js. Jika ada pertanyaan, Anda bisa langsung tulis di kolom komentar di bawah ini.