CMS Tanpa Kepala: Gatsby JS dengan WordPress

Sudah menjadi rahasia umum bahwa WordPress mencakup sekitar sepertiga dari 1 juta situs web teratas di dunia dengan lebih dari 50% pangsa pasar dalam Sistem Manajemen Konten. Baru-baru ini pada tahun 2016, WordPress memutuskan untuk memperkenalkan REST API untuk menyediakan aplikasi lain yang meningkatkan akses ke konten di database WordPress. Hasilnya, memberikan pengembang kemampuan untuk memanfaatkan WordPress sebagai CMS tanpa kepala.

Ini pasti menyiratkan bahwa para insinyur tidak lagi terbatas untuk menggunakan lapisan presentasi konvensional (frontend) WordPress, tetapi sekarang dapat mengeksploitasi aplikasi frontend apa pun untuk mengirimkan data mereka. Mengingat hal ini, sebagian besar blog ini akan mengeksplorasi hubungan WordPress dan Gatsby.js dalam hal penerapan Headless CMS.

Sejarah Singkat CMS

Saat kita mundur selangkah untuk memahami revolusi Headless CMS, menurut saya patut dicatat untuk merangkum sejarah sistem manajemen konten (CMS). Secara tradisional, di awal 90-an, halaman web statis adalah cara utama untuk menjalankan situs web di mana seorang webmaster akan langsung mengedit file HTML dan mengunggahnya ke server melalui FTP. Akhirnya, pada pertengahan 90-an, teknologi web mulai berkembang dan konten menjadi lebih dinamis, yang mengarah pada munculnya sistem manajemen konten monolitik pertama.

Pada dasarnya, CMS Monolitik adalah aplikasi perangkat lunak yang mencakup semua yang diperlukan untuk mengedit dan mempublikasikan konten di web. Yang pertama dari sistem tersebut terbatas pada perusahaan seperti EpiServer, namun, variasi open-source kemudian muncul seperti WordPress, Drupal dan Joomla. Sisanya adalah sejarah karena WordPress memperoleh pangsa pasar terbanyak dari waktu ke waktu.

Namun, kemudian selama revolusi ponsel cerdas, perangkat seluler mulai memengaruhi cara konten web dikonsumsi dan dikirimkan. Ini merupakan tantangan bagi CMS monolitik tradisional yang dirancang untuk menghadirkan konten web untuk laptop dan desktop.

Untuk mengatasi hal ini, lahirlah desain responsif yang menghasilkan tata letak situs web yang adaptif dengan ukuran layar. Akibatnya, ini juga memberikan kesempatan untuk memisahkan manajemen konten dari lapisan tampilan. Di sinilah CMS Tanpa Kepala kami masuk.

CMS tanpa kepala

Seperti disebutkan sebelumnya, CMS Tanpa Kepala adalah CMS tanpa lapisan presentasi. Akibatnya, konten dikirimkan melalui API (RESTful atau GraphQL) untuk memisahkan aplikasi frontend yang kemudian menyajikannya. API membuat konten tersedia untuk saluran dan perangkat apa pun menggunakan berbagai alat dan bahasa pemrograman dengan tingkat keamanan dan skalabilitas yang lebih tinggi.

Pada dasarnya, CMS dipisahkan dari masalah frontend, yang pada gilirannya membebaskan pengembang untuk membangun pengalaman yang kaya bagi pengguna akhir, menggunakan teknologi terbaik yang tersedia. Mode "tanpa kepala" atau "dipisahkan" saat ini didukung oleh sebagian besar CMS, yang membuka jalan bagi situs Gatsby.

Jadi, untuk memanfaatkan CMS tanpa kepala, Anda harus membuat situs atau aplikasi terlebih dahulu, lalu menggunakan API CMS untuk memasukkan konten Anda.

Eksekusi CMS WordPress Headless

Sehubungan dengan kronologi peristiwa yang dibagikan di atas, kita telah melihat bagaimana WordPress akhirnya memberlakukan CMS Tanpa Kepala. WordPress Berisi API (Application Programming Interface) yang memungkinkan Anda untuk memperluasnya dengan plugin (pada dasarnya sebagai 'kerangka aplikasi'). Secara khusus, ini dicapai melalui REST API seperti yang akan kita lakukan nanti.

Namun, salah satu konsep kunci dari API WordPress adalah kait. Pada dasarnya, hook memungkinkan plugin untuk mengubah fungsionalitas inti WordPress. Secara praktis, Hooks bekerja sedemikian rupa sehingga ketika peristiwa tertentu di WordPress terjadi (misalnya, pemuatan halaman, atau pasca-edit), WordPress memanggil hook tertentu untuk menjalankan fungsi tersebut.

Secara khusus, kait dibagi menjadi 'Tindakan' dan 'Filter'. Tindakan dapat dimanfaatkan untuk menjalankan fungsi PHP tertentu dalam acara tertentu, meskipun fungsi tersebut tidak perlu mengembalikan apa pun. Sementara Filter dapat digunakan untuk menjalankan fungsi yang WordPress lewati data selama acara tertentu dengan fungsi ini mengambil data sebagai parameter dan mengembalikan versi data yang dimodifikasi.

WordPress dan REST API

Representational state transfer (REST) ​​didasarkan pada protokol HTTP dan menyediakan semantik antarmuka yang seragam untuk membuat, membaca, memperbarui, dan menghapus data (CRUD).

Secara umum, eksekusi REST API di WordPress memungkinkan pengembang mengakses data di database WordPress dari jarak jauh dengan mengirim dan menerima objek JSON (JavaScript Object Notation). Akibatnya, ini memberi pengembang kesempatan untuk membuat, membaca, memperbarui, dan menghapus data WordPress dari aplikasi lain yang tidak direkayasa dengan WordPress. Misalnya, Aplikasi Web JavaScript atau aplikasi seluler asli.

Namun, saat kita semakin memahami hubungan Headless WordPress CMS dengan REST API dan Gatsby, kita perlu mencatat beberapa konsep dasar WordPress API:

• Rute dan Titik Akhir: Rute adalah jalur yang dapat Anda akses melalui panggilan HTTP sementara titik akhir adalah metode HTTP (seperti mendapatkan, memposting, memasukkan, atau menghapus) yang dipetakan ke rute tersebut.
• Permintaan: Saat Anda memulai permintaan HTTP ke rute REST terdaftar, WordPress akan secara otomatis membuat objek permintaan. Data yang ditentukan dalam permintaan akan menentukan jawaban apa yang akan Anda dapatkan kembali.
• Respons: Objek Respons adalah data yang Anda terima kembali saat Anda membuat permintaan. Ini dapat terdiri dari data yang diminta atau pesan kesalahan.
• Skema: Skema mengacu pada struktur data di titik akhir. Setiap titik akhir dapat memiliki struktur data yang sedikit atau berbeda secara signifikan yang dapat dikembalikan. Dengan demikian, skema akan menentukan semua kemungkinan properti yang dapat dikembalikan oleh titik akhir dan semua parameter yang mungkin diterimanya.
• Kelas Pengontrol: Kelas Pengontrol memungkinkan pengembang mengelola dan mendaftarkan titik akhir dan rute, sementara juga memungkinkan mereka menangani permintaan, memanfaatkan skema, dan menghasilkan respons.

'Kerangka' Bereaksi

Saat kita masuk ke inti hubungan Gatsby.js dan WordPress, untuk konteks lebih lanjut, kita harus menguraikan lanskap teknologi ini dari dasar-dasar yang lebih historis. React adalah kunci untuk cerita ini karena ini adalah library/framework frontend JavaScript yang tumbuh paling cepat. Dibuat terkenal oleh Facebook (pengembang intinya), situs web besar lainnya menggunakan React untuk frontend mereka seperti: Airbnb, Netflix, Dropbox, BBC, PayPal, Reddit, Salesforce, Squarespace, dan Tesla.

Akibatnya, karena React adalah perpustakaan dalam praktiknya (karena masih kekurangan fitur penting dari kerangka kerja yang lengkap), ini berarti bahwa 'kerangka kerja' lain dapat direkayasa di atasnya. Hasilnya, salah satunya adalah Gatsby.js.

Memperkenalkan Gatsby

Menurut situs web induknya, Gatsby.js adalah kerangka kerja JavaScript sumber terbuka dan gratis berdasarkan React yang membantu pengembang membangun situs web dan aplikasi dengan cepat. Pada prinsipnya, Gatsby.js menghasilkan halaman HTML statis dari aplikasi untuk pemuatan awal, dan kemudian melanjutkan sebagai aplikasi React satu halaman (SPA).

Atribut Gatsby.js

Dalam keadaan tersebut, Gatsby mengeksploitasi prinsip Progressive Web App (PWA) untuk mengambil hanya elemen yang diperlukan terlebih dahulu, dan kemudian memuat sisa aplikasi di latar belakang nanti. Selanjutnya, untuk memastikan hanya data yang diperlukan yang dimuat, Gatsby memanfaatkan bahasa kueri GraphQL (juga oleh Facebook) untuk memuat data dari sumbernya. Ini juga mempertahankan pengoptimalan gambar yang luar biasa.

Semua kemampuan yang digabungkan ini memberi pengembang alat yang diperlukan untuk membuat situs web dan aplikasi web secepat mungkin karena hanya memuat HTML, CSS, data, dan JavaScript yang penting. Jadi, setelah halaman dimuat, Gatsby mengambil sumber daya untuk halaman tertaut, dan dengan demikian menavigasi situs terasa cukup cepat.

Selain itu, karena halaman dibuat saat kompilasi, sebelum penempatan online, Anda tidak memerlukan server PHP yang kuat lagi dan dapat menyajikan file statis (HTML, JS, dan CSS, langsung dari penyimpanan bucket). Selain itu, karena Gatsby didukung oleh React, Anda akan dapat menyusun semuanya dengan baik dengan komponen. Aspek modular ini memungkinkan pengembang untuk dengan mudah menggunakan kembali komponen.

Fitur penting lainnya di luar kotak Gatsby meliputi:

• Generator situs statis
• Akses offline
• Mengambil halaman tertaut terlebih dahulu
• Caching halaman
• Tidak ada pengambilan kode asing
• Ekspor sebagai kode
• Isi ulang panas
• Kode isi ulang panas
• Komponenisasi
• Pengikatan data satu arah
• Kueri data API deklaratif (GraphQL)
• UI Deklaratif
• Pemuatan gambar progresif
• Pemuatan gambar responsif
• Sebaris CSS penting
• Hosting mandiri font
• Tanpa server
• Pipa aset
• Ekstensi CSS (SaSS)
• Sintaks JavaScript tingkat lanjut
• Reaksi komponen ekosistem

Plugin Gatsby

Pada dasarnya, plugin Gatsby pada dasarnya adalah paket Node.js yang menggunakan API Gatsby. Plugin ini dapat menambahkan sumber data, mengubah data ke format lain, dan menambahkan layanan pihak ketiga. Meskipun Gatsby.org memelihara perpustakaan plugin yang mencakup banyak plugin yang sudah dibuat yang dibuat oleh tim inti Gatsby atau pihak ketiga. Idealnya, untuk menginstal plugin untuk proyek Gatsby, pengembang menggunakan node package manager (NPM) di terminal UNIX mereka dan menjalankan perintah npm install.

Bagaimana GraphQL Comes berhubungan dengan Gatsby.

GraphQL berkisar pada gagasan bahwa Anda dapat menjelaskan ke API persis data yang Anda inginkan, dan Anda akan menerima hal itu. Akibatnya, ini lebih efisien daripada REST. Untuk tujuan ini, Gatsby menggunakan Webpack dan GraphQL. Lebih penting lagi, dengan GraphQL sebagai bahasa kueri, semuanya didefinisikan di sisi klien yang mengeksekusi kueri, dengan klien tidak menyadari cara kerja aplikasi yang kurang baik.

Implementasi unik ini memungkinkan pengembang untuk menghubungkan sumber data apa pun ke Gatsby. Misalnya, posting blog dapat berasal dari file penurunan harga, lembar Google, atau bahkan situs web WordPress lainnya. Oleh karena itu, memberikan peningkatan fleksibilitas dengan pengiriman konten.

Mekanisme Gatsby-WordPress (Sumber Plugin)

Saat kami lebih jauh membongkar hubungan ini, kami perlu memahami plugin sumber. Plugin sumber adalah plugin khusus yang bekerja dalam sistem data Gatsby. Seperti namanya, mereka mengambil data dari lokasi yang berbeda, baik lokal maupun jarak jauh. Akibatnya, data tersebut kemudian diubah menjadi apa yang disebut Gatsby sebagai node dan node field. Pada dasarnya, bidang simpul mewakili satu bagian data di dalam satu simpul, dan pada akhirnya, simpul ini dapat diakses melalui kueri GraphQL.

Dalam luas yang sama, melalui plugin sumber, Gatsby mendukung lusinan opsi CMS tanpa kepala, menyediakan tim teknik dan konten kenyamanan dan keakraban antarmuka admin pilihannya dengan pengalaman pengembang yang ditingkatkan dan manfaat kinerja menggunakan Gatsby, GraphQL, dan React untuk membangun paling depan.

Plugin 'Gatsby-source-WordPress' dibuat dan dikelola oleh tim inti Gatsby, dan menarik data baik dari situs WordPress yang dihosting sendiri atau WordPress.com. Ini juga memerlukan otentikasi OAuth ke Word-Press.com API, dan juga memungkinkan pengembang untuk meminta gambar responsif.

Pada dasarnya, plugin ini mendukung semua entitas di WordPress REST API seperti posting, halaman, tag, kategori, media, jenis, pengguna, status, taksonomi, metadata situs, dan jenis posting khusus. Selanjutnya, entitas Bidang Kustom Lanjutan (ACF) dan informasi bahasa Polylang dan WPML juga didukung, selain meta pos lain yang terdaftar di REST API.

Jadi, dengan plugin ini, pengembang dapat memilih rute mana yang akan diambil, meskipun secara default mengambil semua titik akhir wpjson. Jadi, pengembang dapat mengambil data dari WordPress dengan GraphQL menggunakan mekanisme di atas.

Dalam praktiknya, alat 'Gatsby-source-WordPress' menyediakan slug untuk semua posting dan entitas lainnya. Dan dengan demikian, yang perlu dilakukan oleh seorang insinyur adalah membuat halaman yang memanggil fungsi 'createPage'. Ini dijalankan di file Gatsby-node.js, biasanya dengan terlebih dahulu menjalankan kueri untuk sumber data dan kemudian memanggil 'createPage' untuk setiap node yang ditemukan, lalu menyetel file template untuk digunakan sebagai komponen.

CI/CD dan Otomatisasi Rilis Aplikasi.

Saat menerapkan CMS WordPress tanpa kepala dengan Gatsby, bagaimana penerapan dilakukan sangat penting. Biasanya, eksekusi semacam itu memerlukan penerapan aplikasi untuk diotomatisasi menggunakan Application Release Automation (ARA).

Umumnya, ARA memerlukan fungsi utama:

• Penyebaran data, kode aplikasi dan artefak.
• Penerapan konfigurasi khusus untuk setiap lingkungan
• Proses desain alur kerja untuk mengotomatisasi tugas, dan langkah penerapan.
• Terakhir, pemodelan lingkungan dan/atau penyediaan binari

Karena Gatsby memproduksi situs statis, sangat penting untuk menyiapkan saluran ARA sehingga ketika konten diperbarui di WordPress, konten tersebut juga dapat diperbarui di situs Gatsby. Biasanya, penyebaran berkelanjutan dipicu hanya ketika kode berubah, namun, untuk contoh ini, diinginkan untuk memicunya ketika data berubah. Jadi, untuk ini, kami sarankan menggunakan Netlify karena memiliki kemampuan penyebaran berkelanjutan yang luar biasa, dan mudah digunakan untuk diatur.

Membuat kueri dari WordPress menggunakan GraphQL dan gatsby-source-WordPress

Sebagai ilustrasi, gatsby-source-WordPress bekerja sedemikian rupa sehingga pertama-tama akan mengambil semua yang ada di titik akhir Anda menggunakan REST. Kemudian akan menghasilkan GraphQl API internal berdasarkan data tersebut. Selanjutnya, itu akan melalui kueri Anda dan mengumpulkan data dari API GraphQL internal itu. Jadi, pada dasarnya, build Anda hanya berakhir dengan data yang Anda minta dan tidak ada yang lain.

Keuntungan pengembangan WordPress Headless dengan Gatsby.js

Karena kami telah menyentuh pengembangan WordPress Headless dengan Gatsby, kami sekarang dapat menguraikan kelebihan dari pendekatan teknis semacam ini. Ini pada dasarnya akan memandu keputusan Anda apakah akan mengadopsi Gatsby atau tidak!

• Manfaat pertama adalah kemampuan untuk memiliki situs statis yang telah dirender sebelumnya. Ini adalah cara paling efisien untuk merender halaman web, dan karena Gatsby menggunakan GraphQL untuk mengeksekusi jumlah minimum data yang diperlukan, ini memberikan beberapa efisiensi ekstra untuk waktu setelah pemuatan awal.
• Visibilitas SEO yang ditingkatkan: Halaman statis mudah dibaca oleh mesin pencari karena semuanya telah diprarender dan dapat diindeks. Ini positif, berbeda dengan mekanisme tanpa kepala lainnya di mana merender halaman dengan JavaScript adalah masalah tentang optimisasi mesin pencari (SEO).
• Kecepatan pengembangan yang relatif cepat: Dibandingkan dengan pendekatan tanpa kepala lainnya, Gatsby memiliki satu cara pengambilan data yang terpadu dan mudah dipahami terlepas dari sumbernya. Ini membuat pengembangan lebih disederhanakan karena Anda dapat fokus pada situs Anda yang sebenarnya dan membiarkan Gatsby melakukan sebagian besar pekerjaan berat.
• Hosting Lebih Murah: Anda dapat meng-host aplikasi Gatsby Anda di mana saja karena hanya menyajikan file statis, sehingga menghemat biaya hosting. Selain itu, karena WordPress hanya dipanggil selama proses pembuatan, dan tidak pernah selama sesi pengguna, WordPress juga dapat dihosting di solusi hosting yang terjangkau.
• Keamanan yang Ditingkatkan: Secara umum, generator situs statis sangat aman karena tidak ada koneksi langsung ke database, dependensi, data pengguna, atau informasi sensitif lainnya.
• Plugin gratis: Dari perspektif non-pengembang, WordPress cukup mudah dioperasikan karena plugin yang tersedia. Namun, ini membatasi penerapan fungsi kustom. Sayangnya, terlalu banyak plugin dapat memperlambat situs karena menjadi berat dan lebih sulit untuk dirender. Eksekusi Gatsby pada dasarnya menghindari semua kemacetan ini.

Lebih banyak aspek yang dapat memotivasi Anda untuk mempertimbangkan Gatsby dengan WordPress:

• Mudah untuk mengelola panel admin WordPress.
• Sistem login dan otorisasi pengguna siap digunakan.
• Dengan editor Gatsby dan Gutenberg, Anda dapat membuat pembuat situs Gatsby drag-drop.

Kekurangan pengembangan WordPress Headless dengan Gatsby.js

• Batasan pembaruan: Saat konten berubah dari awal, ini menetapkan batasan seberapa sering situs Anda dapat memperbarui. Selain itu, dibutuhkan waktu hingga 10 menit untuk menjalankan build Gatsby jika situs Anda berisi banyak data, yang dapat menjadi masalah bagi situs yang sering diperbarui.
• Keramaian Pembaruan Reguler: Juga, karena Gatsby adalah generator situs statis, itu tidak bisa hanya "diedit", karena bahkan perubahan teks kecil akan memerlukan penerapan baru. Jadi, jika Anda memiliki halaman yang membutuhkan banyak perubahan konten harian yang dinamis, ini bisa memakan waktu dan merepotkan.
• Penundaan: Anda biasanya harus menunggu beberapa menit untuk melihat perubahan pada konten Anda saat ditayangkan.
• Kurangnya Pratinjau: Tidak seperti aplikasi WordPress tradisional, Anda tidak memiliki pratinjau apa pun di Gatsby. Sayangnya, ini adalah masalah terbesar yang ditemukan pembuat konten dengan Gatsby. Anda perlu mengompilasi semuanya, mungkin dengan pipeline Gitlab CI/CD yang mengkompilasi situs web dan meletakkan semuanya secara online.
• Kurva Belajar Curam: Umumnya, jika Anda ingin bekerja dengan Gatsby dan WordPress secara bersamaan, Anda harus relatif akrab dengan bahasa PHP dan JavaScript. Karena Gatsby menggabungkan React dan GraphQL, ini bisa menjadi kurva pembelajaran yang curam bagi banyak orang.

Pikiran Akhir.

Kesimpulannya, berkat kinerja dan keunggulan bisnisnya, semakin banyak perusahaan yang menerapkan Gatsby sebagai bagian dari tumpukan teknologi mereka. Meskipun penting untuk diingat bahwa dengan menggabungkan Gatsby dengan WordPress, WP hanya menjadi backend, yang menyiratkan bahwa Anda akan kehilangan beberapa fungsi dan kemampuannya.

Selanjutnya, pengembang yang berpengalaman dengan pengembangan WordPress akan menemukan Gatsby sebagai alat yang hebat dengan kinerja modern, skalabilitas, keamanan, dan manfaat kecepatan pengembangan. Semua ini sambil memungkinkan mereka untuk mempertahankan antarmuka pengguna pembuatan konten yang sudah dikenal yang ditawarkan oleh WordPress.

Namun, sebelum memulai teknologi ini, seseorang harus selalu mempertimbangkan spesifikasi dan tujuan proyek mereka. Misalnya, jika penekanannya pada skalabilitas, kinerja, kecepatan pengembangan, siklus hidup yang panjang, Gatsby akan melakukannya. Namun, jika penekanannya adalah untuk meningkatkan fleksibilitas dan alat untuk pembuat konten non-programmer dengan konten yang diperbarui setiap detik atau menit, maka Anda dapat mempertimbangkan pendekatan alternatif.