Jika kamu seorang web developer atau ingin menjadi seorang web developer entah itu Front End, Back End atau Fullstack sangat baik kamu mengerti mengenai SPA, SSG, SSR Dan JAMStack, kenapa? mungkin skills ngoding kamu sudah mumpuni tapi ketika di tanya perbedaanya kamu gak tau, pastinya kan bakal lucu atau skills web kamu perlu di pertanyakan meskipun skills web development mu sudah mumpuni, oleh karena itu di artikel berita ini, Konsep Koding aan berbagi informasi dan ilmu mengenai pengertian dan penjelasan mengenai SPA, SSG, SSR Dan JAMStack pada web develepment.


1. SPA (Single Page Applications)


Single Page Applications benar-benar menjadi populer di awal 2010-an, ketika popularitas AngularJS membuat pengembang front-end ingin mengkodekan seluruh konten aplikasi mereka dan mengalir dalam JavaScript alih-alih memiliki file HTML / CSS / JS tradisional untuk setiap halaman.
Gagasan di balik Aplikasi Halaman Tunggal (SPA) adalah mengembangkan situs web dengan cara yang sama seperti Anda mengembangkan aplikasi klien seluler atau desktop:
Kode sumber aplikasi Anda (kebanyakan JavaScript) bertanggung jawab untuk mengisi, berinteraksi, dan menavigasi antara konten aplikasi Anda di dalam renderer yang tersedia (browser web pengguna Anda).

Jadi alih-alih memiliki beberapa halaman HTML yang memuat berbagai sumber daya CSS dan JavaScript, dan browser Anda menavigasi antara halaman-halaman tersebut menggunakan tautan, dengan SPA Anda memiliki satu halaman HTML (index.html) tanpa konten, memuat satu atau banyak file JavaScript yang akan merender konten Anda, bernavigasi di antara bagian aplikasi Anda dan menangani interaksi apa pun antara komponen DOM Anda.

Jadi intinya sistem kerja SPA, mirip dengan Mobile App Development ketika logic Backend dipisah dengan Frontend menggunakan HTTP Request dengan berkomunikasi lewat Rest API. Contoh SPA : React, Angular dan Vue.

 SPA memanfaatkan teknologi berikut:
API riwayat HTML5 (atau hash # lokasi): API ini memungkinkan persepsi kemampuan navigasi antara halaman situs web Anda, membuat navigasi kompatibel dengan perilaku browser asli (tombol sebelumnya / berikutnya dan perubahan URL)

JavaScript Web Framework: React, Angular, Vue semua menangani representasi konten decoupling dari data, dan rendering serta pembaruan data tersebut ke DOM. Model ini menyederhanakan pembuatan aplikasi intensif data, dan terinspirasi oleh arsitektur MVVM aplikasi sisi klien.


Ajax dan HTTP APIs: Karena halaman awal aplikasi kosong, kode JavaScript akan sering memanggil API untuk mendapatkan konten pengguna. API ini biasanya menggunakan protokol REST dengan JSON sebagai format datanya, tetapi akhir-akhir ini GraphQL telah menyediakan alternatif yang fleksibel untuk kueri konten.


2. SSG (Static Site Generators)

Memang, banyak situs web menampilkan konten untuk semua pengguna mereka yang diedit oleh CMS (seperti Wordpress). Itu memungkinkan perubahan yang dibuat dalam CMS untuk digunakan secara langsung ke pengguna, karena konten dihasilkan pada saat dijalankan (waktu permintaan acara untuk CMS berbasis PHP).

Apa tantangan SSG adalah hipotesis bahwa konten harus diminta dari database untuk setiap permintaan dari pengguna. Memang, apa yang mereka sarankan adalah menghasilkan konten saat membangun. Karena begitu halaman Anda dihasilkan dari CMS, hanya itu, itu tidak perlu diubah sampai konten berikutnya berubah di CMS Anda.

Jadi mengapa tidak menghasilkan semua halaman situs web Anda sebagai halaman statis setiap kali konten Anda berubah?

Cara kerjanya biasanya adalah Anda akan menghubungkan konten Anda (CMS, CMS tanpa kepala, penyimpanan file, ...) ke mesin CI Anda menggunakan webhooks misalnya, sehingga setiap kali konten Anda berubah, pipa CI dipicu, sehingga membangun kembali semua Anda situs web dan membatalkan cache.

Selain itu, SSG baru seperti Gatsby atau Gridsome dibangun di sekitar kerangka kerja React / Vue, yang berarti situs statis Anda akan mendapat manfaat dari arsitektur kerangka kerja dan ekosistem, dan begitu halaman Anda dibuka, interaksi DOM tambahan ditangani oleh kode Anda menggunakan kerangka kerja .

Manfaat menggunakan SSG daripada SPA adalah:
SEO yang lebih baik: karena situs web Anda terdiri dari beberapa halaman HTML, perayapan bot lebih mudah dan konten Anda akan diindeks dengan baik.
Performa yang lebih baik: Alat SSG modern hanya menyertakan kode JS / CSS yang diperlukan untuk menjalankan halaman yang diminta, dan akan memuat kode tambahan jika pengguna menavigasi situs web Anda.

Decoupling konten: SSG menyediakan cara untuk memisahkan konten Anda dari perwakilannya.
Beberapa sumber konten: SSG menyediakan beberapa integrasi sumber konten, seperti CMS tanpa kepala (Contentful, Strapi), file markup lokal atau file jarak jauh.

Contoh SSR :

<div>Hello <?php echo 'I Love You; ?></div>


3. SSR (Server-Side Rendering)

Tren terbaru yang akan kami sebutkan di sini adalah Server-Side Rendering. Secara historis, Rendering sisi-server (atau skrip) telah ada sejak lama. Saya masih ingat ketika saya mempelajari web development menggunakan SSR dengan PHP Native.

SSR adalah singkatan dari Server Side Rendering. Ini adalah teknik yang digunakan untuk meningkatkan waktu pemuatan halaman yang dirasakan.
Dalam skenario non-SSR, aplikasi reaksi disajikan sebagai banyak file statis. Langkah-langkah berikut (kurang lebih) dilakukan sebelum pengguna dapat melihat render pertama aplikasi -


Kelebihan Dari SSR Web
SEO: jika Anda ingin halaman yang dikustomisasi pengguna diindeks di mesin pencari atau thumbnail yang dimuat sebelumnya di berbagi media sosial, Anda perlu halaman tersebut dibuat di sisi server.

Pembaruan konten: jika konten Anda berada dalam CMS dan Anda ingin setiap pembaruan tercermin secara langsung di situs web Anda, SSR adalah yang Anda butuhkan.

Kinerja: seperti halnya SSG, SSR biasanya menyiratkan kinerja yang lebih baik daripada SPA, setidaknya untuk pertama kalinya memuat konten halaman.

Satu codebase : Karena SSR berjalan di server Anda, Anda juga dapat meng-host API Anda dengan itu, memiliki satu repositori untuk API Anda dan front-end Anda.

4. The JAMStack

JAMStack lebih dari dunia pemasaran. Ini berarti JavaScript, API, dan markup. Jadi secara historis, sebagian besar akan mempromosikan penggunaan generator situs statis sebagai alternatif untuk CMS (Wordpress) tradisional atau Kerangka MVC sisi-Server tradisional.

Seiring berjalannya waktu, istilah ini menyatukan semua ekosistem dan perangkat yang ditautkan ke situs web statis dan yang diberikan sisi server, seperti:

  • CI Pipeline
  • Integrasi git
  • CDN untuk caching dan kinerja geografis
  • Pembatalan cache
  • Fungsi cloud untuk API

Selanjutnya Pakai Yang Mana?


Selanjutnya pakai yang mana?, untuk kesimpulannya kamu harus memilih yang sesuai budget, deadline dan resources mu, misal kamu gak bisa ngoding dan dana terbatas mungkin wordpress bisa jadi pilihan jika hanya untuk Blog dan Landing Page atau sisus informasi atau toko online dengan fitur yang tidak terlalu komplex. Namun jika kamu ingin membuat sebuah situs dengan banyak fitur dan berinteraksi dengan lokasi dan sebagainya maka kamu bisa menggunakan framework javascript atau framework php.

Baca Juga Artikel Berita KonsepKoding Lainnya