Migrasi Blog dari Generator Web Statis Hugo ke ke Gatsby

Belum lama ini Gatsby merilis versi terbaru yang membawa perubahan besar-besaran, khususnya dalam hal rendering. Alih-alih tetap menjadi generator web statis, Gatsby yang sekarang ingin tampil lebih dinamis dengan menghadirkan opsi Deferred Static Generation (DSG) dan Server Side Rendering (SSR) sebagai fitur utama mereka.

Karena penasaran saya pun mencoba memindahkan konten blog lama yang masih menggunakan Hugo ke Gatsby versi 4. Kebetulan temanya sudah ada sejak beberapa bulan yang lalu. "Paling hanya perlu mengikuti beberapa langkah upgrade" pikir saya. Maka diputuskanlah untuk migrasi.

DSG dan SSR?

Angggap saja DSG adalah cara baru dalam merender konten statis. Jika sebelumnya Gatsby harus meregenerasi seluruh konten pada tahap build, kini konten akan diregenerasi ketika ada request dari penggunjung pertama dan sisimpan untuk pengunjung berikutnya.

Untuk yang kurang familiar, DSG ini sebenarnya serupa dengan Incremental Static Regeneration (ISR) milik Next.js—meskipun ada beberapa perbedaan yang sama-sama bertujuan untuk menghilangkan bottleneck pada tahap build. Terutama pada website yang memiliki konten dalam jumlah besar.

Di sisi lain Gatsby menawarkan SSR untuk menangani data yang lebih dinamis. Halaman berserta konten akan dirender si sisi server setiap kali di-request oleh pengunjung layaknya mayoritas website dinamis yang ada saat ini.

Tahapan

Berhubung kontennya bisa dihitung dengan jari 😅 maka proses migrasinya terbilang lancar, cukup menambah beberapa baris kode sebagai pengganti sintaks image karena sekarang menggunakan mdx. Sisanya mungkin lebih banyak dihabiskan dengan update dependencies ke versi terbaru.

Karena masih memakai konten markdown maka saya menggunakan skema DSG melalui gatsby-node.js. Alasannya tidak lain karena saya butuh data yang tidak bisa di passing melalui file sysem route API. Nah, cara untuk mengaktifkan DSG sendiri terbilang mudah, cukup dengan menambahkan defer: true di fungsi createPage.

exports.createPages = async ({ graphql, actions, reporter }) => {
   const { createPage } = actions;
   ...
   blogs.forEach((blog, index) => {
      createPage({
         ...
         context: {
            ...
         },
         defer: true,
      });
   });
};

Hal lain yang perlu diperhatikan ketika menggunakan DSG dan SSR adalah penggunaan web API seperti window dan document. Pastikan bungkus dengan kondisi !== 'undefined' agar tidak ada komplain ketika Gatsby memprosesnya di sisi server.