anyways Ini pertanyaan bagus nih Ini gua Pertanyaan bagus tapi gua pengen pengen bahas pengen bahas secara khusus untuk ini kayak bedanya lindset rendering sama service rendering khususnya di area atau next CS gitu kan di sini Gua udah siapin siapin whiteboard guys kayak gini Oke pada umumnya Guys kita kan bikin aplikasi tuh pasti akan ada beberapa pihak yang pertama mungkin ini ada user ya kan ini ada user atau client terus nanti ada set server di sini atau bahasa Indonesianya hostingan ya kan biasanya kan kalau kita bikin aplikasi itu ada bentuk simpelnya tuh seperti ini oke ini adalah user kita terus nanti ada hostingan yang nyimpan codingan website kita gitu kan Terus nanti mereka akan komunikasi dari sini set ke sini begitu aja dari sini ke sini kalau berasal dari user terus ke postingan ini kita namakan request ya ini simple banget sih basic banget response kalau dari hostingan ke client ini kita sebut dengan response gitu kan Nah terus untuk SSR atau service rendering basically ya Bentuknya sama kayak gini kita request sesuatu hostingannya Memberikan response lagi gitu dalam konteks web Oke dalam konteks front and berarti ini kita request sebuah website gitu lalu nanti hostingannya ini akan mengirim balik sebuah misalkan html atau web page gitu kan web page kayak gitu Nah untuk linese rendering dan server saya tendering ini prosesnya sama persis request sesuatu dibalikin html atau sebuah webpage nah yang membedakan adalah isi dari web page atau isi dari htmlnya nanti gini ketika kita menggunakan client rendering ya klient rendering misalkan kita pakai Fit atau kita pakai create up by the way jangan pada pakai udah not recommended yang akan terjadi adalah gini user kita atau klient kita akan nge-request sesuatu ke hostingan set ya kan lalu yang akan terjadi adalah hostikan kita ini akan ngirim html kosong Hah html kosong Iya html kosong Oke dia dari dari Cloud kita nih dikirim ke user client html kosong tetapi di sini ada isinya ada ada JS nya gitu oke nah jadi sekali lagi dari user ke hostingan itu dia akan minta sebuah web page dia akan melakukan sebuah request nanti dari sini dia akan mengirim sebuah html kosong yang ada javascriptnya Oke ketika masuk ke sini ke user client isi htmlnya ada nggak Nggak ada Tetapi dia ada javascriptnya di mana dalam javascriptnya ini si javascriptnya Ini yang akan ngisi html yang ada nanti javascriptnya pas masuk ke clientnya ini dia akan running gitu oke dan dia nanti akan berubah menjadi di sini prosesnya adalah JavaScript mengisi html gitu hasil akhirnya adalah ini javascript yang mengisi html kayak gitu cs-nya JS Dome Yes tentunya Dom yang memanipulasi dong kayak gitu Jadi intinya adalah dari ketika user itu nge-request ke hostingan yang akan terjadi adalah dia akan ngirim html polos kosong terus nanti htmlnya baru akan ada isi ketika javascript yang dikirim sebagai response itu di Running atau dijalankan di sisi user atau client sebelumnya html itu memang kosong aja gitu nanti baru akan ke isi ketika udah nyampe di client atau di user makanya namanya adalah apa teman-teman klient site rendering artinya apa renderingnya rendering yang akan terjadi di sisi client gitu contoh Ya ini gua udah siapin sebuah Project kita bukan bikin sebuah Project gimana sih Yang misalkan ini CSR vs SSR Oke subscribe Nah lihat nih oke nah sekarang kalian lihat ya di Project Fit kita di Project kita kalau kalian lihat di sini ada satu indeks html kan kayak ada satu file index html gue Zoom lagi deh satu file index html ini kalau kalian lihat ada isinya enggak Oke Enggak ada isinya hanya ada title-nya doang iya gitu sama sebuah Deep kosong dan sebuah script script gitu Script Oke bener-bener kosong dan inilah html yang nanti akan dikirim ke client kita ketika kita ketika kita nge-hosting front and kita front kita yang memiliki metode client rendering murni html yang akan dikirimin ke usernya itu ini di mana Ini tuh kosong banget terus kok bisa nanti ada isinya Bang gitu Kenapa ini kok kalau kita start itu bisa jadi ada isinya karena kalau kalian di sini dia ngirim apa juga sebuah script sebuah script dimana dalam script ini di main.sx ini dia itu akan ya Ada javascriptnya Oke dia nggak create root terus dia ngambil elemen by ID id-nya itu root ya kalau kita lihat di sini id-nya root Oke abis itu dia akan menjalankan javascript di sisi kliennya ketika html ini udah dikirimkan ke user Oke dia akan menjalankan main.sx isinya main.sx ada banyak javascript ini ada app ini juga di mana app ini adalah ap tsx file f.sx terus ini udah ada isinya gitu Nah nanti ini f.tsx ini yang akan muncul dimasukin ke dalam indekshot html ketika ketika main dot tsx ini dijalankan dan kapan ini akan dijalankan ya ketika usernya itu udah terima response si html ini yang tadinya itu polosan dari hostingan pas masuk ke sini javascript dijalanin bread langsung ada isinya kayak gitu Nah kalau server Gimana Bang Oke kita kembali ke konsep yang sama lagi sama user akan request Sesuatu akan dikirimkan ke sebuah response bedanya di mana bedanya adalah Kapan javascriptnya itu ter-execute kalau kita rendering ingat Kapan Ayo jawab dicat kapan gejavascriptnya akan ke execute ketika sampai di user atau di client Oke Tetapi kalau yang mengisi html ini akan ke execute ketika requestnya itu dilakukan oleh user gitu Jadi pas ini terjadi ini ya pas set clien ngirim request ke hostingan Tek ini yang tadinya nggak ada langsung tiba-tiba ada lalu yang dikirim udah bukan bukan html kosong lagi dan nanti dia Isi akan diisi oleh javascript enggak udah bukan itu lagi HTM yang tadinya kosong akan langsung diisi oleh javascript di sisi server oke terus ini nanti akan berubah jadi html yang udah ada isinya html yang udah ada isinya ini nanti akan dikirim oleh hostingan akan masuk ke client atau ke user sehingga pas user itu nerima html dia udah ada isinya gitu udah nggak harus javascript lagi untuk ngebikin atau apa namanya ngerender isi dari HTML yang sebenarnya makanya namanya server nya oke atau pengisian front and ya pengisian htmlnya itu terjadi di sisi server kurang lebih seperti itu perbedaannya gitu oke nah Ini ada yang nanya Berarti sekarang kita lihat prosesnya yang pertama kita bahas CSR dulu prosesnya yang pertama adalah client navigation jauh lebih cepat klaim navigation jauh lebih cepat Kenapa klien navigationnya jadi jauh lebih cepat maksudnya gimana maksudnya adalah ketika kita pindah-pindah page gitu ya itu jadi jauh lebih cepat oke nah kenapa sih bisa jadi jauh lebih cepat karena gini ketika kita kirim html kita kirim html yang polos dan hanya berisi javascript itu basically semua pagenya semua pagenya itu Udah disiapin di dalam javascript yang dikirim ke user jadi semuanya tuh Udah ready di sisi usernya ketika kita gonta-ganti page kita hanya jalanin javascript yang udah kekirim ke clientnya aja kayak gitu kita nggak harus melakukan request lagi ke server gitu oke maka dari itu gue bilang clien navigation itu jadi jauh lebih cepat Why karena pagesnya itu udah siap di sisi user tinggal di eksekutif aja sesimpel itu kayak gitu kita masuk ke Konsep ini gua nggak akan bahas dalam banget sih Tapi kalau kita lihat konsepnya adalah inisial load-nya inisial load akan jauh lebih berat kayak gitu oke Kenapa sih bisa jadi jauh lebih berat karena gini ketika kita melakukan client rendering kan kita minta sebuah html kosong Oke semua pages yang ada dalam web app kita ini basically akan Kekirim langsung ke client semua sehingga ya awalnya file size dari yang responsnya itu sendiri respon sizenya itu akan besar Kenapa ya karena kita ngirim banyak hal sekaligus gitu dalam satu request maka dari itu gue bilang inisial load-nya itu akan jauh lebih berat tuh karena waktu kita request pertama kali itu kita akan dikasih banyak banget sekaligus gitu Tapi untuk selanjutnya itu akan jauh lebih cepat Kenapa karena semuanya itu Udah tersedia di kita di user gitu makanya gue bilang client navigationnya itu jadi jauh lebih cepat Oke kalau gua udah siapin Project sebenarnya akan lebih enak sih kalian lihatnya anyways tapi intinya itu karena kita di awal itu udah ngirim banyak sekaligus itu akan ee menghasilkan response time awalnya itu akan menjadi jauh lebih lama jadi jauh lebih berat atau lebih lama itu tapi berikutnya ketika kita gonta-ganti page itu akan merasa jauh lebih cepat karena semua yang kita butuhkan semua pajas yang kita butuhkan itu Udah ready di sisi klientnya kayak gitu Nah kalau untuk SSR gimana Apakah SSR berarti lebih bagus atau lebih jelek nggak juga tergantung ke use case-nya gini kalau misalkan kita menggunakan SSR ketika kita minta sebuah web page ya ketika kita melakukan request set ke postingan ini gua ganti ke server setting dulu di sini kita akan dikirimin html yang udah diisi yang berarti hostingan ini hanya akan mengirim apa yang diminta oleh user atau client udah beda dari client set rendering dimana kita mengirim semuanya gitu jadi user atau klient itu hanya dapat yang dia minta aja page yang waktu yang pada saat itu dia minta kayak gitu hasilnya adalah lebih cepat karena apa Karena yang dikirim adalah apa yang kita minta apa yang kita minta doang kalau kita klaim steering kan kalau kita misalkan pakai CSR itu kan kita mintanya homepage dia akan ngirim semua homepage profile card transaction history gitu-gitu akan dikirim semua tapi nextnya jadi jauh lebih cepat Nah untuk SSR kita hanya akan dapat page yang kita minta misalkan kita minta homepage Ya udah yang dikirim adalah html dan javascript untuk homepage aja kayak gitu minusnya adalah untuk pages berikutnya untuk navigasi jadi terganggu gitu dalam artian akan ada masa dia nunggu dulu gitu nggak secepat cliense rendering jadi jauh lebih cepat karena kita udah punya semuanya gitu Tapi kalau kita menggunakan server karena kita belum punya semuanya jadi ketika kita ganti page itu dia harus request lagi gitu mau ganti page sekarang ke dari mau ke profile ya udah dia minta ke hostingan lagi hostingannya nanti akan mengirim lagi html yang udah diisi kali ini profile page kayak gitu jadi perbedaannya adalah perbedaan yang paling kelihatannya adalah dari sisi page load-nya kalau servicering itu setiap page-nya jadi jauh lebih ringan tapi pas gua tak ganti agak lebih berat karena kita request berulang kali kalau CSR atau client saya rendering itu kebalikannya untuk pertama kali banget akan lebih berat karena kita ngeload banyak sekaligus tapi untuk berikutnya navigasinya akan jauh lebih singkat gitu karena yang kemudian kita butuhkan itu basically Udah ready nah satu Pro lagi dari adalah dia lebih bagus untuk Seo Seo dalam artian kalau kalian belum tahu adalah discoverbility wpage kalian di dalam Google search engine gitu Jadi kalau Seo page kalian itu lebih bagus berarti akan lebih sering muncul di rekomendasi di search Resort Google nah kalau kalian menggunakan SSR oke yang akan terjadi adalah ingat bahwa htmlnya itu udah diisi nah html yang udah diisi ini akan lebih Seo friendly gua nggak akan bahas mendalam banget tentang technicalnya tapi ini lebih Seo friendly Oke akan jauh lebih Seo friendly karena di sini si Google itu udah bisa ngebaca semua konten yang akan ada dalam web page tersebut dari title heading sampai konten misalkan kita bikin artikel sampai isi artikelnya Tuh udah ada semua di dalam web page ini Udah tersedia htmlnya di web kayak gitu sedangkan kalau kita pakai client rendering ingat htmlnya kosong hanya akan diisi ketika javascriptnya itu di execute nah sayangnya untuk si untuk Seo kita itu harus memiliki html yang udah keisi karena crawler atau bot yang nyari web page ini di internet botnya si Google ini itu jarang akan nge execute javascript di sisi server Gitu jadi jarang dia akan terima kosong terus dia akan executed javascript-nya untuk ngisi htmlnya itu jarang terjadi makanya direkomendasi banget kalau kalian mau ningkatin Seo kalian atau discoverybility dari web page kalian itu harus sediain html yang memang udah ada isinya maka dari itu SSR itu better for Seo terus use case-nya gimana ya kan sekarang kita kembali nih Mana yang lebih bagus gitu kan Apakah CSR atau SSA gitu kembali lagi use case-nya gimana misalkan mau bikin admin dashboard oke Atau kayak atau back office untuk commerce atau bisnis lo gitu aplikasi akuntansi misalkan biasanya ini kita pakai CSR gitu supaya berasanya lebih ringan karena kan kita akan Sering pakai websitenya itu udah lebih sifatnya lebih ke web application yang sebisa mungkin terasa lebih smooth untuk si usernya mau gonta-ganti page itu jadi jauh lebih mudah sama rasanya kayak kalau lo pakai aplikasi mobile kayak gitu abis itu lu nggak punya kebutuhan untuk Seo maka dari itu Pilihannya yang better adalah clienside rendering gitu atau mungkin lo mau bikin application yang bersifat enggak butuh ditemukan di web misalkan lo mau bikin converter audio gitu atau mau bikin music player itu kan aplikasi yang tidak membutuhkan discoverbility aplikasi yang tidak butuh discoverbility gitu contohnya contoh basic player habis itu Misalkan cat GPT Clone clone habis itu Misalkan file converter gitu-gitu untuk web page promosinya Mungkin lu butuh tapi untuk app-nya sendiri kan lu nggak butuh mungkin betternya adalah menggunakan client rendering tapi misalkan lu Butuh lu mau punya blog atau sosmed Nah ini kan lu butuh discoverbility gitu kan misalkan lu nulis sebuah blog dan lu pengen block orang-orang itu bisa di discover di Google nah ini pasti lu butuh ssir gitu atau mungkin lo mau bikin e-commerce dimana orang itu akan sharing produk-produk mereka misalkan contohnya kalau lo Google nih kalau Google sekarang sepatu bola gitu ada shopee ada Tokopedia ada blibli Bukalapak Lazada Nah kalau lo mau bikin semacam kayak gini otomatis lo akan butuh Seo yang lebih bagus supaya lebih sering muncul di Google Search result result page otomatis kalau mau bikin semacam e-commerce lo harus memiliki harus menggunakan server kalau mau buat portfolio misalnya portfolio pribadi lo sendiri gitu untuk showcase diri dulu sendiri Contohnya kayak website gua ini yang Gua jarang update buat fmc.com nah ini berarti harus server saya tendering karena apa Gue pengen we page ini tuh bisa muncul di Google gitu loh kalau misalkan gua nggak mau ini muncul Misalkan gua bikin aplikasi ya kayak kalkulator application gitu saintificalculator replication gua kan enggak butuh itu muncul di search engine itu lebih ke ya aplikasi murni aja gitu ya udah itu mungkin gua enggak butuh server setting butuhnya lenset rendering aja kayak gitu Oke gimana guys semoga bermanfaat ya kalau misalkan ada yang kurang ya silakan tanya aja bisa tanya di discord bisa tanya kalau gua lagi live streaming dan bisa tanya juga di kolom komentar alright guys semoga berguna ya oke Udah nih gua jelasin secara daging selain ring sama server set rendering di next JS atau CSR versus SSR secara umum sih Oke thank you Thank you Thank you Thank you