3 Teknik dalam Pengembangan Frontend Web
Dalam pengembangan frontend terdapat 3 teknik yang masing-masing memiliki kelebihan dan kekurangan, yaitu SSR, SSG dan CSR.
Ada beberapa framework dari javascript yang memang di khususkan untuk membangun frontend website dengan ketiga teknik tersebut. Seperti React, Vue dan Angular. Tapi di artikel ini, saya akan menggunakan React Js sebagai contoh.
SSR (Server Side Rendering)
SSR singkatan dari Server Side Rendering adalah teknik me render React Js di sisi server, dan mengirimkan hasil render tersebut dalam bentuk html dan css ke browser/client. Teknik ini berbeda dari CSR. jika CSR, browser meminta file js dan browser akan me render file js tersebut dan menjadi html. Berbeda dengan SSR yang akan me render file js di sisi server dan saat dikirim ke browser sudah dalam berbentuk Html dan Css. berikut illustrasi dalam bentuk gambar untuk menjelaskan bagaimana SSR bekerja :
- Build React Code dan deploy ke server.
- Browser Request data ke server.
- Server render React code.
- Server mengirimkan file html dan css ke browser.
Dengan teknik SSR ini website akan lebih SEO Friendly dan akan lebih cepat saat di akses oleh user. Karena setiap request dari browser, teknik ini akan me render React Js di sisi server dan browser hanya menerima file html dan css saja.
Ada Framework React yang di khususkan untuk membangun frontend web dengan teknik SSR. Yaitu Next Js.
SSG (Static Site Generation)
SSG singkatan dari Static Site Generation adalah teknik me render React di saat build time React app. Teknik ini hampir sama dengan SSR dan sama-sama baik untuk SEO. Perbedaan dari SSR dan SSG adalah, jika SSR akan me render React code saat respon dari browser, tapi kalau SSG me render React code saat build time. Berikut illustrasi bagaimana SSG bekerja:
- Build React code dan menghasilkan file html dan css.
- Deploy html dan css hasil build ke server.
- Browser Request data ke server.
- Server mengirimkan file html dan css ke browser.
Bisa di lihat pada gambar di atas. proses build React code pada nomor 1 sudah menghasilkan file html dan css. Dan saat browser meminta request data ke server, server mengirimkan html dan css tanpa proses me render React code lagi.
Saat website menggunakan teknik SSG, pasti akan lebih cepat saat di akses, tapi masalah nya adalah, jika kita memiliki data yang sering berubah maka teknik ini tidak di rekomendasi kan. karena data sudah di hasilkan saat build time. Jika data ingin berubah maka harus melalui proses build lagi.
Ada Framework React yang di khususkan untuk membangun frontend web dengan teknik SSG. Yaitu Gatsby Js dan juga Next Js.
CSR (Client Side Rendering)
CSR singkatan dari Client Side Rendering adalah teknik me render React code di sisi browser. Berbeda dari SSR, saat browser me request data ke server, SSR akan me render React code di server dan mengirimkan html dan css ke browser. Berbeda dengan teknik CSR. Saat browser me request data ke server maka server akan me respon dengan mengirimkan file React ke browser dan browser akan me render file React tersebut dan menghasilkan html dan css. Berikut illustrasi bagaimana CSR bekerja:
- Build React code dan deploy ke server.
- Browser request data ke server.
- Server mengirimkan file React ke browser dan browser render file React.
Bisa di lihat di atas, perbedaan antara SSR dan SSG dengan CSR adalah jika CSR me render react code di browser, bukan di server. Dengan teknik ini, proses pertama kali membuka website akan sedikit lebih lambat dari pada SSR dan SSG. Dan untuk website yang mengutamakan SEO Friendly tidak di rekomendasi kan dengan teknik ini.
Untuk dapat membangun frontend web dengan teknik CSR dapat menggunakan CRA (Create React App).
Mungkin itu saja terlebih dahulu penjelasan tentang SSR, SSG dan CSR. Mungkin jika ada waktu saya akan menjelaskan lebih mendalam tentang 3 teknik tersebut.
