Ngobrolin React Server Component
Ringkasan Episode
Bantu KoreksiEpisode Ngobrolin WEB ini membahas React Server Components (RSC), topik yang sebenarnya sudah ada sejak 2020 namun baru banyak diadopsi secara luas dalam beberapa tahun terakhir. Diskusi dimulai dengan menjelaskan perbedaan antara RSC dengan server-side rendering tradisional, di mana RSC memungkinkan developer menggunakan React di kedua sisi—server dan client—dalam satu codebase yang sama. Eka dan Ivan mengulas evolusi pengembangan web dari HTML statis, ke Single Page Application (SPA) yang semuanya client-side, lalu muncul meta framework yang mengadopsi server-side rendering untuk mengatasi masalah performa dan SEO. RSC menjadi solusi selanjutnya dengan memisahkan komponen yang berjalan di server (yang tidak perlu interaksi) dan di client (yang butuh interaktivitas), sehingga mengurangi bundle size yang dikirim ke browser. Episode ini juga menampilkan demo praktis implementasi RSC menggunakan Parcel bundler, menunjukkan bagaimana komponen server bisa mengakses resource seperti file system dan database secara langsung tanpa perlu membuat API endpoint terpisah. Diskusi diakhiri dengan percakapan tentang tantangan adopsi RSC terkait perubahan mental model developer, serta obrolan santai tentang penggunaan AI coding tools seperti Cursor dan Windsurf.
Poin-poin Utama
- •React Server Components sudah ada sejak 2020, baru diadopsi luas belakangan ini oleh meta framework seperti Next.js
- •Perbedaan mendasar: Server-side rendering mengirim HTML lengkap ke browser, sementara RSC memisahkan komponen server dan client secara eksplisit
- •Komponen server tidak dikirim ke browser, hanya hasil render-nya berupa HTML, sehingga mengurangi bundle size secara drastis
- •Dengan RSC, tidak perlu membuat API endpoint terpisah untuk mengambil data—komponen server bisa langsung akses database atau file system
- •Direktif 'use client' menandai komponen yang harus berjalan di browser dan memerlukan interaktivitas
- •Parcel bundler menjadi alternatif implementasi RSC selain Next.js, menawarkan pendekatan yang berbeda
- •Adopsi RSC membutuhkan perubahan mental model karena developer harus sadar di mana kode berjalan (server atau client)
- •Diskusi tambahan tentang AI coding tools (Cursor, Windsurf) dan pentingnya tidak kehilangan kemampuan menulis kode manual
[musik]
Dapatkan hanya di Dominesia
[musik]
[musik]
Jadi episode kali ini
di Hasil Kollaborasi dengan
Dominesia
Ini adalah sponsor pertama ya
sponsor pertama yang benar-benar
menghasilkan
pundi-pundi
yang benar-benar semangat support
Terima kasih ya
buat teman-teman yang mau
buat teman-teman yang mau beli layanan hosting
di Dominesia
Pakai promo kita ada nggak kita punya tag?
Ada, tapi belum ditulis
bentar ya, belum siap
belum ditulis
ngobrolin web DN
ngobrolin web DN
diskonnya 10% untuk semua paket web hosting
lumayan, lumayan
diskon ini
berlaku hanya
siklus 1 tahun dan 2 tahun pembelian pertama
saja
berarti untuk sekarang
biar diskonnya lebih besar kan
Lihat transkrip lengkap (2844 segmen lagi)
Nah, ini kodinya
berarti
ini berlaku untuk web hosting
aja ya, untuk sementara ya
nanti, bisa lah negot-negot
untuk beli domain ya
walaupun namanya Dominesia ya
tapi beli hosting
Domaine dan hosting Nesia
Domaine dan hosting Nesia
Nah, pertanyaannya
jadi Domaine Nesia ini
atau di hosting Domaine Nesia bisa pakai
React Server Component?
Bisa
Bisa ya
Masa nggak bisa ke hosting
React ya?
Bisa
Kalau ada hosting Nesia bisa
kontak di customer service ya Domaine Nesia aja
Oh iya kan ya
Harusnya kita undang nih
tim Domaine Nesia ya
Di suatu saat
Ya ya
Beberapa hosting N ya
Beberapa yang apa
nanti kita coba cek ya
Kita nanti minta
demo account aja sama Domaine Nesia
untuk ngecek bisa nggak
React Server Component
Karena butuh Node.js kan
untuk ngerunning runtime-nya
di server
Nah, pertanyaannya adalah
React Server Component
sama
server site trending itu sama apa
beda?
Beda
Tepiknya ya
berarti topik malam ini adalah
React Server Component
saking
kita tadi udah berbual-bual sebelum mulai
jadi lanjutin aja
Jadi malam ini kita bahas
React Server Component
bisa di posting juga
Ya, karena ini
sebenarnya topik yang sudah cukup lama ya
sudah cukup lama
Udah lama banget
maksudnya apa
di dunia ekosistem JavaScript
framework ya, itu kan kayak
setiap bulan sekali ada fitur baru
ada framework baru, sedangkan
server component ini ternyata
udah ada dari 2020-an
udah hampir 5 tahun
berarti kan itu kalau di dunia
ekosistem JS udah ada lama banget ya
Nah, cuma emang
penerapannya
kayak adopsinya
terus kayak terintegrasi
dengan framework dan
meta frameworknya itu emang lambat banget
relatif lambat
jadi kerasa baru
kerasa seolah-olah baru dan jujur
gua sendiri juga belum pernah pakai di production sih
Mungkin kita bahas tentang
server
tentang server componentnya dulu kali ya
ini kebetulan tadi barusan aja
nyari-nyari ternyata ada yang bahas
nggak tau ini relate
apa masuk nggak ya, maksudnya
apa yang kita bicarakan
dengan dia kan kadang-kadang mungkin istilahnya
sama tapi ternyata maksudnya beda
ternyata refer ke hal yang
berbeda
jadi kita coba pelajari sama-sama aja ya
Oke, ini bahas tentang
JS
Kenapa? / Ini menarik sih
ada hubungannya dengan yang
barusan gua bilang yang tentang adopsinya
agak lambat, jadi maksudnya
belum terlalu top of mind juga untuk
banyak developer
tapi salah satu meta framework
yang emang terdepan
paling depan dan paling apa ya
paling prominent lah, paling kelihatan
paling kelihatan ngadopsi react server
component ini adalah
yang lain, se-next.js
jadi banyak orang mungkin agak
rancu mikir server components itu
fiturnya next.js
atau fiturnya react sih
jawabannya adalah
cuma yang mengintegrasi
dengan cukup
totalitas lah, maksudnya
all-in di server components itu
emang next.js, jadi maksudnya ini
di artikel ini
dalam konteks penggunaannya di next.js
tapi apa, perlu diingat
bahwa si server components itu
bukan fitur next.js
berarti
ini ada hubungannya
mungkin ada hubungannya sama
masing-masing meta framework
itu kan mereka kayak ada kebutuhan
untuk
server
component kan awalnya ya
dan mereka kayaknya implement
masing-masing tuh si next.js
mereka teranjur bikin cara mereka sendiri
tiba-tiba ada server
components, dan maksudnya
buat ngadopsi dengan seamless itu
kan nggak terlalu mudah
nah, cuma selain next.js kan
resource-nya cukup besar juga ya
banyak developer yang ngerjain
banyak maintainer, banyak
yang bisa ngasih kontribusi, jadi dia
salah satu yang paling terdepan
ya, lanjut, Baca
ya, jadi
setelah
mereka masing-masing implement
ya samalah ya, kayak misalkan
di web standard gitu ya, modelnya kayak
mungkin
view transition, face
betul, jadi awalnya bikin sendiri
terus yang web standardnya
atau framework dasarnya itu
sudah menyediakan, jadi yang lain ikut adopsi
aja, jadi lebih gampang kan
abstraksinya jadi lebih sederhana
kalau fitur-fitur lain kan
tinggal, apa ya, kayak library yang bisa
di-replace, kalau ini kan agak rumit nih
karena di satu spesies
ada project dan ada apanya
ada handling di server
ada handling di client, belum
antara server ke client
yang dikirim apa, ngirimnya gimana, ya itu kan
semua harus dipikir waktu
kalau mau mengadopsi
si teknologi server komponen sih
ya, ini cerita awal
dari request-response
ya, HTML
CSS standard, kemudian JavaScript untuk
interaksi, kemudian muncul
SPA ya kan, jadi
standard baru, banyak orang berlomba-lomba
untuk menggunakan single page
application karena user experience-nya
bagus, nggak perlu refresh
dan lain-lain, terus setelah
itu
merasa, apa ya, semakin
kompleks, kadang-kadang
apa ya, lagging
semakin berat
gitu ya
buka tab
jadi semakin, apa, browser jadi
makan memori banyak gitu ya, nggak tahu
ya, penyebabnya itu juga atau nggak
akhirnya muncul
semacam meta framework
yang mengadopsi
server-side rendering, jadi
kembali ke server lagi
jadi ada banyak orang yang akhirnya
migrasi dari SPA ke
MPA, multi-page application
atau server-side rendering
tapi sebelum ke server-side
rendering, muncul static-side
generator dulu ya, si Gatsby ya
kalau di Dunia React ya
walaupun sebenarnya SSG ini
muncul sebelum SPA sebenarnya
kayak Jekil, itu yang
jadi udah dulu kan, Jekil, iya
jadi, gue masih inget nih
SSG, tapi yang pakai
yang pakai
waktu itu
kayak News Portal, iya
iya, salah
salah
salah penempatan
jadi harus dibulai
terus ya, ada
40.000 artikel
masa setiap kali di deploying
40.000 page
iya, nggak
kalau news itu udah pasti
cms ya
iya, udah paling pas itu
pakai cms lah ya, kalau
news ya
kalau blog mungkin masih oke lah ya, kalau blog
paling, ya update-nya
berapa, seminggu sekali, sehari
sekali, kalau SSG itu
sebenarnya bukan hal
baru ya, static side itu
sudah cukup lama
ininya, gaungnya
bahkan di WordPress jaman dulu, ada kok
yang bikin static side, bahkan salah satu
project saya yang tertua sekarang, yang saya maintain
juga masih pakai static
side, jadi setelah di save
HTML-nya disimpan di
S3
dari CloudFront
masalahnya
simpel
pertanyaannya, kalau menu
berubah
gimana, tapi
harus diribil semua
harus diribil dulu, ya
sampe sekarang masalahnya masih tetap sama
terus ya, di text file-nya
iya
nggak bisa, tapi kan file-nya ada banyak
ya tuh, kan
HTML kan ribuan
isinya banyak
ya ribuan lah, nggak sampe puluhan ribu, tapi
ribuan, jadi kalau nge-bill itu
lumayan
bisa menghabiskan biaya juga
kan, buat server-nya nggak bisa
eh, di lokal bisa nggak, bisa kan
tapi berat sih, kan server-nya online
online ya, oh iya, isinya
online ya
dibatching, jadinya ya
server yang empot-empotan
ngebatching gitu
oke, ini kita bahas tentang
client component dan server component, jadi kalau
SBA kan, ya client component kan
udah tau ya temen-temen ya, kalau bikin component ya
itu client-side kan
yang berjalan di browser, jadi
in case temen-temen yang nggak kebiasa
sama front-end, bingung client kan, bisa
artinya macam-macam ya, kalau orang back-end
mungkin mikir client-nya itu aplikasi yang
merequest ke service atau ke API
nah, dalam hal ini, client
maksudnya, berjalan murni
di browser. Tadi
Basrija kan, apa bedanya sama server-side
rendering tadi kan ya
sebenarnya, sebelum kita kesana
kita pernah singgung
prerender
ya, karena masalahnya
dulu kan, Googlebot atau
Crawlerbot
nggak bisa
ngerender JavaScript
jadinya, kontennya nggak bisa
di-crawling, jadi
seo gitu ya
akhirnya
solusinya kan, pakai
prerender tuh, jadi
URL yang
diterima pertama
di proxy, terus di prerender
jadi ada
kalau bahasa kerennya sekarang
itu
edge computing
edge computing
jadi URL-nya di hit
terus di build dulu, page-nya
di cache, di
edge, dan di serve
jadi, tetap aja, tapi
itu memang full HTML, tetapi
masih client-side
rendering ya, di build
dan di serve, nanti setelah
sampai di
browser, baru di
hydration, bahasa
bahasa
keren ya
lalu server-side rendering gimana
sama aja
tapi tanpa ada prerender
jadi dari sisi server
tetap ngeranin
jadi langsung ke
load balancer, tetap
ngeranin javascript-nya
yang
mengirimkan
HTML, jadi sudah di
full render
jaman itu
saya masih, itu sampai batas
itu doang
dulu pakainya render tron gak sih?
pake render tron ya
ada prerender.io
ada macem-macem sih
kalau prerender.io kan hosted service ya
bayar, kalau render tron itu
kalau gak salah, library-nya Chrome deh
Google yang bikin
biasa sama, fungsinya sama
cuma kita nge-set up server sendiri
agak repot, tidak buat ngejalanin
itu, cuma udah di deprecate
sekarang, karena udah
not recommended lagi
sebelum ada jamannya server component
kan server-side rendering tuh
nah server-side rendering tetap, dia aja
react, dijalankan di server
bedanya jamannya itu tetap
jadi di codebase-nya kita
itu tetap harus
apa namanya
membuat kondisional
contohnya, objek Windows gak ada
type of window, undefined
gak bisa dipakai
pertama kali belajar Gatsby
belajar react, dulu belum paham ya
karena buru-buru nih, buru-buru pengen
jalanin dari template
belum ngerti fundamentalnya
udah, tiba-tiba, window.local
storage atau apa, tiba-tiba
error, karena harus jalan
nah, jadinya
akhirnya, ya
codebase kita, codebase yang saya
buat dulu itu, ya
ngecek-ngecek Windows object, ngecek
ngecek-ngecek yang browser
specific object, sehingga
eh, masih seilang
ada, ada, ada
server component
eh, sorry, server component
sering dengar
tapi, saya gak pernah ngulik
karena gak ada project yang relevan saat ini
kesana, jadi benar-benar pengen
belanja malam ini
kita sama-sama belajar ya
kalau temen-temen, ada yang udah pakai
atau ada yang udah ngulik
boleh dong, kita
berbagi ceritanya ya
Mas Ricky, halo sangat malam
Mas Ricky
jadi, kita sambil
ini, sambil ngulik ya, sambil belajar ya
jadi, disini, disebutkan
kalau klien, ya seperti yang kita tulis ya
apa yang kita tulis, misalkan div
apa, gitu ya, atau
button, atau form, dan lain-lain
yang di
client side, nah kalau yang di server side
yang server component, maksudnya
itu adalah komponen
yang dirender
menjadi HTML, di sisi server
jadi
react komponen yang
ada di
server, itu
dirender dulu, baru dikirim ya, berarti
bentukannya akhirnya adalah
HTML ya
HTML yang valid
yang bisa dibaca
oleh browser
karena kalau kita tulis misalkan
komponen button dengan huruf B besar
kan, si browser nggak ngerti kan
nggak ada, nggak kenal
nggak ada, nggak kenal, gitu
itu ya, bedanya ya
ya,
sebenarnya, ya sama
itu tadi yang disebut sama Ivan
kalau yang
react component biasa ya
ini yang belum dipisah server dengan
client, itu ya komponen
aja, jadi, apa, itu
tadi, kita harus ngecek
sendiri ya, contoh recehnya
itu, kita harus ngecek sendiri if type
of window undefined, kalau nggak
di check gitu, bakal breaking
pas di server, kenapa? Karena di server
jelas nggak ada browser API window
kan, jadi dijalaniin semua
implikasinya apa, ngaruhnya apa, karena
itu sebetulnya apa
jadi kayak, kode komponennya
jalan dua kali, kode yang persis sama
di server jalan, di client jalan
bundle size-nya ya, besar
kan, karena semua
ya, punya semua udah segelondongan itu
jalan di server,
kalau ada yang apa, yang kayak tadi
kasusnya, browser API
pakai tanpa kondisional, ya
breaking di server, ya,
kalau pun di check, ya udah, seluruh bundle itu
nanti, dehydrate lagi
ke client keseluruhan, itu yang
react komponen biasa
yang belum dipisahin server sama client
nah, dengan adanya si
react server komponen dan client
komponen ini, jadi kayak ada
separation of concern dipisah, emang
yang cuma jalan di server
aja, itu ini ini
ini, dengan semua
kapabilitasnya ya, dengan semua kemampuannya
nanti yang dikirim ke client
untuk hydrate, termasuk
apa itu kayak peta
apa namanya itu, yang virtual dome
kan dia punya kayak blueprint
untuk ngerender semua, punya logicnya
cuma logic client yang dikirim
jadi intinya sih, separation of concern
antara server dan client
sekarang sudah built in
gitu intinya
tapi, jadi, sebenarnya
penjelasan panjangnya itu tuh, yang di artikel itu
iya, baru ngerti
jadi, sebenarnya build size
sorry, bundle size nya
untuk server sendiri
anggapan gue ya, berarti ada
server.js sama client.js
jadinya kan, misalnya
simplified version nya gitu ya
server.js sama client.js
jadi waktu, karena
gak butuh juga kan server.js itu
semua komponennya
dikirimkan ke client
gak guna, karena jamannya waktu server
self rendering react dulu
ya, semua-semuanya dikirim
nanti di, di, di
sampe 4 mengembangkan, 4 mengembangkan
7 mengembangkan, iya
jadi sebenarnya, kalau ini contohnya kayak
anggap aja
yang
header lah ya, header, ada header itu
header komponen, dalam header komponen
ada search bar
itu yang client, jadi
sebenarnya waktu di render di server
header itu adalah
komponen, react komponen
nulisnya juga
kayak react komponen, dan di bundle
di dalam server.js
di, waktu
di render, jadilah html
yang dikirim html doang sekarang
ke client
dan menyisakan si
si search bar itu gak di render, gak
di render di server
di server, di search bar nya
jadi dia hanya mengirimkan tagging
atau bagaimanapun caranya magicnya
gak tau, dia kirimkan itu
sebagai tagging, tag aja
nanti di hydrate sama si
client.js
dan bahkan client.js itu
optional sih, jadi misalnya
website static yang simpel banget
gak ada hamburger menu, ya misalnya cuma
kayak landing page atau marketing
buat collect email address
misalnya semua server site gak ada clientnya
yang lainnya 0, literally 0
dikirim html aja
hmm, ya ya ya
ini, jadi mengingatkan
ke
island architecture gak sih si
astro komponen, nanti kita
buka artikelnya dena bramov
yang penting itu, tapi
selesaikan artikel ini dulu aja, dia
mengcompare dengan apa itu ssr
dan ssgang
ini mah yang
dijelasin Ivan
iya ini yang dijelasin Ivan ya
jadi server komponen
sebenernya gue belum baca itu, tapi meniat gambar ini
gue udah kebayang
langsung tau
dengan kenangan
masa lalu
kenangan masa lalu, kenangan merender
karena itu
kenangan merender
waktu buat render itu mau
apa ya, karena
projeknya udah jadi, itu
ngedownload
javascriptnya itu sampe 4M
4-5M itu, saya masih
inget terus, berusaha
garuk-garuk kepala, tree shaking
bagaimana caranya supaya
ngepisah-pisah file
yang mana dipake, jaman itu
belum ada lazy loading
yang kayak, apa
bukan, lazy loading yang fetch itu loh
yang conditional loading itu kan ada
si lazy loading di syria kan
dynamic loading
itu belum ada jaman itu, 2017
2018
ya, sekitar itu
2017, salah
2017, gue disana
kapan ya
dia lupa
covid 2020
iya
berarti 2019
awal-awal
setengah mati tuh
bikinin
ngamisah-misahin file
yang mana, jadi, gue masih inget tuh
tau ga sih JS bundle
yang mapping itu
liat berapa size-size
tiap komponen apa tuh namanya ya
dari webpack tuh, modulnya webpack
itu berusaha dikecil-kecilin itu
berusaha dikecil-kecilin
gitu
sekarang sudah
makin canggih
ini kalo di react
di next.js sendiri, berarti
udah ada 4 opsi ini ya
client-client rendering
client-client rendering
pages-router kan
kalo pake app-router
nah itu
ini cuma ada 2 ya
client-component atau server-component ya
jadi lebih sederhana ya
sebenarnya ya
secara konsep ya
eh atasnya lagi
kalo dipikir-pikir
static dan dynamic
masih, tapi jadi ga
sesignifikan itu, ga sepenting
itu milik static dan dynamic
karena kayak udah
separation of concern-nya
mana yang jalan di server, mana yang jalan di client
kayak itu udah menghandle
banyak concern-nya
static dan dynamic
kalo dipikir-pikir lebih lanjut
lebih mirip jadi kayak php
dan javascript ga sih
iya, php itu server-nya
client-side nya javascript
jadi kalo Laravel
sampe sekarang kan gitu
logic controller blablabla itu
pake php, ya ada Laravel
kontrolernya sendiri, tapi di depan
saya pake inertia, bisa pake riot, bisa pake scroll
anggap aja
php header
header template
header.php, mas Riza
terus server-nya itu input
aja, tetapi saya
create javascript client
yang membuat itu
untuk handle, pada saat form
submit
handle interactivity, handle interaction
handle interactivity, ya
terus page load
di request, saya kirimkan
header html
dari server saya rendering
terus saya hydrate si
search bar-nya
pake JS
which is hasilnya bagi browser
sama aja, mau pake
php JS, ataupun react
server component
architecture
sebenernya bagi browser
sama aja sebenernya, betul ga sih?
kayaknya iya, mungkin juga
iya kan?
nah terus sisa html-nya
misalnya, itu di header
ada isinya search bar
dan lain-lain, tapi kontennya misalnya judul
dan body text-nya
kan di fetch dari database
itu kan cphp yang fetch
pas dikirim
tiba-tiba udah jadi html aja kan
udah jadi hs1, judul post
terus para dafty text
udah isi body-nya
juga jadi html biasa
oh, tapi ini-nya
enaknya, kalau karena
kita sudah
dimanjakan sama
next.js, akhirnya
nge-build ini semua, ga perlu
beda bahasa, semuanya javanese
semua satu ekstrasi
semua akan bahasa
yang sama, ya
maintenance-nya lebih gampang sebenernya
ga perlu belajar dua bahasa
ya, dan bisa
mesti satu developer, mesti cari
developer yang menguasai react
ya udah, bisa nulis buat server side
bisa on client side
sekarang
terbuka tujuannya
tau, jadi
konsepnya
advantage of rendering data
server side, bla-bla-bla-bla
server
ya, jelas server bisa
nge-pick database
lebih cepat
initial page load is faster
kalau yang di jual
si remix kan itu kan
spinagedon
jadi menghindari spinagedon
karena datanya mungkin
datanya udah di-pick duluan
jadi
tidak ada
loading spinner lagi kebanyakan gitu
ya, mungkin ada di bagian tertentu, tapi ga
sebanyak itu
remix itu salah satu yang paling lambat
mengadop si RSC, kenapa?
karena sebelumnya kan mereka dari recrouter ya
kelihatannya mereka udah
bikin system yang
bukan server side pun
mereka yang handling dari recrouter kan
kayak terlalu
bikin system yang kompleks banget
pas harusnya sesuai dengan server components, pusing dia
kan si siapa itu namanya? Michael Jackson
pernah nge-tweet apalah, lupa
pokoknya dia frustrasi lah sama server
components
ya, jadi
akhirnya mengadopsi juga cuma lambat
masing-masing meta framework ini
sudah mengadopsi dengan gaya caranya
sendiri-sendiri, tapi ide dasarnya
sama, sehingga diadopsi oleh react
gitu kan
iya, sama
kalau next.js dari awal, udah all in
ke server, react server components
yang sesuai di react ini, jadi
lebih, ya kayak lebih duluan lah
oke, oke, oke
disadvantagenya
rendering content on server
lead to higher server load
ya udah pasti ya, server-nya harus
bagus lah ya, harus bisa
menghandle load
ya ini kan pindahin aja yang tadinya
tadinya beban di browser user
dengan apa, dengan konsekuensi
bundle size besar, sekarang dipindahin
kan kita nggak bisa mengurangi
jumlah apa task yang dieksekusi
cuma perkara eksekusinya dimana
kalau kita menutusinya
di server kita ya
harus menanggung konsekuensinya
betul
browser, apa
browser functionality jadi terbatas
karena di server nggak ada kan
kita nggak bisa cek user location
device
dan lain-lain, jadi itu harus
tetap di sisi klien
loading time for navigation may be
slow, if data
isn't reused and each navigation result
completely new page
jadi setiap kali ada navigasi
ke halaman yang baru
kemungkinan ada sedikit delay
sama ya
kita pindah halaman atau kayak nge-refresh
additional benefitnya apa nih
server company
are already pre-rendered
conditionally
render server company kan pre-rendered
instantly even when they
depend on network data
there is no need to wait for a network
response and handle
the loading stage, even in
the case where the component
is conditionally
rendered in response
to a user action
tapi itu semua dalam bentuk HTML
bentar gimana, maksudnya detailnya
gimana nggak tau sih ya
your preoccupation, jangan
kelatkan kalau baca itu tadi yang
Gnaphatas pasti kita kan udah
khatir aja, jadi berat juga dong
nah cuma dia bilang
nggak perlu khatir
HTML code
does not have a great impact
on loading times
bisa di-case ya
ya, ini juga penting nih
jadi kalau page-nya
masih sama, nggak ada update ya
udah, istilahnya
pakai yang case kan jadi jauh lebih cepat
kan, karena data tidak
berubah, kemudian
di-parsingnya jauh lebih cepat
ya, bisa
bahkan bisa kalau
nggak pakai javascript
di sisi klien, jadi bundle-nya bisa kosong
zero bundle size, nah itu tadi yang
yang gue bilang klien, sebenarnya klien
JS-nya bahkan opsional ya
tergantung, tergantung di halaman
kita ya, kalau cuma pure static
kirim HTML ya, pure HTML
betul, karena
ini kita ngomongin javascript di sisi klien ya
kalau misalkan di sisi support-nya pakai javascript juga
ya dihitung lah ya, kalau ini kan
ya kan itu udah
di-execute, udah jadi HTML
pas di-parsing ke user
ke browser, itu udah berupa HTML
yes, jadi
nggak peduli bahasa aja, ujung-ujungnya adalah
HTML yang
sudah siap dikonsumsi oleh
browser gitu ya
berarti bisa juga ini ya, apa namanya
kayak ya
bundle yang dikirimkan itu
tergantung page
selalu
semuanya sama, jadi
hanya saat dibutuhkan saja
kirim misalnya
halaman home
nggak ada klien site-nya
iya, yang di halaman home
ada sat, ada
let's say, ada satu klien site-nya
misalnya, tapi di halaman
article atau di halaman yang didalam
nggak ada
komponen
yang kita butuhkan itu di article
jadi sebenarnya di article nggak di-load
atau sama sekali nggak di-download JS
yang kita pakai itu
iya
makanya
aku kan
nyari-nyari, bisa nggak sih kalau kita iseng nih
pengen kita
langsung menggunakan react server komponen
tanpa meta framework nih
jawabannya bisa
tapi ribet, karena itu ngaruh ke
logic routing juga kan
makanya apa, kayak next.js kan
ngadopsinya cuma di app router
karena pages router
itu fitur yang udah lama ada
ya biasalah, kalau
ngadopsi hal baru ke fitur yang udah lama ada
terlalu banyak moving parts
kan sulit ya
jadi emang si server komponen
untuk sekarang diterapinnya di
app router, sampai si next.js-nya
bikin baru gitu
bikin itu
fitur baru
yang bisa di integrasiin
dengan mudah dari awal dengan si
RSC ini
jadi migrasi masih menjadi
isu karena
gaya-nya berbeda gitu ya
dan salah satu
benefit menggunakan app router adalah
kita udah bisa pakai server komponen
dibandingkan yang page router ya
kalau untuk next.js nih
khusus untuk next.js
nah itu
di balik semua keuntungan tadi
kerugianya, impinya adalah ribet
kuda belajar, makanya apa
harus memahami semua
semua yang kita bahas tadi, itu kan kayak gak bisa
langsung ngerti kan, kita minimal harus berhenti
bentar terus, oh gitu
kayak hal-hal kecil lah
apa, separation antara server
sama client, misalnya itu
dengan use client, itu kan
ya belum tentu semua developer
mau dan langsung bisa
melukasi kayak gitu, kurangan intinya
ya
oke, menarik-menarik
jadi itu dia
overview dari
server komponen itu sendiri, walaupun
di sini dibahas banyak kan next.js ya
tapi ya kurang lebih gitu ya
ya ini kan dalam konteks pengguna next.js ya, itu kenapa
karena kalau menahan
RSC
gak bisa ya, bisa dibilang gak bisa ya
agak terlalu abstrak
jadi apa kita butuh satu
abstraksi lagi, cuma kalau dibahas
dengan konteks next.js
ini kan lebih bisa dibayangin ya
iya, karena
di RFC-nya juga
di sini, tadi sempat baca sekilas
RFC itu adalah request for comment ya
request for comment ya
nah ini
ada yang nanya nih
apakah akan
tightly couple dengan
Ages, atau
bisa pakai berbagai runtime
seperti
jaman dulu masih
Cakrakor ya, seperti
Deno atau Bone ya sekarang ya
karena kita ngomong server pasti gak lepas
dari runtime kan
betul, jadi apakah
si React ini
kalau React implementasi server
komponen, bener-bener kita bisa jalanin
jalanin apa ya
jalanin
React server komponennya sendiri tanpa
framework lain artinya dia udah berubah
jadi web framework kan
itu udah bukan lagi
library, katanya kan React masih
library kan, jadi ini juga
jadi perdebatan sih
sampai akhirnya ya udah
React akhirnya bikin server komponen
tapi backendnya
terserah, terserah
apa ya, developer
framework lain yang mau
mengadopsi, developer framework
atau tepatnya meta framework ya itu
meta framework, maksudnya yang
yang mikir gimana
mengintegrasikannya
itu ya itu developernya
nexia as remix
ini server
komponen tanpa server gimana sih
maksudnya
tanpa server komponen itu
biasa melakukan data static pada klien
dengan efek
ini klien side kan
kita ambil API
terus disana size
nah ini APInya
contohnya ya
terus
this pattern means user
need to download then parse additional
75k
and wait
for second
request to fetch the data
after the page loads
just to render static content
that will not change
over time of the page
jadi harus 2x jalan
dari klien side
kita harus nge-fetch
manggil ke API kita kan
kita bikin API endpoint
API endpoint kita
karena dewasus ini pakai JavaScript ya
harus nge-fetch lagi dan
apa ya, ngebalikin
nah dengan server komponen
you can render this component once at
build time, jadi bedanya adalah
ini ya
ini page-nya
terus return
div-nya
itukan sebelum
load after first page render
nah kalau yang pakai
server komponen
dia bisa langsung read file-nya
markdown-nya, gak perlu pakai API
sekali jadinya dikirim udah berupa HTML
sesimpel itu sih, jadi sanitize
kan di atas ada tuh import sanitize
HTML, nah itu semua
urusannya server, udah yang dikirim
ke browser
klien, itu zero
script gak usah import-importan
betul, gak perlu pakai API
lagi kan, karena markdown-nya
bisa dibaca langsung
itu tadi klien side
iya ini kan
klien side gak bisa baca markdown kan
jadinya dia
dia asumsikan
kita punya API ini untuk baca file
markdown
jadi dengan ini kita bisa gabungin
tuh yang API.js-nya
gak perlu, kita masukin kesini aja
terus abis itu sanitize
nah ini udah bisa ditampilkan di browser
nah ini ada
masukan yang menarik dari Mas Irfan
baca RSC
di Parcel
menarik
Parcel Bundler ya
Parcel.js apa-apa namanya
Parcel.js.org
Parcel.js
RSC, ada gak RSC
ada ada, oh ini
recipes
React Server Component
are new type of component
that render ahead of time on server
or that build time
Parcel 2.14
sudah support
contohnya
oh ini install ya, install dulu
standarlah ya, React
Dom sama Parcel
tapi Parcelnya RSC
React Server Component
can be integrated into existing
client render SBA, for example
written JSON from an API
sama kayak tadi ya
for a new feature you can render server component
this can help reduce client bundle size
by sending only the component needed
to render the requested data
and omitting heavy non-interactive
component
for example markdown renderer
from the client bundle
entirely
set up target
react client, react server
terus ada
start dan build
create a server, ini pakai express
ya contohnya
standard
render RSC
dari Parcel
dengan node
command
render RSC
command component itu ada
di ini
iya
oke
yang di kirim, react server
pakai stream ya
ya
jadi bisa parcial ya
ngirimnya ya
sedikit demi sedikit ya
yes
dia mengirim react tree ya
yang di kirim adalah tree nya
yang bisa di render jadi HTML
yes
lower level react API
server entries, now we need to implement
command component rendered above
this is react server component
it's only run on the server
not in browser and has full
access to server resource like file system
or database
use server entry is
parcel specific ya
iya, kalau yang use client
use server kan
use client use server itu next.js
itu specific juga next.js ya
ya cara next.js
membetasi
mana-mana
hmm
hmm
oh ini yang sempet
rame ya di
next.js jadi kayak php ya
ada use client use server
terus ya
bisa apa namanya
bisa query langsung di component
nulis sql
nulis sql langsung di component
karena dia udah
di server kan
jadi bisa ngapain aja sebenernya
ya kita harus memperhatikan
separation of concern juga
jangan mentang-mentang bisa terus kita
lotanya semua disini
berbahaya
ya lebih ke concern mana yang cocok
untuk server, kayak misalnya query database
itu ya emang kerjaannya server kan
cuma jadi kita harus
mindsetnya kita misalnya apa yang perlu
di client ya kayak
client set interactivity kan
mencet button terus apalah
ada yang kebuka atau ada
buka atau buka
kok jadi kayak meteor ya
meteor itu ada client.js
ada server.js
oh iya betul
baru inget gua
meteor
coba ya
jadi sebetulnya
itu kan bisa
iya
ada ga ya keliatan ga ya
yang dia bisa
client server di satu file
ya
kita sambil liat lagi
ok
face rrc
rsc from the client
to load server component on
the client
bisa ngirim rscnya langsung
sebagai payload
oh
suspence ini dari client
kemudian
loading component
terus di function comment nya
itu fetch
fetch nya ini dalam format
apa ya? api?
itu tadi
react 3 kini ya
yang dikitkan tadi dari server
oh json3 ok ok
jadi stream
ada comment nya masih panto itu punya
react oh use client
oh yang ini punya react
yang use server entry ini punya react
engga itu punya
parcel specific
coba
use client
iya suspence sama
use client
use client punya oh
use client punya react
tapi use server entry punya parcel
nah ini kesimpulannya
iya ga standar ya jadinya ya
bukan
parcel nya
parcel nya
bikin use server entry ya
buat kebutuhan dia sendiri
kayak edukasi developer nya itu
yang malas karena
ribet
masing-masing pakai ini sendiri ya
kenapa dia ga pakai use server
use server gitu
takut bentrok kali
sama react nya
nah kan use client itu punya react
use server entry punya parcel
ok next
lanjut ya ini udah
terus client component use client oh yang ini ya
use client itu standarnya ya
terus standar react use client
directive
ok ini berarti
server/lightbutton.js
tapi ini akan dieksekusi
di client ya berarti ya
dan kodenya juga kode javascriptnya
mau ga mau ini pakai javascript
yang jalan di browser
user kan di client saya
nah itu semua kode yang
udah di proses javascriptnya
ya harus di load di browser
agak rancu
gara-gara folder server sih tapi ya ok lah
engga dia tetep ada lightbutton
tapi karena pakai ini kayak bukan
rancu tapi sengaja
membuatnya ada kontras
di sini meskipun dia
di server tetapi kalau kita
pakai use client
sebenernya dia dijalankan di dalam
component nya yang ada di server
yaitu comment tadi
karena lightbutton itu part of comment
oh iya HTML button nya tetep ada ya
tetep dikirim kan tetep di proses ya server
tapi yang kayak use state nya
ya di skip aja di server
dikirim ke
ga di render
di server
ga di render
iya
di render button nya
iya
ok ok
terus ini bagian
yang server nya
jadi waktu kita pakai lightbutton
di sini
semuanya tetep dikirimkan
dari sisi server
HTML HTML nya tetapi lightbutton itu
hanya dikirim
sebagai
gua ga tau
sebagai apa mungkin hanya si
apa namanya
si button on click nya itu aja
tetapi tidak ada interactivity nya
di server nanti di hydrate
di local
bisa dijalankan ga sih ada ga sih
ini play button nya biar
terlihat
mau di itu
demo
pengen tau asilnya
ada ripple nya tuh
di atas kanan
atas top header
header ripple
iya coba
ya tapi
kopal sendiri itu kan
iya
harus bikin sendiri
coba oh ini ya install dulu
ga usah sih ya udah di install
atas atas
rsc examples ripple
complete examples
nah apa poster disitu
sample nya mana
client server static
ga maunya jalanin nya aja
yang ini
target
package json
client yaudah kita jalanin
aja
asik nih
asik
demo
ya aja lo demo
rsc parcel
eh ga kelihatan ya
belum
ini kelihatan kan
iya
terus
ini tadi
install
belum masuk ini
belum masuk rsc parcel
apa?
belum masuk rsc parcel
ya salah deh
nantilah bersihnya
oke
dan temen temen nya
ini bisa di copy kan
copy aja ya
copy
pakai apa kita?
ah ga sebuah
package json
eh jcn
salah
json
json
json
json
pake firebase ide
belum sih
firebase studio
project ide x
create server
ini lengkap kan ya
eh berarti kita harus install express dulu dong
ha?
install express kan?
install
ada ya?
ga tau
gaada tadi gaada
gaada
berarti belum lengkap
ya sudah
ya sudah
berarti ini server.js
tadi kayaknya server
server/server.js deh
eh bener ga sih?
bener
udah
get comment
content type x component
oh content type nya x component ya
ini nya apa?
header nya
ya header nya
terus
server entries
ini server comments.js
server/comments.js
j nya besar ya
now ya
comments.js
itu
ya
di geser kesini
terus
load
src
app.js
oh kok jadi src?
ya ok lah gapapa
803.000 nya
jalanin dulu
ini ya jalanin dulu berarti ya?
ya nanti
ya nanti lah ntar dulu
src
slash
app.js
gini ya?
ya
sudah
terus
ee
ini apa? comments.js tadi udah kan?
oh ini kalau contoh buat
oh iya
buat contoh itu
load data ya
comments.js tadi udah kan?
sudah
comments.js
ini kan gak ada db nya
ya kita bikin aja ini apa namanya
return stringify json
palsu aja udah
ya nanti lah
ntar dulu
terus yang di app.js
ini udah?
sudah
sekarang like button
.js
yang comment juga udah ya?
sudah
sudah
comment ini
nanti dia akan mengirimkan
yang comment.js ini ya berarti ya?
yang dari server
dari server
nah sekarang
di server like button.js
ada use client
sama
berbagai component
baru temui
di dokumentasinya
yang komen parcel itu ternyata
ada quick start nya
terus?
sudah
terlanjur ya?
ya
ya kalau scroll terus ke bawah
nanti kalau udah nyerah
bakal ada
tinggal tambahin importnya
di copy aja nih semua mas
eh ini ya
gak bisa gak bisa nanti ilang
ada yang ilang db itu di ilangin
ya itu aja
yang server
eh apa tadi comment nih?
comments ya
import
dimana sih sini?
terus sama like button ya?
ya
like button
gitu? sudah?
sudah
terus?
jalanin dulu ya?
jalanin dulu ya?
co-coating ya?
npm start
gak bisa
parcelnya belum install?
udah kan?
kan udah di install semua harusnya
iya udah di install dulu tadi
npm
udah ya?
itu start nya
oh iya dependency nya gak ada
npm
install tadi ini ya?
ulang lagi
nah
udah
lupakan npm ini
gak bisa
parcel not found
ha?
parcelnya juga ada deh kayaknya
parcel
gini?
nggak tau
bentar-bentar nyari
contohnya
ya
npx aja gak bisa ya?
npx parcel
ganti ya
npm tuh pake run
kalau start gak perlu
oh
npx gak ada
tapi ada npm create itu loh
ini loh npm
npm create parcel
loh ini kan udah di dalam parcel?
iya
di project yang itu
oh ya
udah cancel-cancel
npm install parcel
berarti ya?
iya
oke
udah ada?
parcel
npm start
npm start
nah
error
oh gak ada source index
source index
gak ada
index html
cari contekan yang
ada dulu ya
html 5 bisa gak nih?
oh gak bisa
body
rst
kalau udah
dia gak ini ya? gak otomatis ya?
oh error lagi
course, kok ada course nya?
oh buat ngirim ya
npm install course
bener kan?
iya bener
error lagi
apa ini?
ini namanya
bug driven development
error driven development
ini apa?
pake cursor
quick start
ada env kali?
ada env debug
kenapa error nya?
emang cursor udah ngerti dia
rst
kalau udah contohnya
quick start nya mana quick start? coba quick start
itu tadi
npm create parcel
bikin folder baru aja
oke
ini ya
npm create ini ya?
oh bikin lagi dari awal
baiklah
eh langsung init
dia langsung kirim ini nih
npm start
error juga
oh yang tadi belum di stop
masa?
yang tadi udah jalan sebenernya mas
cuma ada error aja tapi jalan
tapi kan masih jalan
udah
udah jalan nih
terus ngapain?
bikin npm start
create a server
oh sama
di create kan
kita liat ini ya
kita liat
package yang tadi
package yang tadi
package yang tadi di
localhost 3000
sama
kita liat ya
tapi gaada server
adanya page
counter, oh beda ya
beda ini ya, beda contoh ya
localhost 3000
parser react server app
this page is react server
component
edit src page.jx
to get started
client component
nah coba buka javascript
matiin javascript deh
matiin javascript
command shift v aja
itu loh
gue ga asal dong
mortals
command shift v aja
command shift v
disable javascript
susah susah
amat
tuh bisa
tapi ini gabisa kan? nah ini gabisa jalan
karena javascriptnya tidak nyala
tapi kan dikirimnya
terbukti dikirimnya html kan
sebut button button nya muncul
cuma gabisa diklik aja
coba
ini bisa, ga ngaruh ya
iya, coba kita enable lagi
enable javascript
langsung bisa? belum
harus refresh ya
loh gabisa di refresh
kok gabisa refresh?
nah udah
kok gabisa?
kaya loh
eh salah
apa sih?
janyan belum di enable
javascriptnya
udah
oh iya udah
udah kan?
kok jadi gabisa?
ga tau
gabisa diklik
matikan devtools
tutup devtools
maksudnya di enter ulang
oh bisa
ini kodanya kaya gimana?
jadi
page.tsx
ini ya
ini standard import client
ini server ya
ga kelihatan ya
bentar bentar
banner nya kita hilangkan dulu ya
nah
ini server entry
berarti ini server
component ya, ini server component
HTML standard
form nya juga standard
action nya ini adalah
action nya apa tuj?
dari sini
action.tsx
fungsi
form, submit form ya
tapi ini di execution
di sisi server ya
berarti itu userfer
yang tadi dibilang sama
mas Irvan Molana itu
userfer dan client adalah
direktifnya react
tapi kalau userfer entry
baru punya parcel
bayangin deh
kalau kita ngelitin
kita mau soalan adopsi
react server component kita harus
mastiin semua anggota tim kita
paham ini semua
mas Irvan ini ada
ini juga kalau mas Irvan tenang aja
saya udah pake banyak
sama kita
tenang tenang
direktif userfer ini ada
penemuan kocak lagi nih
buka link yang di private chat
jadi
userfer itu
client kan jelas saya tadi menandakan
client component itu punya react
userfer juga
punya react, tapi
itu bukan direktif untuk server
component, jadi react server
component adalah server side by default
nah tapi userfer itu
menandakan server function
ada yang namanya server function
ini userfer ini
berarti ini valid javascript ya
punya nya react
oh punya nya react
valid javascript ini valid javascript
karena itu kan cuma komen mas
bukan komen ini, string
sorry string doang
string doang DJSM
harus gini kan
harus gini kan
itu statement
statement bukan declaration
ya ini cuma kayak
string udah gitu doang
mas Jelisah bisa bikin
string ngobrolin wait
terus di enter juga gak apa-apa
rusak
coba ya
error gak
iya gak error
ga error ya
tulis aja string
lho inspect element nya rusak
gak bisa di clean
error berarti
coba ya
iya gak bisa
kutup aja kutup
tutup ya
tutup, nyalain lagi ya
ya di itu
lain aja di tab line
nah buka console
ketik
use anything
ya cuma dibalikin aja
oke oke oke
ketik ngobrolin wait juga boleh
oke
ini server
terus action nya juga server
apa lagi
input nya
name
yang counter pengen liat
counter kan dia client side
use client
nah yang mau saya liat itu
coba liat di ini dong
di stream nya mas Riza
di devtool di stream
apa dia
gini dia kirimnya stream bukan
kayak tadi stream bukan
kalau server txx
oh beda cara kirimnya ya
sama yang tadi ya
render request
ini render request dari mana
dari parcel
oke, mau liat apa
yang mana tadi ini
yang disebelah kiri itu apa
yang ada tree gitu sebelah
sebelah kirinya yang sini
caranya nampilnya gimana ya
tree apa sih
yang ada daftar
daftar
file
disini itu biasanya
source ya
bukan, ya ini
kayak gini tapi disini, di network
nggak ada ya
refresh dulu
oh ini maksudnya
file-file nya
biasanya di sebelah kiri
nah
sekarang coba hapus
coba hapus ini mas Riza
itu kan ada space.js
suatu komo suatu
itu
gede banget
bukan ada hot reloading kali
terus ini
di hapus
coba masuk ke
yang tadi page.txx
hapus yang button componentnya
hapus, ya di comment aja
counter, ya hapus
sama button
componentnya di hapus
aja dulu
safe
refresh
refresh coba
gini
refresh
hilang
ada
jadi 0
berkurang
0,1 mega
nah cuma ini kan
daftar paranya
sebesar itu
dan ada jsnya karena
dia hot reload kan
iya karena ada hot reload segala macem
jadinya gede, kalau di ini
npm
build
udah dikasih build commandnya belum ya
sudah harusnya ya
npm run build
nah kalau
npm build, npm run
build, atau dev, atau yang lain ya
kalau start sama
test itu nggak perlu pakai run
page nya 194
tetap gede ya
apa masih ada
kan janjinya
kalau nggak ada server client side
nggak usah di kirim gitu kan
janjinya begitu
use client nya coba di comment out deh
di page.txx
page.txx atas
nah import client
coba di hilangin
build lagi berubah ya
belum di save
udah
kecil sih
jadinya
berubah nggak sih?
berubah, berubah
jauh jauh
tetap gede
tetap gede
kita liat server
tetap gede ya
ini ada faktor apa ya
jadi begini doang ya
sebagai anak
coreware vital
berarti belum sesuai ekspektasi ya
belum tau pakainya kali ya
belum tau caranya ya
ya tapi berarti
belum segampang, belum semudah
itu untuk diadopsi, terus
yang kayak dengan ngejalanin
dengan template starter
terus yang kecil banget
nggak se magic gitu ya
iya
kalau template itu ya berarti
no javascript kan janjinya itu tadi
iya
cuma ternyata kompleks
dan banyak kayaknya
setelah dilihat dari dokumentasinya react
ada beberapa mesej selain
perkara tadi use client, use server
ya kayak concept server function
juga masih harus di pelajarin
tuh
itu tadi
use server itu
ini soal semantik sih
jadi kayak use server itu bukan menandakan
server component
tapi menandakan server function
nah mampus
server function itu apa
dia bisa mengesuasi
fungsi di sisi server gitu ya
bisa di
berjalan di sisi server
bisa dipanggil dari client
itu
itu
itu
itu
itu
itu
itu
itu
itu
oh
ok
ok
ok
ok
yang ini bukan react photo
computer seingat gue sih
bener gak
coba liat
videonya
jangan iklan dulu
nah ini
ini kan
yang dia buat
ini bukan
bukan ya
kayaknya iya
yang
yang demo nya itu kayak
windows
3.11 bukan ya
bukan ya
bukan ini
ada yang lebih simple yang dia kayak
lebih
lebih
lebih sederhana lagi
karena dia bikin step 1
step 2
hmm
tapi sudah mulai dapet
pencerahan dari topik malam ini
kebayang
ya ini penting itu ya
jamanan besar nya kebayang
tapi kalian suruh ngerjain
kayak belum ada
headspace yang cukup
serahkan kepada
framework
mas Irfan ini bagus deh
tapi di muncul-munculin komennya aja
karena kita belum pakai
kita belum munculin komen yang kita pakai
dari agak atas sedikit aja tuh
selama masih ada use client
ini ya
use client new server direktif yang datang langsung dari react
bukan punya next.js doang
selama masih ada
client, use client
gak akan kerasa overall performance
improvement dari RSC
karena pas ada use client
kita perequest di AS
ketolong case aja kalau di next.js
hmm oke
tapi setidaknya gak semua
ya gak semua
tapi ada satu aja button yang butuh
client side interactivity like button
atau apapun ya kita butuh react ya
berarti apa konsekuensinya
oh oke
oke kalau dibandingkan
dengan itu si apa
astro punya
island
architecture
mendingan mana
bundle size naik
tapi perceive performance
berasa lebih kencang
oh bundle size nya mungkin lebih gede gitu ya
tapi pada saat dijalankan
malah jadi berasanya lebih cepat ya
dari page router
udah terbiasa server side
dulu kita ngoding server side di block yang terpisah
nah perbedaannya jelas
antar code client server
kalau sekarang jadi digabung gitu ya
jadi ke gabung gitu
dibisah juga cuma pake
caranya ngikutin cara-caranya
server component react server component
kita ngoding server side langsung
di dalam render function
di dalam component
ini berpotensi kayak dulu pas pertama kali
oh iya bener
bener bener
kalau kita gak aware banget sama use server
dan use client gitu
jadi bisa ketukar-tukar ya karena sama
antara code
di server sama code di client kan sama
kalau dulu misalkan sama-sama javascript lah
yang satu kita pake
express yang satu pake react
walaupun sama-sama javascript
tapi kan beda ya yang satu kita
bikin component yang di express kan
bukan komponen react kan
iya ini dua-duanya react
nah terus kok kebayangnya nih
skenario apa maksudnya oke lah
pas tim react bikin react server
component niatanya
mulia gitu maksudnya objektifnya
bagus di lapangan karena pusing
tiba-tiba daripada breaking nanti
baunya semua use client
use client semua
sama juga bo'ok
iya semuanya use client ya
oh ketemu nih ketemu
Ivan
dan ketemu nih videonya nih
ini bukan
iya ini dia
react from another dimension
bener kan
yes betul
hebat aja nih
ini masih bisa
ini ya
pasti yang dia nyari pesan saya
di whatsapp group ya
engga
yang di youtube kali ini
tuh kan windows kan bener kan
ingetnya windows ini
tapi betul yang itu
dia beneran jalanin
di ea gitu maksudnya
sombongnya dia
kurang tau ya kayaknya iya
iya
dia pake vm gitu engga
iyalah
iya kan
iya
jadi react bisa jalan
di ea gitu maksudnya
oh karena
tapi server component
iya remixnya
server component
iya pake mark wii lagi
kan bukan sistema sama windows
jadi mendingan astro aja sekalian ya
yang island architecture ya
nah tapi kalo ngomong astro
ada artikel yang menarik
jadi sebenernya bahas server component ini
terinspirasi oleh
artikelnya mas jen abramov juga
jadi beliau
karena dia bikin artikel yang judulnya
rsc for astro
developers, nah gara-gara baca
artikel ini nih jadi
dapetin dia pengen melek
rsc, tapi ini
sebetulnya
ga ada hubungannya sih maksudnya apa
ini
bikin analogi untuk membantu developer
yang sudah menggunakan astro
yang udah pake astro
udah punya mental modelnya pake astro
component, nah itu dipake buat
dimanfaatin si mas
dan ini untuk nyalasin rsc
itu apa ya baca
sendiri aja menarik kalo
yang buat yang cuma ini berguna
cuma buat yang udah
pake astro sih, udah pernah menggunakan
astro ya, ini sama ya
contohnya lag button juga ya
jadi pertama dia tunjukin
persamaannya antara
astro components dengan
react server dan client components
terus dia ga outline beberapa
perbedaannya juga ya intinya gitu
ini astro
ini react ya
perbedaan mendasarnya apa?
perbedaan mendasarnya
paling signifikan
ya dua-duanya pake react kalo rsc
dan apa
react server components dan
client components, nah
scroll ke bawah lagi aja dia
jelasin
ya ini dia ngasih contoh ya itu yang di atas
tadi kalo di astro
itu yang server side adalah
astro component dan astro
terus dalemnya
maksudnya di dalem
astro component itu kita bisa
input front end
atau client component
pake react, pake scroll, pake view
dan lain-lain, kalo ini
server dan client
nah ke bawah lagi
kalo mau liat
perbedaannya
nah mental module
dia bilang
si mas Dania bilang mental module nya itu
ya cukup sama lah
kalo udah ngerti astro
sudah punya 80% mental module nya
tapi dia sambil ngiklanin
apa? ngiklanin astro gitu
even if you think
react server components are a terrible idea
astro is worth learning
nah terus apa?
perbedaan dalam hal
syntax nya itu
like astro component
rsc itu function javascript biasa
nah prop
ya javascript lah
prop nya datang dari
function argument
ga ada templating
language nya sendiri
terus apa? memisahkan
server side dan client side nya
juga lain
caranya si react
nah terus
bahwa lagi yang ketiga
kalo astro ada directives khususnya
client load, mesti load
langsung atau
apa itu, pake intersection observer
nah kalo misalnya
react, ga
reference syntax files
versus client island
create a sharp and obvious visual
distinction between two worlds
nah ini penting juga ini
yang tadi kita bahas kan
ya sama-sama react
react di component
di server sama di client side
jadi component astro dan tidak
bisa jadi client island
tadi
di parcel tadi contohnya
saya lihat
di server
component nya dia pakai
ts kalo di
salah kebalik ya
tsx
kayaknya ada perbedaan itu deh tadi
kayaknya yang client side
coba buka tadi
z tadi
action nya server side component
dia pakai ts
action.ts itu kan server side
ini yang tidak ada component
react, kalo yang ada server yang ada
component react pake tsx
kalo ini cuman
murni javascript atau typescript aja
javascript biasa ya
ya ga perlu x nya
sorry ga jadi, salah-salah
ini kan yang tadi kita bahas ya
ya
since doesn't have
use any client or server
it could be imported
on either side
if you import from server world it act
like an astro component
but if you import
from client world
client island
nah kalo di rsc stuff imported
from server world
akan berjalan di server
nah tuh you'll be first to cut a door
with use client
put a blessing
and a curse
cut a door ini maksudnya apa ya
iya maksudnya shortcut
and stuff
kalo ada hal-hal yang
tidak bisa jalan di salah
satu, jadi kalo misalnya
ada suatu
fungsi atau kode yang jalan
di dua-duanya ga masalah, tapi kalo misalnya
ga sengaja misalnya
yang cuma jalan di client atau jalan di server
itu kan bakal bisa
build error kan
jadi use client
use client semua
ini mental modelnya yang
agak susah nge-switch ya
antara server sama client ya
dimana nih lagi di mana nih
lagi di client apa lagi di server ya
kodingnya sama-sama aja nih mirip-mirip
kalo koding kode yang pas disitunya
langsung masih agak gampang ya
tapi kalo udah import mengimport
belom kalo third party library
itu mulai pusing itu
betul-betul
masalahnya kalo di satu file itu gapapa
tapi ini sudah di dalam-dalam file yang lain
iya
sudahlah kita pake htmx aja gimana
hahaha
ya aja bereskan
ya aslo kalo usah htmx
udah bisa ya
hahaha
pada bingung-bingung
maling ke htmx aja gimana
hahaha
pusing ya
aduh
jadi
eksplorasi kita malam ini
berhasil
apa ya berhasil sedikit
mendapat gambaran tapi kok
malah engga nunakan ya
mendapat gambaran setelah dapet gambaran
jadi oh yaudah nanti dulu aja deh
kalo saya engga oin ke
setelah dapet gambarannya
biasa kan kita jadi
excited nih jadi pengen coba
gini dapet lo
nanti dulu deh
hahaha
ini malah jadi justify ya nanti aja
yang penting paham inti-intinya aja
tapi yaudah nanti aja
saya udah paham kulitnya nih
kalo mau dalami ya tunggu
ada projectnya aja dulu
tunggal ada case nya
sebutuhannya baru
misalnya ada kesempatan
bisa pake
RSQ sekalian kita
ga terlalu seambisius itu kalo misalnya projectnya
misalnya orangnya banyak reboot
atau deadline nya mepet
ya jangan sol-sol enteng
engga mau kalo deadline mepet gue engga mau pake
hahaha
ya ini mau buat kamu santai banget aja
hmm
jadi balik lagi ya
astro for the win
tapi bakal kangen sama
ekosistem react
kalo moding astro
kita client side nya react semua aja
client side nya react juga tetep
ga bantu ya, ga bantu menghilangkan
ke kangenan
oh begitu muka astro
aduh kangen react
saya suka react
wah ini fans sejati ya
prakteknya bakal begitu kalo ada
justify dimana-mana
iya jadi
iya
kedepannya ada
ada yang ngobrolin spell
engga kita udah
ngomong-ngomong, kita udah pindah ke astro
sorry ya
astro client side nya swell
tetep aja samung-sambungin
client side komponenya swell
tapi pake astro
iya
kita udah jarang ngomongin spell
salah satunya gara-gara ya astro juga
yang menyebabkan kita jadi
berpindah
kan soalnya dulu
iya
dulu pertama kali kenal eka
ngobrol apa di
meet up nya spell malah ya
kita sama-sama ngulik spell tuh ya
sekarang malah ga pernah
ngobrolin spell tuh ya
htmx
htmx lah
iya
yang di bangkok
jazz
pake htmx
kayaknya separation of concern nya
lebih mending disitu ya
dengan otak
yang sudah terbiasa
membedakan antara
server sama client
kalau di gabung-gabung malah jadi pusing
di htmx mesti harus pake web socket
atau dia pake
resapi
pake resapi bisa
bisa
misalnya server nya ga bisa web socket
contohnya
bisa-bisa
iya justru
basic nya itu
kalau web socket justru harus pake extension malah
by default nya dia pake
resapi
tapi jenis respons nya
apa sih html ya
iya
tapi html masih potong doang
potong doang
yang dibutuhkan aja
apa nih
kalau pake nsds semacam di nsforce
makin kesini makin sulit ngoding
kecuali pegang legasi app
jadi dipaksa untuk ke app router ya
iya halus
sebenernya kita ga usah update aja
solusinya misalnya kita pake yang 12
di lock ya
nah di lock
itu tadi
kecuali kita punya waktu dan tenaga
lebih buat ngulik dengan segala
konsekuensinya
kecuali yang pegang legasi app
saya sarankan berpindah ladar
nsds
ngudah ganti yang lain aja
apa? ten stack ya
nah tuh
baru kita bahas
ten stack yang besar
ten stack menariknya
rastro ada
rastro ada
spell kit masih ada
spell kit tapi versel-versel juga
phoenix apa lagi
kalau phoenix kan udah bukan nilai script
biar phoenix apa?
sama satu lagi
yang pernah kita bahas satu lagi framework
yang cukup lengkap apa?
redwood udah pivot
jadi dua itu
sekarang udah pivot
jadi dua
yang legasi itu
redwood graphql atau semacamnya
terus yang baru di desain kursus
untuk cloudflare
itu namanya
redwood sdk
iya itu
udah potensi
fedor lock-in juga
jadinya
oh sangat, kalau itu dari awal emang bilang
desain for cloudflare workers
kalau buat kerjaan itu
nggak bisa dapet buy-in deh
pake redwood apapun sebenernya
kalau alternatifnya nsds yang establis
ya itu pake basically
yang kayak laravel
tetep kalau buat
kerjaan nsds itu kayaknya
yang relatif gampang dapet buy-in ya
orang udah familiar
atau alternatifnya ya itu
laravel tapi front-endnya ya
silahkan pilih, pake ryak bisa
swell bisa, view bisa
jadi saran saya itu ya
cobalah pake yang namanya
hype development
jadi ada sesuatu yang baru
personal project lah
oh personal project beda silahkan
kalau project yang sudah
setengah jalan cabut dari company itu
terus tambahin di link-in
oh itu bukan hype development namanya
link-in driven development
tapi banyak musim gitu berarti
tiap tinggalin suatu
tempat kerja, dimusimin semua
tim yang harus maintain kerjaannya
hati-hati di blacklist ya
hati-hati di blacklist
itu enemies
driven development
jangan, jangan lakukan itu ya
malah sebaliknya justru harus
baliknya ya
tapi kalau pake yang lama terus kapan
majunya?
kan jarang ini misalkan nih
pas di interview kan
apa achievement di kantor sebelumnya
di kantor sebelumnya saya berhasil
reflektor dari microservice
menjadi monolith
jarang kan belum ada kan? unik itu
yang ada dari monolith ke
microservice ini kita balik
pas siap pergi ternyata
emang butuhnya monolith
jadi teman sendiri harus ngerepak
orangnya cuma sedikit, kalau pakai microservice
capek-capekin aja, jadi banyak
birokrasinya, mendingan monolith
gitu
iya, tenstack
tenstack kayaknya santai banget ya
kita bahasin kemarin ya
design-nya kan keren banget
tapi kita belum bahas yang startnya ya
kita belum bahas
tapi kemarin bahas
tenstack ecosystem atau tenstack universe
ecosystem, universenya
si, siapa namanya? tenner
mas tenner, ternyata yang bikin namanya
tenner tadinya, apalagi
pantai itu karena tending di pantai
ternyata bukan
blade plus jquery, blade ini berarti
laravel ya
templatingnya laravel
laravel ya, plus jquery ya
lebih bagus dari
ya kalau mau yang modern sedikit, pakai apa?
inersia
inersia, blade tambah jquery
tambahin backbone
backbone masih di develop ya?
harusnya masih
kayak gak segampang itu ya library lama mati
jquery-nya aja
masih hidup
jquery-nya
jquery-nya
jquery-nya masih hidup
cuman kan
kalau project baru, masih ada yang
jquery
masih
jquery kan sudah mau ini kan
sudah lagi di develop
lagi kan, sudah jquery berapa sekarang?
ya, pertanyaannya
temen-temen yang pakai jquery
itu jquery-nya dipakai buat apa?
buat query selektor doang
atau yang lain
kalau query selektor dulu udah
bisa funny lah
oh masih, backbone masih
bulan lalu masih
di commit, bulan lalu
luar biasa ya
bakal lucu sih kalau akunnya jquery
bilang "kami akan menunjukkan jquery
server component"
itu baru keren tuh
stress semua
jquery server component
boleh tuh, buat ini
april mob
april mob
ya masalahnya kita gak manage
akunnya jquery
oh itu, minta tolong mas Arya aja
mas Arya kan dia ada di
itu kan, git hub
organisasinya jquery kan
ya se ide buat
apa for yang april mob
jquery server component
jsk
jsk
oke lah
voting, voting, voting
oh iya, voting
minggu depan kita bahas apa
ada ide, ada ide
coba cek dulu
ada satu svel sebelumnya
kita belum pernah bahas
kumpas to tas astor
belum ya, kita baru sebut
server, island architecture
belum benar-benar deep ya
belum benar-benar deep
teman-teman yang mau
apa, komen atau mau
ide
boleh ke kesana.in/
terus ngobrolin web, nah yang punya kesana.in
ada disini
terus tiba-tiba yang ngobrolin web
kita di alihkan ke google
di alihkan ke google
di robah isi ininya
dari targetnya
tuh, yang paling atas masih
masih Irvan juga
web security kita belum lanjut ya
yang part 2
hmm, apa nih
udah habis keling sih
kita kan mau ada
rencana bulan juni nanti
sama mas Donny
dokumentasi
dokusaurus kan
pernah bahas dokusaurus
tuls-tuls dokumentasi ya berarti ya
lebih ke tulsnya ya
oke, kita bikin dulu
pollingnya
topik minggu
depan
tools
dokumentasi
dokumentasi
terus yang kemarin tuh CLI, mau CLI
oh iya CLI
apa
CLI tools ya
CLI design
and development
sedap
design and development
apa lagi, perlu itu
svel
atau astro aja lah
astro ya
belum update lagi tentang astro
astro atau 10 stack
start
apa ya
lempar aja dua-duanya
dua-duanya
10
10 stack
start
polling
kita kasih waktu
dua menit
dua menit
lama-lama ya
tos dokumentasi
oke
itu sambil bagi kodokupon
tadi siapa tau ada yang kelewati
awal kan
benar-benar kodokupon
jangan lupa teman-teman
kalau ada yang mau beli, ya mau beli
mau beli
kalau mau coba reaksor
10 hosting
bisa gak ini
ini
distortnya berapa tadi, kayak 10% ya
10%
ya
tapi ini baru
hosting ya, hosting aja ya
kalau yang VM dan lain-lain belum
nanti kita coba
ngego-ngego lagi ya, mudah-mudahan dikasih ya
ada cloud VPS-nya juga kan ya
ada
lengkap sebenernya
nggak dapet discount ini
belum-belum
nah
Mas Irfan
lagi senang ngoding
pakai kursor
makin bodo
bisa ya
kita makin bodo ya
bukannya
kita harus ngereview
accept all, YOLO mode
ya enggak lah, kalau itu kan track coding
kalau ini kan kita tetap harus review
sebagai seorang developer
yang baik dan benar
kecuali
kalau udah kepepet
cuma
apa ya, kita kayak
lama-lama mungkin kita kehilangan skill ngetik
yang satu-persatu, mungkin
kalau konsepnya kita paham
tapi kita ngetik satu-persatu
export function
bla-bla-bla itu jauh-jauh
lama-lama lupai caranya
tapi kita tahu prinsipnya
function, argument
apa, mendefinisikan function
itu bisa ising atau
apa sih
jauh-jauh lama-lama mungkin 5 tahun ke depan kita
kayak gitu tuh
gue juga lagi pakai windsurf ini
tapi buat mainan doang, bukan buat kerja
badusan tadi soalnya kalau nonton
ini nya
karena satian adalah
iya, copilot open source
iya, copilot open source kan
dan sudah
bundle di dalam corenya
vscode
jadi ga perlu install extension
tapi
tetep harus ada
kita harus punya subscription ke service nya kan
iya, tapi ada mereka
yang freemium nya kok, ada yang freemium nya
service nya
tapi ini
kalau ada, bakal ada ini gak sih
bakal ada
apa namanya, bakal ada
isu kita ketergantungan
dengan service-service seperti ini
gak sih, misalkan ya kalau
mas Irvan mungkin bisa lah ya
subscription cursor gitu
atau teman-teman di kantornya
dapet lah, di kantornya dapet, begitu pindah
kantor gak dapet
jadi ya, ya maksudnya
kalau kita
seperti kebiasaan dibangun
interview masuk kerja
kita gak boleh pakai AI coding
ayo
ya
kalau sekarang belum kerasa sih
tapi kalau kita terus-terusan gitu
terus 5 tahun depan, gimana ya
belum banyak
belum, kita belum bahas
AI assisted coding sih
mas Irvan, kita bahas AI secara keseluruhan
ya kan
udah belum
belum kan, ini salah satu topiknya
oh ya, topiknya ya
DevFace-nya kan pernah bahas
AI
syntax
highlight, markdown
sudah pernah dibahas
apa ini maksudnya
kayak CK JS gitu ya
benar gak sih
atau prism, prism ya
prism JS gitu
prism broad
ya, prism broad
kita pakainya CK, saya juga kemarin
baru ganti itu di blok
akhirnya pakai CK
lebih banyak juga
languages yang di support malah
ternyata
kalau dulu prism itu harus ada client side
hydrate-nya biar bisa
ya pokoknya highlighting-nya itu dari client side
kalau CK dari dulu udah bisa
server render, gak tahu
tapi sekarang prism juga bisa
oke
ini kayaknya temen-temen banyak yang
tertarik astro
44%
menginginkan astro
cepet banget lagi, salah satu yang cepet banget
terakhir pakai astro 2
sekarang udah 5.7
wow
kita mau bahas astro dari
sudut pandang
mananya nih
konsep, struktur
konsep kan udah pernah ya
maksudnya tujuannya bagaimana cara kerjanya
lifecycle-nya kan
langsung demo
nyoba-nyobain ya
biar title-nya beda sama yang
ngeblowin astro dulu
nanti cari celahnya deh
episode 95
nah ini udah berapa tahun lalu
tapi ya, udah lewat berapa tahun
oh kita coba yang
terparti
first partinya
yang kayak data base
kan dia ekosistemnya lumayan ya
mirip-mirip
paravel gitu kan ya
ada, atau denu
kayak denu kan, jadi ada
komponen-komponen yang
tidak teringas secara default, tapi
disupport oleh si astronya sendiri
eh, kita pernah bahas
caching ga sih, caching
pernah ya, cache, pernah
pernah, episode 78
oh
heka hapal
nah, engga, buka aja box-nya
terus research
typography juga pernah kan ya
kile, pernah
banyak lho
kayaknya kita udah
berapa tahun
3 tahun, episode 11
ngobrolin phone
oke
kita tutup ya
jadi astro ya
dia ya astro boy, polennya kita
tutup, astro boy
astro boy
oke, kalo gitu
sekian untuk malam ini
terima kasih banyak buat semuanya
apa nih, masih run
kalo ada yang punya subscription AI
mungkin bisa explore bagaimana membantu programmer
kapan-kapan
ide topic itu
AI assisted development
lagi nunggu ada
ini, kayak
sharing account netflix, atau sharing account
sharing account kursor
sharing account windsor
pasti ya
pasti ya
terus habis dari
habis dari sini, langsung ada yang bikin
engga, habis dari ini, dari sini
gue nge-search sih, sharing account windsor
ya
mungkin kita belum bahas
secara spesifik mas
Irfan
kita bahas pengalaman
waktu yang apa
yang kemaren
ada website, yang saya bikin website-nya
itu pakai AI
dan semua saya cobain
mulai dari windsurf
terus copilot
terus yang apa
iDAR
engga, charge bt justru engga
terus cloud code
dicobain semua, di satu project itu
aslinya ya lumayan
lumayan menyenangkan
experience-nya menyenangkan
jadi ya lumayan-lumayan
ya itu tadi yang di post
masih fun, happy
tapi makin bego
happy tapi makin
bego, iya
sama aja kayak dulu, dulu itu sempet
waktu google baru-baru
populer, itu ada paper
yang menyebutkan google make us stupid
karena dulu bukan encyclopedia ya
karena orang dulu menghafal
buku pintar
inget engga, ada yang punya buku pintar engga
jaman sb
rpul
rpul, buku pintar
ya itu sama aja
jadi kayak mesin pencari itu ya
jadi mendistrupsi proses
cara kita berpikir
sama juga dengan AI
mendistrupsi cara kita berpikir, jadi
jangan sampai AI itu menggandikan proses berpikir kita
ya itu yang bikin kita makin buruk
tapi kan kita harus menanyakan pertanyaan yang betul
jadi kita pintar
cari pertanyaan
makin kita ngepromnya
makin ngepromnya
efektif, efusien
makin bagus hasilnya kan
kita jadi jago ngeprom semua
paling tidak kita bisa
jago komunikasi lah
bisa mengkomunikasikan apa yang ada di pikiran kita
kita wujudkan dalam bentuk prom
dan si AI nya bisa
mengerti dan hasilnya sesuai ekspektasi
itu yang susah
dulu kuliahnya
sustainable
waktu kerja luntang hantung
akhirnya nggak kepake
akhirnya full time, jadi programmer
terus tadinya nggak pikir
kuliah, mikir dan belajar
cara berkomunikasi
dalam bahasa manusia
nggak kepake karena sekarang
komunikasi dengan bahasa asing
sekarang full circle
AI, prompting, kepake lagi
oh oke, lumayan
full circle lah
itu ide yang bagus
nanti kita coba
diskusikan juga
kita coba
siapa tahu bisa kita bahas ya
terima kasih semuanya buat ide-idenya
dan komentar-komentarnya
kita jumpa lagi minggu depan
selamat malam, selamat istirahat, bye bye
[musik]
[musik]
Deskripsi asli dari YouTube
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://ksana.in/ngobrolinweb 🏷 Gunakan kode NGOBROLINWEBDN dan dapatkan DISKON 10% Untuk Pembelian Web Hosting DomaiNesia: Beli Web Hosting DomaiNesia disini: https://my.domainesia.com/ref.php?u=25754 🎁 DISKON 50% Cloud VPS Turbo dengan Kode Promo: NGOBROLINVPSDN Beli Web Hosting DomaiNesia disin: https://www.domai Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
3 Jul 2024
Ngobrolin Elixir
Episode ini membahas tentang Elixir, bahasa pemrograman fungsional yang berjalan di BEAM (Erlang Virtual Machine), bersa...
4 Des 2024
Persiapan DevFest Surabaya
Episode ini membahas persiapan dan agenda DevFest Surabaya 2024, acara tahunan Google Developer Group (GDG) Surabaya yan...
17 Mei 2023
Ngobrolin Google IO
Episode ini merangkum apa yang menarik dari Google I/O tahun itu, khususnya sisi web. Pembukanya sebuah pengamatan iseng...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .