Ngobrolin React Server Component

1:50Nah, ini kodinya

1:52berarti

1:54ini berlaku untuk web hosting

1:56aja ya, untuk sementara ya

1:58nanti, bisa lah negot-negot

2:00untuk beli domain ya

2:02walaupun namanya Dominesia ya

2:04tapi beli hosting

2:06Domaine dan hosting Nesia

2:08Domaine dan hosting Nesia

2:10Nah, pertanyaannya

2:12jadi Domaine Nesia ini

2:14atau di hosting Domaine Nesia bisa pakai

2:16React Server Component?

2:18Bisa

2:20Bisa ya

2:22Masa nggak bisa ke hosting

2:24React ya?

2:26Bisa

2:28Kalau ada hosting Nesia bisa

2:30kontak di customer service ya Domaine Nesia aja

2:32Oh iya kan ya

2:34Harusnya kita undang nih

2:36tim Domaine Nesia ya

2:38Di suatu saat

2:40Ya ya

2:42Beberapa hosting N ya

2:44Beberapa yang apa

2:46nanti kita coba cek ya

2:48Kita nanti minta

2:50demo account aja sama Domaine Nesia

2:52untuk ngecek bisa nggak

2:54React Server Component

2:56Karena butuh Node.js kan

2:58untuk ngerunning runtime-nya

3:00di server

3:02Nah, pertanyaannya adalah

3:04React Server Component

3:06sama

3:08server site trending itu sama apa

3:10beda?

3:12Beda

3:14Tepiknya ya

3:16berarti topik malam ini adalah

3:18React Server Component

3:20saking

3:22kita tadi udah berbual-bual sebelum mulai

3:24jadi lanjutin aja

3:26Jadi malam ini kita bahas

3:30React Server Component

3:32bisa di posting juga

3:36Ya, karena ini

3:38sebenarnya topik yang sudah cukup lama ya

3:40sudah cukup lama

3:42Udah lama banget

3:44maksudnya apa

3:46di dunia ekosistem JavaScript

3:48framework ya, itu kan kayak

3:50setiap bulan sekali ada fitur baru

3:52ada framework baru, sedangkan

3:54server component ini ternyata

3:56udah ada dari 2020-an

3:58udah hampir 5 tahun

4:00berarti kan itu kalau di dunia

4:02ekosistem JS udah ada lama banget ya

4:04Nah, cuma emang

4:06penerapannya

4:08kayak adopsinya

4:10terus kayak terintegrasi

4:12dengan framework dan

4:14meta frameworknya itu emang lambat banget

4:16relatif lambat

4:18jadi kerasa baru

4:20kerasa seolah-olah baru dan jujur

4:22gua sendiri juga belum pernah pakai di production sih

4:24Mungkin kita bahas tentang

4:30server

4:32tentang server componentnya dulu kali ya

4:34ini kebetulan tadi barusan aja

4:36nyari-nyari ternyata ada yang bahas

4:38nggak tau ini relate

4:40apa masuk nggak ya, maksudnya

4:42apa yang kita bicarakan

4:44dengan dia kan kadang-kadang mungkin istilahnya

4:46sama tapi ternyata maksudnya beda

4:48ternyata refer ke hal yang

4:50berbeda

4:52jadi kita coba pelajari sama-sama aja ya

5:00Oke, ini bahas tentang

5:02JS

5:04Kenapa? / Ini menarik sih

5:06ada hubungannya dengan yang

5:08barusan gua bilang yang tentang adopsinya

5:10agak lambat, jadi maksudnya

5:12belum terlalu top of mind juga untuk

5:14banyak developer

5:16tapi salah satu meta framework

5:18yang emang terdepan

5:20paling depan dan paling apa ya

5:22paling prominent lah, paling kelihatan

5:24paling kelihatan ngadopsi react server

5:26component ini adalah

5:28yang lain, se-next.js

5:30jadi banyak orang mungkin agak

5:32rancu mikir server components itu

5:34fiturnya next.js

5:36atau fiturnya react sih

5:38jawabannya adalah

5:40cuma yang mengintegrasi

5:42dengan cukup

5:44totalitas lah, maksudnya

5:46all-in di server components itu

5:48emang next.js, jadi maksudnya ini

5:50di artikel ini

5:52dalam konteks penggunaannya di next.js

5:54tapi apa, perlu diingat

5:56bahwa si server components itu

5:58bukan fitur next.js

6:00berarti

6:02ini ada hubungannya

6:04mungkin ada hubungannya sama

6:06masing-masing meta framework

6:08itu kan mereka kayak ada kebutuhan

6:10untuk

6:12server

6:14component kan awalnya ya

6:16dan mereka kayaknya implement

6:18masing-masing tuh si next.js

6:20mereka teranjur bikin cara mereka sendiri

6:22tiba-tiba ada server

6:24components, dan maksudnya

6:26buat ngadopsi dengan seamless itu

6:28kan nggak terlalu mudah

6:30nah, cuma selain next.js kan

6:32resource-nya cukup besar juga ya

6:34banyak developer yang ngerjain

6:36banyak maintainer, banyak

6:38yang bisa ngasih kontribusi, jadi dia

6:40salah satu yang paling terdepan

6:42ya, lanjut, Baca

6:44ya, jadi

6:46setelah

6:48mereka masing-masing implement

6:50ya samalah ya, kayak misalkan

6:52di web standard gitu ya, modelnya kayak

6:54mungkin

6:56view transition, face

6:58betul, jadi awalnya bikin sendiri

7:00terus yang web standardnya

7:02atau framework dasarnya itu

7:04sudah menyediakan, jadi yang lain ikut adopsi

7:06aja, jadi lebih gampang kan

7:08abstraksinya jadi lebih sederhana

7:10kalau fitur-fitur lain kan

7:12tinggal, apa ya, kayak library yang bisa

7:14di-replace, kalau ini kan agak rumit nih

7:16karena di satu spesies

7:18ada project dan ada apanya

7:20ada handling di server

7:22ada handling di client, belum

7:24antara server ke client

7:26yang dikirim apa, ngirimnya gimana, ya itu kan

7:28semua harus dipikir waktu

7:30kalau mau mengadopsi

7:32si teknologi server komponen sih

7:34ya, ini cerita awal

7:36dari request-response

7:38ya, HTML

7:40CSS standard, kemudian JavaScript untuk

7:42interaksi, kemudian muncul

7:44SPA ya kan, jadi

7:46standard baru, banyak orang berlomba-lomba

7:48untuk menggunakan single page

7:50application karena user experience-nya

7:52bagus, nggak perlu refresh

7:54dan lain-lain, terus setelah

7:56itu

7:58merasa, apa ya, semakin

8:00kompleks, kadang-kadang

8:02apa ya, lagging

8:04semakin berat

8:06gitu ya

8:08buka tab

8:10jadi semakin, apa, browser jadi

8:12makan memori banyak gitu ya, nggak tahu

8:14ya, penyebabnya itu juga atau nggak

8:16akhirnya muncul

8:18semacam meta framework

8:20yang mengadopsi

8:22server-side rendering, jadi

8:24kembali ke server lagi

8:26jadi ada banyak orang yang akhirnya

8:30migrasi dari SPA ke

8:32MPA, multi-page application

8:34atau server-side rendering

8:36tapi sebelum ke server-side

8:38rendering, muncul static-side

8:40generator dulu ya, si Gatsby ya

8:42kalau di Dunia React ya

8:44walaupun sebenarnya SSG ini

8:46muncul sebelum SPA sebenarnya

8:48kayak Jekil, itu yang

8:50jadi udah dulu kan, Jekil, iya

8:52jadi, gue masih inget nih

8:54SSG, tapi yang pakai

8:56yang pakai

8:58waktu itu

9:00kayak News Portal, iya

9:02iya, salah

9:04salah

9:06salah penempatan

9:08jadi harus dibulai

9:10terus ya, ada

9:1240.000 artikel

9:14masa setiap kali di deploying

9:1640.000 page

9:18iya, nggak

9:22kalau news itu udah pasti

9:24cms ya

9:26iya, udah paling pas itu

9:30pakai cms lah ya, kalau

9:32news ya

9:34kalau blog mungkin masih oke lah ya, kalau blog

9:36paling, ya update-nya

9:38berapa, seminggu sekali, sehari

9:40sekali, kalau SSG itu

9:42sebenarnya bukan hal

9:44baru ya, static side itu

9:46sudah cukup lama

9:48ininya, gaungnya

9:50bahkan di WordPress jaman dulu, ada kok

9:52yang bikin static side, bahkan salah satu

9:54project saya yang tertua sekarang, yang saya maintain

9:56juga masih pakai static

9:58side, jadi setelah di save

10:00HTML-nya disimpan di

10:02S3

10:04dari CloudFront

10:06masalahnya

10:08simpel

10:10pertanyaannya, kalau menu

10:12berubah

10:14gimana, tapi

10:16harus diribil semua

10:18harus diribil dulu, ya

10:20sampe sekarang masalahnya masih tetap sama

10:22terus ya, di text file-nya

10:24iya

10:26nggak bisa, tapi kan file-nya ada banyak

10:28ya tuh, kan

10:30HTML kan ribuan

10:32isinya banyak

10:34ya ribuan lah, nggak sampe puluhan ribu, tapi

10:36ribuan, jadi kalau nge-bill itu

10:38lumayan

10:40bisa menghabiskan biaya juga

10:42kan, buat server-nya nggak bisa

10:44eh, di lokal bisa nggak, bisa kan

10:46tapi berat sih, kan server-nya online

10:48online ya, oh iya, isinya

10:50online ya

10:52dibatching, jadinya ya

10:54server yang empot-empotan

10:56ngebatching gitu

10:58oke, ini kita bahas tentang

11:00client component dan server component, jadi kalau

11:02SBA kan, ya client component kan

11:04udah tau ya temen-temen ya, kalau bikin component ya

11:06itu client-side kan

11:08yang berjalan di browser, jadi

11:10in case temen-temen yang nggak kebiasa

11:12sama front-end, bingung client kan, bisa

11:14artinya macam-macam ya, kalau orang back-end

11:16mungkin mikir client-nya itu aplikasi yang

11:18merequest ke service atau ke API

11:20nah, dalam hal ini, client

11:22maksudnya, berjalan murni

11:24di browser. Tadi

11:26Basrija kan, apa bedanya sama server-side

11:28rendering tadi kan ya

11:30sebenarnya, sebelum kita kesana

11:32kita pernah singgung

11:34prerender

11:36ya, karena masalahnya

11:38dulu kan, Googlebot atau

11:40Crawlerbot

11:42nggak bisa

11:44ngerender JavaScript

11:46jadinya, kontennya nggak bisa

11:48di-crawling, jadi

11:50seo gitu ya

11:52akhirnya

11:54solusinya kan, pakai

11:56prerender tuh, jadi

11:58URL yang

12:00diterima pertama

12:02di proxy, terus di prerender

12:04jadi ada

12:06kalau bahasa kerennya sekarang

12:08itu

12:10edge computing

12:12edge computing

12:14jadi URL-nya di hit

12:16terus di build dulu, page-nya

12:18di cache, di

12:20edge, dan di serve

12:22jadi, tetap aja, tapi

12:24itu memang full HTML, tetapi

12:26masih client-side

12:28rendering ya, di build

12:30dan di serve, nanti setelah

12:32sampai di

12:34browser, baru di

12:36hydration, bahasa

12:38bahasa

12:40keren ya

12:42lalu server-side rendering gimana

12:44sama aja

12:46tapi tanpa ada prerender

12:48jadi dari sisi server

12:50tetap ngeranin

12:52jadi langsung ke

12:54load balancer, tetap

12:56ngeranin javascript-nya

12:58yang

13:00mengirimkan

13:02HTML, jadi sudah di

13:04full render

13:06jaman itu

13:08saya masih, itu sampai batas

13:10itu doang

13:12dulu pakainya render tron gak sih?

13:14pake render tron ya

13:16ada prerender.io

13:18ada macem-macem sih

13:20kalau prerender.io kan hosted service ya

13:22bayar, kalau render tron itu

13:24kalau gak salah, library-nya Chrome deh

13:26Google yang bikin

13:28biasa sama, fungsinya sama

13:30cuma kita nge-set up server sendiri

13:32agak repot, tidak buat ngejalanin

13:34itu, cuma udah di deprecate

13:36sekarang, karena udah

13:38not recommended lagi

13:40sebelum ada jamannya server component

13:42kan server-side rendering tuh

13:44nah server-side rendering tetap, dia aja

13:46react, dijalankan di server

13:48bedanya jamannya itu tetap

13:50jadi di codebase-nya kita

13:52itu tetap harus

13:54apa namanya

13:56membuat kondisional

13:58contohnya, objek Windows gak ada

14:00type of window, undefined

14:02gak bisa dipakai

14:04pertama kali belajar Gatsby

14:06belajar react, dulu belum paham ya

14:08karena buru-buru nih, buru-buru pengen

14:10jalanin dari template

14:12belum ngerti fundamentalnya

14:14udah, tiba-tiba, window.local

14:16storage atau apa, tiba-tiba

14:18error, karena harus jalan

14:20nah, jadinya

14:22akhirnya, ya

14:24codebase kita, codebase yang saya

14:26buat dulu itu, ya

14:28ngecek-ngecek Windows object, ngecek

14:30ngecek-ngecek yang browser

14:32specific object, sehingga

14:34eh, masih seilang

14:36ada, ada, ada

14:38server component

14:40eh, sorry, server component

14:42sering dengar

14:44tapi, saya gak pernah ngulik

14:46karena gak ada project yang relevan saat ini

14:48kesana, jadi benar-benar pengen

14:50belanja malam ini

14:52kita sama-sama belajar ya

14:54kalau temen-temen, ada yang udah pakai

14:56atau ada yang udah ngulik

14:58boleh dong, kita

15:00berbagi ceritanya ya

15:02Mas Ricky, halo sangat malam

15:04Mas Ricky

15:06jadi, kita sambil

15:08ini, sambil ngulik ya, sambil belajar ya

15:10jadi, disini, disebutkan

15:12kalau klien, ya seperti yang kita tulis ya

15:14apa yang kita tulis, misalkan div

15:16apa, gitu ya, atau

15:18button, atau form, dan lain-lain

15:20yang di

15:22client side, nah kalau yang di server side

15:24yang server component, maksudnya

15:26itu adalah komponen

15:28yang dirender

15:30menjadi HTML, di sisi server

15:32jadi

15:34react komponen yang

15:36ada di

15:38server, itu

15:40dirender dulu, baru dikirim ya, berarti

15:42bentukannya akhirnya adalah

15:44HTML ya

15:46HTML yang valid

15:48yang bisa dibaca

15:50oleh browser

15:52karena kalau kita tulis misalkan

15:54komponen button dengan huruf B besar

15:56kan, si browser nggak ngerti kan

15:58nggak ada, nggak kenal

16:00nggak ada, nggak kenal, gitu

16:02itu ya, bedanya ya

16:04ya,

16:06sebenarnya, ya sama

16:08itu tadi yang disebut sama Ivan

16:10kalau yang

16:12react component biasa ya

16:14ini yang belum dipisah server dengan

16:16client, itu ya komponen

16:18aja, jadi, apa, itu

16:20tadi, kita harus ngecek

16:22sendiri ya, contoh recehnya

16:24itu, kita harus ngecek sendiri if type

16:26of window undefined, kalau nggak

16:28di check gitu, bakal breaking

16:30pas di server, kenapa? Karena di server

16:32jelas nggak ada browser API window

16:34kan, jadi dijalaniin semua

16:36implikasinya apa, ngaruhnya apa, karena

16:38itu sebetulnya apa

16:40jadi kayak, kode komponennya

16:42jalan dua kali, kode yang persis sama

16:44di server jalan, di client jalan

16:46bundle size-nya ya, besar

16:48kan, karena semua

16:50ya, punya semua udah segelondongan itu

16:52jalan di server,

16:54kalau ada yang apa, yang kayak tadi

16:56kasusnya, browser API

16:58pakai tanpa kondisional, ya

17:00breaking di server, ya,

17:02kalau pun di check, ya udah, seluruh bundle itu

17:04nanti, dehydrate lagi

17:06ke client keseluruhan, itu yang

17:08react komponen biasa

17:10yang belum dipisahin server sama client

17:12nah, dengan adanya si

17:14react server komponen dan client

17:16komponen ini, jadi kayak ada

17:18separation of concern dipisah, emang

17:20yang cuma jalan di server

17:22aja, itu ini ini

17:24ini, dengan semua

17:26kapabilitasnya ya, dengan semua kemampuannya

17:28nanti yang dikirim ke client

17:30untuk hydrate, termasuk

17:32apa itu kayak peta

17:34apa namanya itu, yang virtual dome

17:36kan dia punya kayak blueprint

17:38untuk ngerender semua, punya logicnya

17:40cuma logic client yang dikirim

17:42jadi intinya sih, separation of concern

17:44antara server dan client

17:46sekarang sudah built in

17:48gitu intinya

17:50tapi, jadi, sebenarnya

17:52penjelasan panjangnya itu tuh, yang di artikel itu

17:54iya, baru ngerti

17:56jadi, sebenarnya build size

17:58sorry, bundle size nya

18:00untuk server sendiri

18:02anggapan gue ya, berarti ada

18:04server.js sama client.js

18:06jadinya kan, misalnya

18:08simplified version nya gitu ya

18:10server.js sama client.js

18:12jadi waktu, karena

18:14gak butuh juga kan server.js itu

18:16semua komponennya

18:18dikirimkan ke client

18:20gak guna, karena jamannya waktu server

18:22self rendering react dulu

18:24ya, semua-semuanya dikirim

18:26nanti di, di, di

18:28sampe 4 mengembangkan, 4 mengembangkan

18:307 mengembangkan, iya

18:32jadi sebenarnya, kalau ini contohnya kayak

18:34anggap aja

18:36yang

18:38header lah ya, header, ada header itu

18:40header komponen, dalam header komponen

18:42ada search bar

18:44itu yang client, jadi

18:46sebenarnya waktu di render di server

18:48header itu adalah

18:50komponen, react komponen

18:52nulisnya juga

18:54kayak react komponen, dan di bundle

18:56di dalam server.js

18:58di, waktu

19:00di render, jadilah html

19:02yang dikirim html doang sekarang

19:04ke client

19:06dan menyisakan si

19:08si search bar itu gak di render, gak

19:10di render di server

19:12di server, di search bar nya

19:14jadi dia hanya mengirimkan tagging

19:16atau bagaimanapun caranya magicnya

19:18gak tau, dia kirimkan itu

19:20sebagai tagging, tag aja

19:22nanti di hydrate sama si

19:24client.js

19:26dan bahkan client.js itu

19:28optional sih, jadi misalnya

19:30website static yang simpel banget

19:32gak ada hamburger menu, ya misalnya cuma

19:34kayak landing page atau marketing

19:36buat collect email address

19:38misalnya semua server site gak ada clientnya

19:40yang lainnya 0, literally 0

19:42dikirim html aja

19:44hmm, ya ya ya

19:46ini, jadi mengingatkan

19:48ke

19:50island architecture gak sih si

19:52astro komponen, nanti kita

19:54buka artikelnya dena bramov

19:56yang penting itu, tapi

19:58selesaikan artikel ini dulu aja, dia

20:00mengcompare dengan apa itu ssr

20:02dan ssgang

20:04ini mah yang

20:06dijelasin Ivan

20:08iya ini yang dijelasin Ivan ya

20:10jadi server komponen

20:12sebenernya gue belum baca itu, tapi meniat gambar ini

20:14gue udah kebayang

20:16langsung tau

20:18dengan kenangan

20:20masa lalu

20:22kenangan masa lalu, kenangan merender

20:24karena itu

20:26kenangan merender

20:28waktu buat render itu mau

20:30apa ya, karena

20:32projeknya udah jadi, itu

20:34ngedownload

20:36javascriptnya itu sampe 4M

20:384-5M itu, saya masih

20:40inget terus, berusaha

20:42garuk-garuk kepala, tree shaking

20:46bagaimana caranya supaya

20:48ngepisah-pisah file

20:50yang mana dipake, jaman itu

20:52belum ada lazy loading

20:54yang kayak, apa

20:56bukan, lazy loading yang fetch itu loh

21:00yang conditional loading itu kan ada

21:02si lazy loading di syria kan

21:04dynamic loading

21:06itu belum ada jaman itu, 2017

21:082018

21:10ya, sekitar itu

21:122017, salah

21:142017, gue disana

21:16kapan ya

21:18dia lupa

21:20covid 2020

21:22iya

21:24berarti 2019

21:26awal-awal

21:28setengah mati tuh

21:30bikinin

21:32ngamisah-misahin file

21:34yang mana, jadi, gue masih inget tuh

21:36tau ga sih JS bundle

21:38yang mapping itu

21:40liat berapa size-size

21:42tiap komponen apa tuh namanya ya

21:44dari webpack tuh, modulnya webpack

21:46itu berusaha dikecil-kecilin itu

21:48berusaha dikecil-kecilin

21:50gitu

21:52sekarang sudah

21:58makin canggih

22:00ini kalo di react

22:02di next.js sendiri, berarti

22:04udah ada 4 opsi ini ya

22:06client-client rendering

22:08client-client rendering

22:10pages-router kan

22:12kalo pake app-router

22:14nah itu

22:16ini cuma ada 2 ya

22:18client-component atau server-component ya

22:20jadi lebih sederhana ya

22:22sebenarnya ya

22:24secara konsep ya

22:28eh atasnya lagi

22:30kalo dipikir-pikir

22:32static dan dynamic

22:34masih, tapi jadi ga

22:36sesignifikan itu, ga sepenting

22:38itu milik static dan dynamic

22:40karena kayak udah

22:42separation of concern-nya

22:44mana yang jalan di server, mana yang jalan di client

22:46kayak itu udah menghandle

22:48banyak concern-nya

22:50static dan dynamic

22:52kalo dipikir-pikir lebih lanjut

22:54lebih mirip jadi kayak php

22:56dan javascript ga sih

22:58iya, php itu server-nya

23:00client-side nya javascript

23:02jadi kalo Laravel

23:04sampe sekarang kan gitu

23:06logic controller blablabla itu

23:08pake php, ya ada Laravel

23:10kontrolernya sendiri, tapi di depan

23:12saya pake inertia, bisa pake riot, bisa pake scroll

23:14anggap aja

23:16php header

23:18header template

23:20header.php, mas Riza

23:22terus server-nya itu input

23:24aja, tetapi saya

23:26create javascript client

23:28yang membuat itu

23:30untuk handle, pada saat form

23:32submit

23:34handle interactivity, handle interaction

23:36handle interactivity, ya

23:38terus page load

23:40di request, saya kirimkan

23:42header html

23:44dari server saya rendering

23:46terus saya hydrate si

23:48search bar-nya

23:50pake JS

23:52which is hasilnya bagi browser

23:54sama aja, mau pake

23:56php JS, ataupun react

23:58server component

24:00architecture

24:02sebenernya bagi browser

24:04sama aja sebenernya, betul ga sih?

24:08kayaknya iya, mungkin juga

24:10iya kan?

24:12nah terus sisa html-nya

24:14misalnya, itu di header

24:16ada isinya search bar

24:18dan lain-lain, tapi kontennya misalnya judul

24:20dan body text-nya

24:22kan di fetch dari database

24:24itu kan cphp yang fetch

24:26pas dikirim

24:28tiba-tiba udah jadi html aja kan

24:30udah jadi hs1, judul post

24:32terus para dafty text

24:34udah isi body-nya

24:36juga jadi html biasa

24:38oh, tapi ini-nya

24:42enaknya, kalau karena

24:44kita sudah

24:46dimanjakan sama

24:48next.js, akhirnya

24:50nge-build ini semua, ga perlu

24:52beda bahasa, semuanya javanese

24:54semua satu ekstrasi

24:56semua akan bahasa

24:58yang sama, ya

25:00maintenance-nya lebih gampang sebenernya

25:02ga perlu belajar dua bahasa

25:04ya, dan bisa

25:06mesti satu developer, mesti cari

25:08developer yang menguasai react

25:10ya udah, bisa nulis buat server side

25:12bisa on client side

25:14sekarang

25:16terbuka tujuannya

25:18tau, jadi

25:20konsepnya

25:22advantage of rendering data

25:24server side, bla-bla-bla-bla

25:26server

25:28ya, jelas server bisa

25:30nge-pick database

25:32lebih cepat

25:34initial page load is faster

25:36kalau yang di jual

25:42si remix kan itu kan

25:44spinagedon

25:46jadi menghindari spinagedon

25:48karena datanya mungkin

25:50datanya udah di-pick duluan

25:52jadi

25:54tidak ada

25:56loading spinner lagi kebanyakan gitu

25:58ya, mungkin ada di bagian tertentu, tapi ga

26:00sebanyak itu

26:02remix itu salah satu yang paling lambat

26:04mengadop si RSC, kenapa?

26:06karena sebelumnya kan mereka dari recrouter ya

26:08kelihatannya mereka udah

26:10bikin system yang

26:12bukan server side pun

26:14mereka yang handling dari recrouter kan

26:16kayak terlalu

26:18bikin system yang kompleks banget

26:20pas harusnya sesuai dengan server components, pusing dia

26:22kan si siapa itu namanya? Michael Jackson

26:24pernah nge-tweet apalah, lupa

26:26pokoknya dia frustrasi lah sama server

26:28components

26:30ya, jadi

26:32akhirnya mengadopsi juga cuma lambat

26:34masing-masing meta framework ini

26:36sudah mengadopsi dengan gaya caranya

26:38sendiri-sendiri, tapi ide dasarnya

26:40sama, sehingga diadopsi oleh react

26:42gitu kan

26:44iya, sama

26:46kalau next.js dari awal, udah all in

26:48ke server, react server components

26:50yang sesuai di react ini, jadi

26:52lebih, ya kayak lebih duluan lah

26:56oke, oke, oke

26:58disadvantagenya

27:00rendering content on server

27:02lead to higher server load

27:04ya udah pasti ya, server-nya harus

27:06bagus lah ya, harus bisa

27:08menghandle load

27:10ya ini kan pindahin aja yang tadinya

27:12tadinya beban di browser user

27:14dengan apa, dengan konsekuensi

27:16bundle size besar, sekarang dipindahin

27:18kan kita nggak bisa mengurangi

27:20jumlah apa task yang dieksekusi

27:22cuma perkara eksekusinya dimana

27:24kalau kita menutusinya

27:26di server kita ya

27:28harus menanggung konsekuensinya

27:30betul

27:32browser, apa

27:34browser functionality jadi terbatas

27:36karena di server nggak ada kan

27:38kita nggak bisa cek user location

27:40device

27:42dan lain-lain, jadi itu harus

27:44tetap di sisi klien

27:46loading time for navigation may be

27:48slow, if data

27:50isn't reused and each navigation result

27:52completely new page

27:54jadi setiap kali ada navigasi

27:56ke halaman yang baru

27:58kemungkinan ada sedikit delay

28:00sama ya

28:02kita pindah halaman atau kayak nge-refresh

28:04additional benefitnya apa nih

28:10server company

28:14are already pre-rendered

28:16conditionally

28:18render server company kan pre-rendered

28:20instantly even when they

28:22depend on network data

28:24there is no need to wait for a network

28:26response and handle

28:28the loading stage, even in

28:30the case where the component

28:32is conditionally

28:34rendered in response

28:36to a user action

28:38tapi itu semua dalam bentuk HTML

28:40bentar gimana, maksudnya detailnya

28:42gimana nggak tau sih ya

28:44your preoccupation, jangan

28:46kelatkan kalau baca itu tadi yang

28:48Gnaphatas pasti kita kan udah

28:50khatir aja, jadi berat juga dong

28:52nah cuma dia bilang

28:54nggak perlu khatir

28:56HTML code

28:58does not have a great impact

29:00on loading times

29:02bisa di-case ya

29:04ya, ini juga penting nih

29:10jadi kalau page-nya

29:12masih sama, nggak ada update ya

29:14udah, istilahnya

29:16pakai yang case kan jadi jauh lebih cepat

29:18kan, karena data tidak

29:20berubah, kemudian

29:22di-parsingnya jauh lebih cepat

29:24ya, bisa

29:26bahkan bisa kalau

29:28nggak pakai javascript

29:30di sisi klien, jadi bundle-nya bisa kosong

29:32zero bundle size, nah itu tadi yang

29:34yang gue bilang klien, sebenarnya klien

29:36JS-nya bahkan opsional ya

29:38tergantung, tergantung di halaman

29:40kita ya, kalau cuma pure static

29:42kirim HTML ya, pure HTML

29:44betul, karena

29:46ini kita ngomongin javascript di sisi klien ya

29:48kalau misalkan di sisi support-nya pakai javascript juga

29:50ya dihitung lah ya, kalau ini kan

29:52ya kan itu udah

29:54di-execute, udah jadi HTML

29:56pas di-parsing ke user

29:58ke browser, itu udah berupa HTML

30:00yes, jadi

30:02nggak peduli bahasa aja, ujung-ujungnya adalah

30:04HTML yang

30:06sudah siap dikonsumsi oleh

30:08browser gitu ya

30:10berarti bisa juga ini ya, apa namanya

30:12kayak ya

30:14bundle yang dikirimkan itu

30:16tergantung page

30:18selalu

30:20semuanya sama, jadi

30:22hanya saat dibutuhkan saja

30:24kirim misalnya

30:26halaman home

30:28nggak ada klien site-nya

30:30iya, yang di halaman home

30:32ada sat, ada

30:34let's say, ada satu klien site-nya

30:36misalnya, tapi di halaman

30:38article atau di halaman yang didalam

30:40nggak ada

30:42komponen

30:44yang kita butuhkan itu di article

30:46jadi sebenarnya di article nggak di-load

30:48atau sama sekali nggak di-download JS

30:50yang kita pakai itu

30:52iya

30:54makanya

30:56aku kan

30:58nyari-nyari, bisa nggak sih kalau kita iseng nih

31:00pengen kita

31:02langsung menggunakan react server komponen

31:04tanpa meta framework nih

31:06jawabannya bisa

31:08tapi ribet, karena itu ngaruh ke

31:10logic routing juga kan

31:12makanya apa, kayak next.js kan

31:14ngadopsinya cuma di app router

31:16karena pages router

31:18itu fitur yang udah lama ada

31:20ya biasalah, kalau

31:22ngadopsi hal baru ke fitur yang udah lama ada

31:24terlalu banyak moving parts

31:26kan sulit ya

31:28jadi emang si server komponen

31:30untuk sekarang diterapinnya di

31:32app router, sampai si next.js-nya

31:34bikin baru gitu

31:36bikin itu

31:38fitur baru

31:40yang bisa di integrasiin

31:42dengan mudah dari awal dengan si

31:44RSC ini

31:46jadi migrasi masih menjadi

31:48isu karena

31:50gaya-nya berbeda gitu ya

31:52dan salah satu

31:54benefit menggunakan app router adalah

31:56kita udah bisa pakai server komponen

31:58dibandingkan yang page router ya

32:00kalau untuk next.js nih

32:02khusus untuk next.js

32:04nah itu

32:06di balik semua keuntungan tadi

32:08kerugianya, impinya adalah ribet

32:10kuda belajar, makanya apa

32:12harus memahami semua

32:14semua yang kita bahas tadi, itu kan kayak gak bisa

32:16langsung ngerti kan, kita minimal harus berhenti

32:18bentar terus, oh gitu

32:20kayak hal-hal kecil lah

32:22apa, separation antara server

32:24sama client, misalnya itu

32:26dengan use client, itu kan

32:28ya belum tentu semua developer

32:30mau dan langsung bisa

32:32melukasi kayak gitu, kurangan intinya

32:34ya

32:36oke, menarik-menarik

32:40jadi itu dia

32:42overview dari

32:44server komponen itu sendiri, walaupun

32:46di sini dibahas banyak kan next.js ya

32:48tapi ya kurang lebih gitu ya

32:50ya ini kan dalam konteks pengguna next.js ya, itu kenapa

32:52karena kalau menahan

32:54RSC

32:56gak bisa ya, bisa dibilang gak bisa ya

32:58agak terlalu abstrak

33:00jadi apa kita butuh satu

33:02abstraksi lagi, cuma kalau dibahas

33:04dengan konteks next.js

33:06ini kan lebih bisa dibayangin ya

33:08iya, karena

33:10di RFC-nya juga

33:12di sini, tadi sempat baca sekilas

33:14RFC itu adalah request for comment ya

33:16request for comment ya

33:18nah ini

33:20ada yang nanya nih

33:22apakah akan

33:24tightly couple dengan

33:26Ages, atau

33:28bisa pakai berbagai runtime

33:30seperti

33:32jaman dulu masih

33:34Cakrakor ya, seperti

33:36Deno atau Bone ya sekarang ya

33:38karena kita ngomong server pasti gak lepas

33:40dari runtime kan

33:42betul, jadi apakah

33:44si React ini

33:46kalau React implementasi server

33:48komponen, bener-bener kita bisa jalanin

33:50jalanin apa ya

33:52jalanin

33:54React server komponennya sendiri tanpa

33:56framework lain artinya dia udah berubah

33:58jadi web framework kan

34:00itu udah bukan lagi

34:02library, katanya kan React masih

34:04library kan, jadi ini juga

34:06jadi perdebatan sih

34:08sampai akhirnya ya udah

34:10React akhirnya bikin server komponen

34:12tapi backendnya

34:14terserah, terserah

34:16apa ya, developer

34:18framework lain yang mau

34:20mengadopsi, developer framework

34:22atau tepatnya meta framework ya itu

34:24meta framework, maksudnya yang

34:26yang mikir gimana

34:28mengintegrasikannya

34:30itu ya itu developernya

34:32nexia as remix

34:34ini server

34:36komponen tanpa server gimana sih

34:38maksudnya

34:40tanpa server komponen itu

34:42biasa melakukan data static pada klien

34:44dengan efek

34:46ini klien side kan

34:48kita ambil API

34:50terus disana size

34:54nah ini APInya

34:56contohnya ya

34:58terus

35:00this pattern means user

35:02need to download then parse additional

35:0475k

35:06and wait

35:08for second

35:10request to fetch the data

35:12after the page loads

35:14just to render static content

35:16that will not change

35:18over time of the page

35:20jadi harus 2x jalan

35:22dari klien side

35:24kita harus nge-fetch

35:26manggil ke API kita kan

35:28kita bikin API endpoint

35:30API endpoint kita

35:32karena dewasus ini pakai JavaScript ya

35:34harus nge-fetch lagi dan

35:36apa ya, ngebalikin

35:38nah dengan server komponen

35:40you can render this component once at

35:42build time, jadi bedanya adalah

35:44ini ya

35:46ini page-nya

35:48terus return

35:50div-nya

35:52itukan sebelum

35:54load after first page render

35:56nah kalau yang pakai

35:58server komponen

36:00dia bisa langsung read file-nya

36:02markdown-nya, gak perlu pakai API

36:04sekali jadinya dikirim udah berupa HTML

36:06sesimpel itu sih, jadi sanitize

36:08kan di atas ada tuh import sanitize

36:10HTML, nah itu semua

36:12urusannya server, udah yang dikirim

36:14ke browser

36:16klien, itu zero

36:18script gak usah import-importan

36:20betul, gak perlu pakai API

36:22lagi kan, karena markdown-nya

36:24bisa dibaca langsung

36:26itu tadi klien side

36:28iya ini kan

36:30klien side gak bisa baca markdown kan

36:32jadinya dia

36:34dia asumsikan

36:36kita punya API ini untuk baca file

36:38markdown

36:40jadi dengan ini kita bisa gabungin

36:42tuh yang API.js-nya

36:44gak perlu, kita masukin kesini aja

36:46terus abis itu sanitize

36:48nah ini udah bisa ditampilkan di browser

36:50nah ini ada

36:52masukan yang menarik dari Mas Irfan

36:54baca RSC

36:56di Parcel

36:58menarik

37:00Parcel Bundler ya

37:02Parcel.js apa-apa namanya

37:04Parcel.js.org

37:06Parcel.js

37:08RSC, ada gak RSC

37:10ada ada, oh ini

37:12recipes

37:16React Server Component

37:18are new type of component

37:20that render ahead of time on server

37:22or that build time

37:24Parcel 2.14

37:26sudah support

37:28contohnya

37:30oh ini install ya, install dulu

37:32standarlah ya, React

37:34Dom sama Parcel

37:36tapi Parcelnya RSC

37:38React Server Component

37:40can be integrated into existing

37:42client render SBA, for example

37:44written JSON from an API

37:46sama kayak tadi ya

37:48for a new feature you can render server component

37:50this can help reduce client bundle size

37:52by sending only the component needed

37:54to render the requested data

37:56and omitting heavy non-interactive

37:58component

38:00for example markdown renderer

38:02from the client bundle

38:04entirely

38:06set up target

38:08react client, react server

38:10terus ada

38:12start dan build

38:14create a server, ini pakai express

38:16ya contohnya

38:18standard

38:20render RSC

38:22dari Parcel

38:24dengan node

38:26command

38:28render RSC

38:30command component itu ada

38:32di ini

38:34iya

38:36oke

38:38yang di kirim, react server

38:40pakai stream ya

38:42ya

38:44jadi bisa parcial ya

38:46ngirimnya ya

38:48sedikit demi sedikit ya

38:50yes

38:52dia mengirim react tree ya

38:54yang di kirim adalah tree nya

38:56yang bisa di render jadi HTML

38:58yes

39:02lower level react API

39:04server entries, now we need to implement

39:06command component rendered above

39:08this is react server component

39:10it's only run on the server

39:12not in browser and has full

39:14access to server resource like file system

39:16or database

39:18use server entry is

39:20parcel specific ya

39:22iya, kalau yang use client

39:24use server kan

39:26use client use server itu next.js

39:28itu specific juga next.js ya

39:30ya cara next.js

39:32membetasi

39:34mana-mana

39:36hmm

39:38hmm

39:40oh ini yang sempet

39:42rame ya di

39:44next.js jadi kayak php ya

39:46ada use client use server

39:48terus ya

39:50bisa apa namanya

39:52bisa query langsung di component

39:54nulis sql

39:56nulis sql langsung di component

39:58karena dia udah

40:00di server kan

40:02jadi bisa ngapain aja sebenernya

40:04ya kita harus memperhatikan

40:06separation of concern juga

40:08jangan mentang-mentang bisa terus kita

40:10lotanya semua disini

40:12berbahaya

40:14ya lebih ke concern mana yang cocok

40:16untuk server, kayak misalnya query database

40:18itu ya emang kerjaannya server kan

40:20cuma jadi kita harus

40:22mindsetnya kita misalnya apa yang perlu

40:24di client ya kayak

40:26client set interactivity kan

40:28mencet button terus apalah

40:30ada yang kebuka atau ada

40:32buka atau buka

40:34kok jadi kayak meteor ya

40:36meteor itu ada client.js

40:38ada server.js

40:40oh iya betul

40:42baru inget gua

40:44meteor

40:46coba ya

40:48jadi sebetulnya

40:50itu kan bisa

40:52iya

40:54ada ga ya keliatan ga ya

40:56yang dia bisa

40:58client server di satu file

41:02ya

41:04kita sambil liat lagi

41:06ok

41:08face rrc

41:10rsc from the client

41:12to load server component on

41:14the client

41:16bisa ngirim rscnya langsung

41:18sebagai payload

41:20oh

41:22suspence ini dari client

41:24kemudian

41:26loading component

41:30terus di function comment nya

41:32itu fetch

41:34fetch nya ini dalam format

41:40apa ya? api?

41:42itu tadi

41:44react 3 kini ya

41:46yang dikitkan tadi dari server

41:48oh json3 ok ok

41:52jadi stream

41:56ada comment nya masih panto itu punya

41:58react oh use client

42:00oh yang ini punya react

42:02yang use server entry ini punya react

42:04engga itu punya

42:06parcel specific

42:08coba

42:10use client

42:12iya suspence sama

42:14use client

42:16use client punya oh

42:18use client punya react

42:20tapi use server entry punya parcel

42:22nah ini kesimpulannya

42:24iya ga standar ya jadinya ya

42:26bukan

42:28parcel nya

42:30parcel nya

42:32bikin use server entry ya

42:34buat kebutuhan dia sendiri

42:36kayak edukasi developer nya itu

42:38yang malas karena

42:40ribet

42:42masing-masing pakai ini sendiri ya

42:44kenapa dia ga pakai use server

42:46use server gitu

42:48takut bentrok kali

42:50sama react nya

42:54nah kan use client itu punya react

42:56use server entry punya parcel

42:58ok next

43:02lanjut ya ini udah

43:04terus client component use client oh yang ini ya

43:06use client itu standarnya ya

43:08terus standar react use client

43:10directive

43:12ok ini berarti

43:14server/lightbutton.js

43:16tapi ini akan dieksekusi

43:20di client ya berarti ya

43:22dan kodenya juga kode javascriptnya

43:24mau ga mau ini pakai javascript

43:26yang jalan di browser

43:28user kan di client saya

43:30nah itu semua kode yang

43:32udah di proses javascriptnya

43:34ya harus di load di browser

43:36agak rancu

43:38gara-gara folder server sih tapi ya ok lah

43:40engga dia tetep ada lightbutton

43:42tapi karena pakai ini kayak bukan

43:44rancu tapi sengaja

43:46membuatnya ada kontras

43:48di sini meskipun dia

43:50di server tetapi kalau kita

43:52pakai use client

43:54sebenernya dia dijalankan di dalam

43:56component nya yang ada di server

43:58yaitu comment tadi

44:00karena lightbutton itu part of comment

44:02oh iya HTML button nya tetep ada ya

44:04tetep dikirim kan tetep di proses ya server

44:06tapi yang kayak use state nya

44:08ya di skip aja di server

44:10dikirim ke

44:12ga di render

44:14di server

44:16ga di render

44:18iya

44:20di render button nya

44:22iya

44:24ok ok

44:26terus ini bagian

44:30yang server nya

44:32jadi waktu kita pakai lightbutton

44:36di sini

44:38semuanya tetep dikirimkan

44:40dari sisi server

44:42HTML HTML nya tetapi lightbutton itu

44:44hanya dikirim

44:46sebagai

44:48gua ga tau

44:50sebagai apa mungkin hanya si

44:52apa namanya

44:54si button on click nya itu aja

44:56tetapi tidak ada interactivity nya

44:58di server nanti di hydrate

45:00di local

45:02bisa dijalankan ga sih ada ga sih

45:06ini play button nya biar

45:08terlihat

45:10mau di itu

45:12demo

45:14pengen tau asilnya

45:16ada ripple nya tuh

45:18di atas kanan

45:20atas top header

45:22header ripple

45:24iya coba

45:26ya tapi

45:28kopal sendiri itu kan

45:30iya

45:32harus bikin sendiri

45:34coba oh ini ya install dulu

45:36ga usah sih ya udah di install

45:38atas atas

45:40rsc examples ripple

45:42complete examples

45:44nah apa poster disitu

45:46sample nya mana

45:54client server static

45:56ga maunya jalanin nya aja

45:58yang ini

46:00target

46:02package json

46:04client yaudah kita jalanin

46:06aja

46:08asik nih

46:10asik

46:12demo

46:14ya aja lo demo

46:16rsc parcel

46:22eh ga kelihatan ya

46:24belum

46:26ini kelihatan kan

46:28iya

46:30terus

46:32ini tadi

46:36install

46:38belum masuk ini

46:40belum masuk rsc parcel

46:42apa?

46:44belum masuk rsc parcel

46:46ya salah deh

46:48nantilah bersihnya

46:52oke

46:54dan temen temen nya

46:56ini bisa di copy kan

46:58copy aja ya

47:00copy

47:02pakai apa kita?

47:04ah ga sebuah

47:08package json

47:12eh jcn

47:14salah

47:16json

47:18json

47:20json

47:22json

47:24pake firebase ide

47:26belum sih

47:28firebase studio

47:30project ide x

47:32create server

47:36ini lengkap kan ya

47:38eh berarti kita harus install express dulu dong

47:42ha?

47:44install express kan?

47:46install

47:48ada ya?

47:52ga tau

47:54gaada tadi gaada

47:56gaada

47:58berarti belum lengkap

48:00ya sudah

48:02ya sudah

48:04berarti ini server.js

48:06tadi kayaknya server

48:10server/server.js deh

48:12eh bener ga sih?

48:16bener

48:18udah

48:20get comment

48:24content type x component

48:26oh content type nya x component ya

48:30ini nya apa?

48:32header nya

48:36ya header nya

48:38terus

48:40server entries

48:42ini server comments.js

48:44server/comments.js

48:46j nya besar ya

48:50now ya

48:54comments.js

48:56itu

48:58ya

49:00di geser kesini

49:02terus

49:04load

49:06src

49:08app.js

49:10oh kok jadi src?

49:12ya ok lah gapapa

49:14803.000 nya

49:16jalanin dulu

49:18ini ya jalanin dulu berarti ya?

49:20ya nanti

49:22ya nanti lah ntar dulu

49:24src

49:26slash

49:28app.js

49:30gini ya?

49:32ya

49:34sudah

49:36terus

49:38ee

49:42ini apa? comments.js tadi udah kan?

49:44oh ini kalau contoh buat

49:46oh iya

49:48buat contoh itu

49:50load data ya

49:52comments.js tadi udah kan?

49:54sudah

49:56comments.js

49:58ini kan gak ada db nya

50:00ya kita bikin aja ini apa namanya

50:02return stringify json

50:04palsu aja udah

50:06ya nanti lah

50:08ntar dulu

50:10terus yang di app.js

50:12ini udah?

50:14sudah

50:16sekarang like button

50:18.js

50:20yang comment juga udah ya?

50:22sudah

50:24sudah

50:26comment ini

50:28nanti dia akan mengirimkan

50:30yang comment.js ini ya berarti ya?

50:32yang dari server

50:34dari server

50:36nah sekarang

50:38di server like button.js

50:40ada use client

50:42sama

50:44berbagai component

50:46baru temui

50:48di dokumentasinya

50:50yang komen parcel itu ternyata

50:52ada quick start nya

50:54terus?

50:56sudah

50:58terlanjur ya?

51:00ya

51:02ya kalau scroll terus ke bawah

51:04nanti kalau udah nyerah

51:06bakal ada

51:08tinggal tambahin importnya

51:10di copy aja nih semua mas

51:12eh ini ya

51:14gak bisa gak bisa nanti ilang

51:16ada yang ilang db itu di ilangin

51:18ya itu aja

51:20yang server

51:22eh apa tadi comment nih?

51:24comments ya

51:26import

51:28dimana sih sini?

51:30terus sama like button ya?

51:32ya

51:34like button

51:36gitu? sudah?

51:38sudah

51:40terus?

51:42jalanin dulu ya?

51:44jalanin dulu ya?

51:46co-coating ya?

51:48npm start

51:52gak bisa

51:54parcelnya belum install?

51:58udah kan?

52:00kan udah di install semua harusnya

52:02iya udah di install dulu tadi

52:04npm

52:06udah ya?

52:08itu start nya

52:10oh iya dependency nya gak ada

52:12npm

52:14install tadi ini ya?

52:16ulang lagi

52:18nah

52:20udah

52:22lupakan npm ini

52:24gak bisa

52:26parcel not found

52:28ha?

52:30parcelnya juga ada deh kayaknya

52:32parcel

52:34gini?

52:36nggak tau

52:38bentar-bentar nyari

52:40contohnya

52:44ya

52:46npx aja gak bisa ya?

52:48npx parcel

52:50ganti ya

52:52npm tuh pake run

53:00kalau start gak perlu

53:02oh

53:04npx gak ada

53:06tapi ada npm create itu loh

53:08ini loh npm

53:10npm create parcel

53:12loh ini kan udah di dalam parcel?

53:14iya

53:16di project yang itu

53:18oh ya

53:20udah cancel-cancel

53:22npm install parcel

53:24berarti ya?

53:26iya

53:28oke

53:32udah ada?

53:34parcel

53:36npm start

53:38npm start

53:40nah

53:42error

53:44oh gak ada source index

53:46source index

53:48gak ada

53:50index html

53:52cari contekan yang

53:54ada dulu ya

53:56html 5 bisa gak nih?

53:58oh gak bisa

54:00body

54:02rst

54:04kalau udah

54:06dia gak ini ya? gak otomatis ya?

54:08oh error lagi

54:10course, kok ada course nya?

54:12oh buat ngirim ya

54:14npm install course

54:16bener kan?

54:18iya bener

54:20error lagi

54:22apa ini?

54:24ini namanya

54:30bug driven development

54:32error driven development

54:36ini apa?

54:38pake cursor

54:40quick start

54:44ada env kali?

54:46ada env debug

54:48kenapa error nya?

54:50emang cursor udah ngerti dia

54:54rst

54:56kalau udah contohnya

54:58quick start nya mana quick start? coba quick start

55:00itu tadi

55:02npm create parcel

55:04bikin folder baru aja

55:06oke

55:08ini ya

55:10npm create ini ya?

55:12oh bikin lagi dari awal

55:14baiklah

55:16eh langsung init

55:26dia langsung kirim ini nih

55:34npm start

55:38error juga

55:44oh yang tadi belum di stop

55:46masa?

55:48yang tadi udah jalan sebenernya mas

55:50cuma ada error aja tapi jalan

55:52tapi kan masih jalan

55:54udah

55:56udah jalan nih

56:02terus ngapain?

56:04bikin npm start

56:06create a server

56:08oh sama

56:10di create kan

56:12kita liat ini ya

56:14kita liat

56:18package yang tadi

56:20package yang tadi

56:22package yang tadi di

56:24localhost 3000

56:26sama

56:28kita liat ya

56:30tapi gaada server

56:32adanya page

56:34counter, oh beda ya

56:36beda ini ya, beda contoh ya

56:38localhost 3000

56:40parser react server app

56:42this page is react server

56:44component

56:46edit src page.jx

56:48to get started

56:50client component

56:52nah coba buka javascript

56:54matiin javascript deh

56:56matiin javascript

57:00command shift v aja

57:02itu loh

57:04gue ga asal dong

57:06mortals

57:08command shift v aja

57:14command shift v

57:16disable javascript

57:18susah susah

57:20amat

57:22tuh bisa

57:24tapi ini gabisa kan? nah ini gabisa jalan

57:26karena javascriptnya tidak nyala

57:28tapi kan dikirimnya

57:30terbukti dikirimnya html kan

57:32sebut button button nya muncul

57:34cuma gabisa diklik aja

57:36coba

57:38ini bisa, ga ngaruh ya

57:40iya, coba kita enable lagi

57:46enable javascript

57:48langsung bisa? belum

57:50harus refresh ya

57:52loh gabisa di refresh

57:56kok gabisa refresh?

57:58nah udah

58:00kok gabisa?

58:02kaya loh

58:04eh salah

58:06apa sih?

58:08janyan belum di enable

58:10javascriptnya

58:12udah

58:14oh iya udah

58:16udah kan?

58:18kok jadi gabisa?

58:20ga tau

58:22gabisa diklik

58:24matikan devtools

58:26tutup devtools

58:28maksudnya di enter ulang

58:30oh bisa

58:32ini kodanya kaya gimana?

58:36jadi

58:38page.tsx

58:40ini ya

58:42ini standard import client

58:44ini server ya

58:46ga kelihatan ya

58:48bentar bentar

58:50banner nya kita hilangkan dulu ya

58:52nah

58:54ini server entry

58:56berarti ini server

58:58component ya, ini server component

59:00HTML standard

59:02form nya juga standard

59:04action nya ini adalah

59:06action nya apa tuj?

59:08dari sini

59:10action.tsx

59:12fungsi

59:14form, submit form ya

59:16tapi ini di execution

59:18di sisi server ya

59:20berarti itu userfer

59:22yang tadi dibilang sama

59:24mas Irvan Molana itu

59:26userfer dan client adalah

59:28direktifnya react

59:30tapi kalau userfer entry

59:32baru punya parcel

59:34bayangin deh

59:36kalau kita ngelitin

59:38kita mau soalan adopsi

59:40react server component kita harus

59:42mastiin semua anggota tim kita

59:44paham ini semua

59:46mas Irvan ini ada

59:48ini juga kalau mas Irvan tenang aja

59:50saya udah pake banyak

59:52sama kita

59:54tenang tenang

59:58direktif userfer ini ada

1:00:00penemuan kocak lagi nih

1:00:02buka link yang di private chat

1:00:04jadi

1:00:06userfer itu

1:00:08client kan jelas saya tadi menandakan

1:00:10client component itu punya react

1:00:12userfer juga

1:00:14punya react, tapi

1:00:16itu bukan direktif untuk server

1:00:18component, jadi react server

1:00:20component adalah server side by default

1:00:22nah tapi userfer itu

1:00:24menandakan server function

1:00:26ada yang namanya server function

1:00:30ini userfer ini

1:00:36berarti ini valid javascript ya

1:00:38punya nya react

1:00:40oh punya nya react

1:00:42valid javascript ini valid javascript

1:00:44karena itu kan cuma komen mas

1:00:46bukan komen ini, string

1:00:48sorry string doang

1:00:50string doang DJSM

1:00:52harus gini kan

1:00:54harus gini kan

1:00:56itu statement

1:00:58statement bukan declaration

1:01:00ya ini cuma kayak

1:01:02string udah gitu doang

1:01:04mas Jelisah bisa bikin

1:01:06string ngobrolin wait

1:01:10terus di enter juga gak apa-apa

1:01:12rusak

1:01:14coba ya

1:01:18error gak

1:01:22iya gak error

1:01:24ga error ya

1:01:26tulis aja string

1:01:28lho inspect element nya rusak

1:01:30gak bisa di clean

1:01:32error berarti

1:01:40coba ya

1:01:42iya gak bisa

1:01:44kutup aja kutup

1:01:46tutup ya

1:01:48tutup, nyalain lagi ya

1:01:50ya di itu

1:01:52lain aja di tab line

1:01:54nah buka console

1:01:56ketik

1:01:58use anything

1:02:02ya cuma dibalikin aja

1:02:04oke oke oke

1:02:06ketik ngobrolin wait juga boleh

1:02:08oke

1:02:10ini server

1:02:12terus action nya juga server

1:02:14apa lagi

1:02:16input nya

1:02:18name

1:02:20yang counter pengen liat

1:02:22counter kan dia client side

1:02:24use client

1:02:26nah yang mau saya liat itu

1:02:28coba liat di ini dong

1:02:30di stream nya mas Riza

1:02:32di devtool di stream

1:02:38apa dia

1:02:40gini dia kirimnya stream bukan

1:02:42kayak tadi stream bukan

1:02:44kalau server txx

1:02:46oh beda cara kirimnya ya

1:02:52sama yang tadi ya

1:02:54render request

1:02:56ini render request dari mana

1:02:58dari parcel

1:03:02oke, mau liat apa

1:03:06yang mana tadi ini

1:03:08yang disebelah kiri itu apa

1:03:10yang ada tree gitu sebelah

1:03:14sebelah kirinya yang sini

1:03:16caranya nampilnya gimana ya

1:03:18tree apa sih

1:03:20yang ada daftar

1:03:22daftar

1:03:24file

1:03:26disini itu biasanya

1:03:28source ya

1:03:30bukan, ya ini

1:03:32kayak gini tapi disini, di network

1:03:34nggak ada ya

1:03:36refresh dulu

1:03:38oh ini maksudnya

1:03:40file-file nya

1:03:42biasanya di sebelah kiri

1:03:44nah

1:03:48sekarang coba hapus

1:03:50coba hapus ini mas Riza

1:03:52itu kan ada space.js

1:03:54suatu komo suatu

1:03:56itu

1:03:58gede banget

1:04:00bukan ada hot reloading kali

1:04:02terus ini

1:04:04di hapus

1:04:06coba masuk ke

1:04:08yang tadi page.txx

1:04:10hapus yang button componentnya

1:04:12hapus, ya di comment aja

1:04:18counter, ya hapus

1:04:20sama button

1:04:22componentnya di hapus

1:04:24aja dulu

1:04:26safe

1:04:32refresh

1:04:34refresh coba

1:04:36gini

1:04:38refresh

1:04:40hilang

1:04:42ada

1:04:44jadi 0

1:04:48berkurang

1:04:500,1 mega

1:04:52nah cuma ini kan

1:04:54daftar paranya

1:04:56sebesar itu

1:04:58dan ada jsnya karena

1:05:00dia hot reload kan

1:05:02iya karena ada hot reload segala macem

1:05:04jadinya gede, kalau di ini

1:05:06npm

1:05:08build

1:05:10udah dikasih build commandnya belum ya

1:05:14sudah harusnya ya

1:05:16npm run build

1:05:18nah kalau

1:05:20npm build, npm run

1:05:22build, atau dev, atau yang lain ya

1:05:24kalau start sama

1:05:26test itu nggak perlu pakai run

1:05:28page nya 194

1:05:30tetap gede ya

1:05:32apa masih ada

1:05:34kan janjinya

1:05:36kalau nggak ada server client side

1:05:38nggak usah di kirim gitu kan

1:05:40janjinya begitu

1:05:42use client nya coba di comment out deh

1:05:44di page.txx

1:05:46page.txx atas

1:05:50nah import client

1:05:52coba di hilangin

1:05:54build lagi berubah ya

1:05:56belum di save

1:05:58udah

1:06:00kecil sih

1:06:02jadinya

1:06:04berubah nggak sih?

1:06:06berubah, berubah

1:06:08jauh jauh

1:06:10tetap gede

1:06:12tetap gede

1:06:14kita liat server

1:06:16tetap gede ya

1:06:22ini ada faktor apa ya

1:06:24jadi begini doang ya

1:06:26sebagai anak

1:06:32coreware vital

1:06:34berarti belum sesuai ekspektasi ya

1:06:38belum tau pakainya kali ya

1:06:42belum tau caranya ya

1:06:44ya tapi berarti

1:06:46belum segampang, belum semudah

1:06:48itu untuk diadopsi, terus

1:06:50yang kayak dengan ngejalanin

1:06:52dengan template starter

1:06:54terus yang kecil banget

1:06:56nggak se magic gitu ya

1:06:58iya

1:07:00kalau template itu ya berarti

1:07:02no javascript kan janjinya itu tadi

1:07:04iya

1:07:06cuma ternyata kompleks

1:07:08dan banyak kayaknya

1:07:10setelah dilihat dari dokumentasinya react

1:07:12ada beberapa mesej selain

1:07:14perkara tadi use client, use server

1:07:16ya kayak concept server function

1:07:18juga masih harus di pelajarin

1:07:20tuh

1:07:22itu tadi

1:07:24use server itu

1:07:26ini soal semantik sih

1:07:28jadi kayak use server itu bukan menandakan

1:07:30server component

1:07:32tapi menandakan server function

1:07:34nah mampus

1:07:36server function itu apa

1:07:38dia bisa mengesuasi

1:07:40fungsi di sisi server gitu ya

1:07:42bisa di

1:07:44berjalan di sisi server

1:07:46bisa dipanggil dari client

1:07:48itu

1:07:50itu

1:07:52itu

1:07:54itu

1:07:56itu

1:07:58itu

1:08:00itu

1:08:02itu

1:08:04itu

1:08:06oh

1:08:08ok

1:08:10ok

1:08:12ok

1:08:14ok

1:08:16yang ini bukan react photo

1:08:18computer seingat gue sih

1:08:20bener gak

1:08:22coba liat

1:08:24videonya

1:08:26jangan iklan dulu

1:08:28nah ini

1:08:30ini kan

1:08:34yang dia buat

1:08:36ini bukan

1:08:38bukan ya

1:08:42kayaknya iya

1:08:44yang

1:08:46yang demo nya itu kayak

1:08:48windows

1:08:503.11 bukan ya

1:08:52bukan ya

1:08:58bukan ini

1:09:00ada yang lebih simple yang dia kayak

1:09:02lebih

1:09:04lebih

1:09:06lebih sederhana lagi

1:09:08karena dia bikin step 1

1:09:10step 2

1:09:12hmm

1:09:14tapi sudah mulai dapet

1:09:20pencerahan dari topik malam ini

1:09:22kebayang

1:09:24ya ini penting itu ya

1:09:26jamanan besar nya kebayang

1:09:28tapi kalian suruh ngerjain

1:09:30kayak belum ada

1:09:32headspace yang cukup

1:09:34serahkan kepada

1:09:36framework

1:09:38mas Irfan ini bagus deh

1:09:40tapi di muncul-munculin komennya aja

1:09:42karena kita belum pakai

1:09:44kita belum munculin komen yang kita pakai

1:09:46dari agak atas sedikit aja tuh

1:09:48selama masih ada use client

1:09:50ini ya

1:09:54use client new server direktif yang datang langsung dari react

1:09:56bukan punya next.js doang

1:09:58selama masih ada

1:10:00client, use client

1:10:02gak akan kerasa overall performance

1:10:04improvement dari RSC

1:10:06karena pas ada use client

1:10:08kita perequest di AS

1:10:10ketolong case aja kalau di next.js

1:10:12hmm oke

1:10:14tapi setidaknya gak semua

1:10:16ya gak semua

1:10:18tapi ada satu aja button yang butuh

1:10:20client side interactivity like button

1:10:22atau apapun ya kita butuh react ya

1:10:24berarti apa konsekuensinya

1:10:26oh oke

1:10:28oke kalau dibandingkan

1:10:30dengan itu si apa

1:10:32astro punya

1:10:34island

1:10:36architecture

1:10:38mendingan mana

1:10:40bundle size naik

1:10:46tapi perceive performance

1:10:48berasa lebih kencang

1:10:50oh bundle size nya mungkin lebih gede gitu ya

1:10:52tapi pada saat dijalankan

1:10:54malah jadi berasanya lebih cepat ya

1:10:56dari page router

1:11:00udah terbiasa server side

1:11:02dulu kita ngoding server side di block yang terpisah

1:11:04nah perbedaannya jelas

1:11:06antar code client server

1:11:08kalau sekarang jadi digabung gitu ya

1:11:10jadi ke gabung gitu

1:11:12dibisah juga cuma pake

1:11:14caranya ngikutin cara-caranya

1:11:16server component react server component

1:11:18kita ngoding server side langsung

1:11:20di dalam render function

1:11:22di dalam component

1:11:24ini berpotensi kayak dulu pas pertama kali

1:11:26oh iya bener

1:11:28bener bener

1:11:30kalau kita gak aware banget sama use server

1:11:32dan use client gitu

1:11:34jadi bisa ketukar-tukar ya karena sama

1:11:36antara code

1:11:38di server sama code di client kan sama

1:11:40kalau dulu misalkan sama-sama javascript lah

1:11:42yang satu kita pake

1:11:44express yang satu pake react

1:11:46walaupun sama-sama javascript

1:11:48tapi kan beda ya yang satu kita

1:11:50bikin component yang di express kan

1:11:52bukan komponen react kan

1:11:54iya ini dua-duanya react

1:11:56nah terus kok kebayangnya nih

1:11:58skenario apa maksudnya oke lah

1:12:00pas tim react bikin react server

1:12:02component niatanya

1:12:04mulia gitu maksudnya objektifnya

1:12:06bagus di lapangan karena pusing

1:12:08tiba-tiba daripada breaking nanti

1:12:10baunya semua use client

1:12:12use client semua

1:12:14sama juga bo'ok

1:12:16iya semuanya use client ya

1:12:18oh ketemu nih ketemu

1:12:20Ivan

1:12:22dan ketemu nih videonya nih

1:12:24ini bukan

1:12:26iya ini dia

1:12:28react from another dimension

1:12:30bener kan

1:12:32yes betul

1:12:34hebat aja nih

1:12:36ini masih bisa

1:12:38ini ya

1:12:40pasti yang dia nyari pesan saya

1:12:42di whatsapp group ya

1:12:44engga

1:12:46yang di youtube kali ini

1:12:48tuh kan windows kan bener kan

1:12:50ingetnya windows ini

1:12:52tapi betul yang itu

1:12:56dia beneran jalanin

1:12:58di ea gitu maksudnya

1:13:00sombongnya dia

1:13:02kurang tau ya kayaknya iya

1:13:04iya

1:13:06dia pake vm gitu engga

1:13:08iyalah

1:13:10iya kan

1:13:12iya

1:13:14jadi react bisa jalan

1:13:16di ea gitu maksudnya

1:13:18oh karena

1:13:20tapi server component

1:13:22iya remixnya

1:13:24server component

1:13:26iya pake mark wii lagi

1:13:28kan bukan sistema sama windows

1:13:32jadi mendingan astro aja sekalian ya

1:13:36yang island architecture ya

1:13:38nah tapi kalo ngomong astro

1:13:42ada artikel yang menarik

1:13:44jadi sebenernya bahas server component ini

1:13:46terinspirasi oleh

1:13:48artikelnya mas jen abramov juga

1:13:50jadi beliau

1:13:52karena dia bikin artikel yang judulnya

1:13:54rsc for astro

1:13:56developers, nah gara-gara baca

1:13:58artikel ini nih jadi

1:14:00dapetin dia pengen melek

1:14:02rsc, tapi ini

1:14:04sebetulnya

1:14:06ga ada hubungannya sih maksudnya apa

1:14:08ini

1:14:10bikin analogi untuk membantu developer

1:14:12yang sudah menggunakan astro

1:14:14yang udah pake astro

1:14:16udah punya mental modelnya pake astro

1:14:18component, nah itu dipake buat

1:14:20dimanfaatin si mas

1:14:22dan ini untuk nyalasin rsc

1:14:24itu apa ya baca

1:14:26sendiri aja menarik kalo

1:14:28yang buat yang cuma ini berguna

1:14:30cuma buat yang udah

1:14:32pake astro sih, udah pernah menggunakan

1:14:34astro ya, ini sama ya

1:14:36contohnya lag button juga ya

1:14:38jadi pertama dia tunjukin

1:14:40persamaannya antara

1:14:42astro components dengan

1:14:44react server dan client components

1:14:46terus dia ga outline beberapa

1:14:48perbedaannya juga ya intinya gitu

1:14:50ini astro

1:14:52ini react ya

1:14:54perbedaan mendasarnya apa?

1:14:56perbedaan mendasarnya

1:14:58paling signifikan

1:15:00ya dua-duanya pake react kalo rsc

1:15:02dan apa

1:15:04react server components dan

1:15:06client components, nah

1:15:08scroll ke bawah lagi aja dia

1:15:10jelasin

1:15:12ya ini dia ngasih contoh ya itu yang di atas

1:15:14tadi kalo di astro

1:15:16itu yang server side adalah

1:15:18astro component dan astro

1:15:20terus dalemnya

1:15:22maksudnya di dalem

1:15:24astro component itu kita bisa

1:15:26input front end

1:15:28atau client component

1:15:30pake react, pake scroll, pake view

1:15:32dan lain-lain, kalo ini

1:15:34server dan client

1:15:36nah ke bawah lagi

1:15:38kalo mau liat

1:15:40perbedaannya

1:15:42nah mental module

1:15:44dia bilang

1:15:46si mas Dania bilang mental module nya itu

1:15:48ya cukup sama lah

1:15:50kalo udah ngerti astro

1:15:52sudah punya 80% mental module nya

1:15:54tapi dia sambil ngiklanin

1:15:56apa? ngiklanin astro gitu

1:15:58even if you think

1:16:00react server components are a terrible idea

1:16:02astro is worth learning

1:16:04nah terus apa?

1:16:06perbedaan dalam hal

1:16:08syntax nya itu

1:16:10like astro component

1:16:12rsc itu function javascript biasa

1:16:14nah prop

1:16:16ya javascript lah

1:16:18prop nya datang dari

1:16:20function argument

1:16:22ga ada templating

1:16:24language nya sendiri

1:16:26terus apa? memisahkan

1:16:28server side dan client side nya

1:16:30juga lain

1:16:32caranya si react

1:16:34nah terus

1:16:36bahwa lagi yang ketiga

1:16:38kalo astro ada directives khususnya

1:16:40client load, mesti load

1:16:42langsung atau

1:16:44apa itu, pake intersection observer

1:16:46nah kalo misalnya

1:16:48react, ga

1:16:50reference syntax files

1:16:58versus client island

1:17:00create a sharp and obvious visual

1:17:02distinction between two worlds

1:17:04nah ini penting juga ini

1:17:06yang tadi kita bahas kan

1:17:08ya sama-sama react

1:17:10react di component

1:17:12di server sama di client side

1:17:14jadi component astro dan tidak

1:17:16bisa jadi client island

1:17:18tadi

1:17:20di parcel tadi contohnya

1:17:22saya lihat

1:17:24di server

1:17:26component nya dia pakai

1:17:28ts kalo di

1:17:30salah kebalik ya

1:17:32tsx

1:17:34kayaknya ada perbedaan itu deh tadi

1:17:36kayaknya yang client side

1:17:38coba buka tadi

1:17:40z tadi

1:17:42action nya server side component

1:17:44dia pakai ts

1:17:46action.ts itu kan server side

1:17:50ini yang tidak ada component

1:17:52react, kalo yang ada server yang ada

1:17:54component react pake tsx

1:17:56kalo ini cuman

1:17:58murni javascript atau typescript aja

1:18:00javascript biasa ya

1:18:04ya ga perlu x nya

1:18:06sorry ga jadi, salah-salah

1:18:08ini kan yang tadi kita bahas ya

1:18:14ya

1:18:16since doesn't have

1:18:20use any client or server

1:18:22it could be imported

1:18:24on either side

1:18:26if you import from server world it act

1:18:28like an astro component

1:18:30but if you import

1:18:32from client world

1:18:34client island

1:18:36nah kalo di rsc stuff imported

1:18:40from server world

1:18:42akan berjalan di server

1:18:44nah tuh you'll be first to cut a door

1:18:50with use client

1:18:52put a blessing

1:18:54and a curse

1:18:56cut a door ini maksudnya apa ya

1:19:00iya maksudnya shortcut

1:19:02and stuff

1:19:04kalo ada hal-hal yang

1:19:06tidak bisa jalan di salah

1:19:08satu, jadi kalo misalnya

1:19:10ada suatu

1:19:12fungsi atau kode yang jalan

1:19:14di dua-duanya ga masalah, tapi kalo misalnya

1:19:16ga sengaja misalnya

1:19:18yang cuma jalan di client atau jalan di server

1:19:20itu kan bakal bisa

1:19:22build error kan

1:19:24jadi use client

1:19:26use client semua

1:19:28ini mental modelnya yang

1:19:30agak susah nge-switch ya

1:19:32antara server sama client ya

1:19:34dimana nih lagi di mana nih

1:19:36lagi di client apa lagi di server ya

1:19:38kodingnya sama-sama aja nih mirip-mirip

1:19:40kalo koding kode yang pas disitunya

1:19:42langsung masih agak gampang ya

1:19:44tapi kalo udah import mengimport

1:19:46belom kalo third party library

1:19:48itu mulai pusing itu

1:19:50betul-betul

1:19:52masalahnya kalo di satu file itu gapapa

1:19:54tapi ini sudah di dalam-dalam file yang lain

1:19:56iya

1:19:58sudahlah kita pake htmx aja gimana

1:20:10hahaha

1:20:12ya aja bereskan

1:20:14ya aslo kalo usah htmx

1:20:16udah bisa ya

1:20:18hahaha

1:20:20pada bingung-bingung

1:20:22maling ke htmx aja gimana

1:20:24hahaha

1:20:26pusing ya

1:20:28aduh

1:20:30jadi

1:20:32eksplorasi kita malam ini

1:20:34berhasil

1:20:36apa ya berhasil sedikit

1:20:38mendapat gambaran tapi kok

1:20:40malah engga nunakan ya

1:20:42mendapat gambaran setelah dapet gambaran

1:20:44jadi oh yaudah nanti dulu aja deh

1:20:46kalo saya engga oin ke

1:20:48setelah dapet gambarannya

1:20:50biasa kan kita jadi

1:20:52excited nih jadi pengen coba

1:20:54gini dapet lo

1:20:56nanti dulu deh

1:20:58hahaha

1:21:00ini malah jadi justify ya nanti aja

1:21:02yang penting paham inti-intinya aja

1:21:04tapi yaudah nanti aja

1:21:06saya udah paham kulitnya nih

1:21:08kalo mau dalami ya tunggu

1:21:10ada projectnya aja dulu

1:21:12tunggal ada case nya

1:21:14sebutuhannya baru

1:21:16misalnya ada kesempatan

1:21:18bisa pake

1:21:20RSQ sekalian kita

1:21:22ga terlalu seambisius itu kalo misalnya projectnya

1:21:24misalnya orangnya banyak reboot

1:21:26atau deadline nya mepet

1:21:28ya jangan sol-sol enteng

1:21:30engga mau kalo deadline mepet gue engga mau pake

1:21:32hahaha

1:21:34ya ini mau buat kamu santai banget aja

1:21:36hmm

1:21:38jadi balik lagi ya

1:21:40astro for the win

1:21:42tapi bakal kangen sama

1:21:44ekosistem react

1:21:46kalo moding astro

1:21:48kita client side nya react semua aja

1:21:50client side nya react juga tetep

1:21:52ga bantu ya, ga bantu menghilangkan

1:21:54ke kangenan

1:21:56oh begitu muka astro

1:21:58aduh kangen react

1:22:00saya suka react

1:22:02wah ini fans sejati ya

1:22:04prakteknya bakal begitu kalo ada

1:22:08justify dimana-mana

1:22:10iya jadi

1:22:12iya

1:22:14kedepannya ada

1:22:16ada yang ngobrolin spell

1:22:18engga kita udah

1:22:20ngomong-ngomong, kita udah pindah ke astro

1:22:22sorry ya

1:22:24astro client side nya swell

1:22:26tetep aja samung-sambungin

1:22:28client side komponenya swell

1:22:30tapi pake astro

1:22:32iya

1:22:34kita udah jarang ngomongin spell

1:22:36salah satunya gara-gara ya astro juga

1:22:38yang menyebabkan kita jadi

1:22:40berpindah

1:22:42kan soalnya dulu

1:22:44iya

1:22:46dulu pertama kali kenal eka

1:22:48ngobrol apa di

1:22:50meet up nya spell malah ya

1:22:52kita sama-sama ngulik spell tuh ya

1:22:54sekarang malah ga pernah

1:22:56ngobrolin spell tuh ya

1:22:58htmx

1:23:00htmx lah

1:23:02iya

1:23:04yang di bangkok

1:23:06jazz

1:23:08pake htmx

1:23:10kayaknya separation of concern nya

1:23:12lebih mending disitu ya

1:23:14dengan otak

1:23:16yang sudah terbiasa

1:23:18membedakan antara

1:23:20server sama client

1:23:22kalau di gabung-gabung malah jadi pusing

1:23:24di htmx mesti harus pake web socket

1:23:26atau dia pake

1:23:28resapi

1:23:30pake resapi bisa

1:23:32bisa

1:23:34misalnya server nya ga bisa web socket

1:23:36contohnya

1:23:38bisa-bisa

1:23:40iya justru

1:23:42basic nya itu

1:23:44kalau web socket justru harus pake extension malah

1:23:46by default nya dia pake

1:23:48resapi

1:23:50tapi jenis respons nya

1:23:52apa sih html ya

1:23:54iya

1:23:56tapi html masih potong doang

1:23:58potong doang

1:24:00yang dibutuhkan aja

1:24:02apa nih

1:24:04kalau pake nsds semacam di nsforce

1:24:06makin kesini makin sulit ngoding

1:24:08kecuali pegang legasi app

1:24:10jadi dipaksa untuk ke app router ya

1:24:12iya halus

1:24:14sebenernya kita ga usah update aja

1:24:16solusinya misalnya kita pake yang 12

1:24:18di lock ya

1:24:20nah di lock

1:24:22itu tadi

1:24:24kecuali kita punya waktu dan tenaga

1:24:26lebih buat ngulik dengan segala

1:24:28konsekuensinya

1:24:30kecuali yang pegang legasi app

1:24:32saya sarankan berpindah ladar

1:24:34nsds

1:24:36ngudah ganti yang lain aja

1:24:38apa? ten stack ya

1:24:40nah tuh

1:24:42baru kita bahas

1:24:44ten stack yang besar

1:24:46ten stack menariknya

1:24:48rastro ada

1:24:50rastro ada

1:24:52spell kit masih ada

1:24:54spell kit tapi versel-versel juga

1:24:56phoenix apa lagi

1:24:58kalau phoenix kan udah bukan nilai script

1:25:02biar phoenix apa?

1:25:04sama satu lagi

1:25:06yang pernah kita bahas satu lagi framework

1:25:08yang cukup lengkap apa?

1:25:10redwood udah pivot

1:25:12jadi dua itu

1:25:14sekarang udah pivot

1:25:16jadi dua

1:25:18yang legasi itu

1:25:20redwood graphql atau semacamnya

1:25:22terus yang baru di desain kursus

1:25:24untuk cloudflare

1:25:26itu namanya

1:25:28redwood sdk

1:25:30iya itu

1:25:32udah potensi

1:25:34fedor lock-in juga

1:25:36jadinya

1:25:38oh sangat, kalau itu dari awal emang bilang

1:25:40desain for cloudflare workers

1:25:42kalau buat kerjaan itu

1:25:44nggak bisa dapet buy-in deh

1:25:46pake redwood apapun sebenernya

1:25:48kalau alternatifnya nsds yang establis

1:25:50ya itu pake basically

1:25:52yang kayak laravel

1:25:54tetep kalau buat

1:25:56kerjaan nsds itu kayaknya

1:25:58yang relatif gampang dapet buy-in ya

1:26:00orang udah familiar

1:26:02atau alternatifnya ya itu

1:26:04laravel tapi front-endnya ya

1:26:06silahkan pilih, pake ryak bisa

1:26:08swell bisa, view bisa

1:26:10jadi saran saya itu ya

1:26:12cobalah pake yang namanya

1:26:14hype development

1:26:16jadi ada sesuatu yang baru

1:26:18personal project lah

1:26:20oh personal project beda silahkan

1:26:22kalau project yang sudah

1:26:24setengah jalan cabut dari company itu

1:26:26terus tambahin di link-in

1:26:28oh itu bukan hype development namanya

1:26:30link-in driven development

1:26:32tapi banyak musim gitu berarti

1:26:36tiap tinggalin suatu

1:26:38tempat kerja, dimusimin semua

1:26:40tim yang harus maintain kerjaannya

1:26:42hati-hati di blacklist ya

1:26:44hati-hati di blacklist

1:26:46itu enemies

1:26:48driven development

1:26:50jangan, jangan lakukan itu ya

1:26:54malah sebaliknya justru harus

1:26:56baliknya ya

1:26:58tapi kalau pake yang lama terus kapan

1:27:00majunya?

1:27:02kan jarang ini misalkan nih

1:27:04pas di interview kan

1:27:06apa achievement di kantor sebelumnya

1:27:08di kantor sebelumnya saya berhasil

1:27:10reflektor dari microservice

1:27:12menjadi monolith

1:27:14jarang kan belum ada kan? unik itu

1:27:16yang ada dari monolith ke

1:27:20microservice ini kita balik

1:27:22pas siap pergi ternyata

1:27:24emang butuhnya monolith

1:27:26jadi teman sendiri harus ngerepak

1:27:28orangnya cuma sedikit, kalau pakai microservice

1:27:30capek-capekin aja, jadi banyak

1:27:32birokrasinya, mendingan monolith

1:27:34gitu

1:27:36iya, tenstack

1:27:40tenstack kayaknya santai banget ya

1:27:42kita bahasin kemarin ya

1:27:44design-nya kan keren banget

1:27:46tapi kita belum bahas yang startnya ya

1:27:48kita belum bahas

1:27:50tapi kemarin bahas

1:27:52tenstack ecosystem atau tenstack universe

1:27:54ecosystem, universenya

1:27:56si, siapa namanya? tenner

1:27:58mas tenner, ternyata yang bikin namanya

1:28:00tenner tadinya, apalagi

1:28:02pantai itu karena tending di pantai

1:28:04ternyata bukan

1:28:06blade plus jquery, blade ini berarti

1:28:08laravel ya

1:28:10templatingnya laravel

1:28:12laravel ya, plus jquery ya

1:28:14lebih bagus dari

1:28:16ya kalau mau yang modern sedikit, pakai apa?

1:28:18inersia

1:28:20inersia, blade tambah jquery

1:28:22tambahin backbone

1:28:24backbone masih di develop ya?

1:28:28harusnya masih

1:28:32kayak gak segampang itu ya library lama mati

1:28:34jquery-nya aja

1:28:36masih hidup

1:28:38jquery-nya

1:28:40jquery-nya

1:28:42jquery-nya masih hidup

1:28:44cuman kan

1:28:46kalau project baru, masih ada yang

1:28:48jquery

1:28:50masih

1:28:52jquery kan sudah mau ini kan

1:28:54sudah lagi di develop

1:28:56lagi kan, sudah jquery berapa sekarang?

1:28:58ya, pertanyaannya

1:29:00temen-temen yang pakai jquery

1:29:02itu jquery-nya dipakai buat apa?

1:29:04buat query selektor doang

1:29:06atau yang lain

1:29:08kalau query selektor dulu udah

1:29:10bisa funny lah

1:29:12oh masih, backbone masih

1:29:14bulan lalu masih

1:29:16di commit, bulan lalu

1:29:18luar biasa ya

1:29:20bakal lucu sih kalau akunnya jquery

1:29:22bilang "kami akan menunjukkan jquery

1:29:24server component"

1:29:26itu baru keren tuh

1:29:28stress semua

1:29:30jquery server component

1:29:32boleh tuh, buat ini

1:29:34april mob

1:29:36april mob

1:29:38ya masalahnya kita gak manage

1:29:40akunnya jquery

1:29:44oh itu, minta tolong mas Arya aja

1:29:46mas Arya kan dia ada di

1:29:48itu kan, git hub

1:29:50organisasinya jquery kan

1:29:52ya se ide buat

1:29:54apa for yang april mob

1:29:56jquery server component

1:29:58jsk

1:30:02jsk

1:30:04oke lah

1:30:06voting, voting, voting

1:30:08oh iya, voting

1:30:10minggu depan kita bahas apa

1:30:12ada ide, ada ide

1:30:14coba cek dulu

1:30:16ada satu svel sebelumnya

1:30:18kita belum pernah bahas

1:30:20kumpas to tas astor

1:30:22belum ya, kita baru sebut

1:30:24server, island architecture

1:30:26belum benar-benar deep ya

1:30:30belum benar-benar deep

1:30:32teman-teman yang mau

1:30:34apa, komen atau mau

1:30:36ide

1:30:38boleh ke kesana.in/

1:30:40terus ngobrolin web, nah yang punya kesana.in

1:30:42ada disini

1:30:44terus tiba-tiba yang ngobrolin web

1:30:46kita di alihkan ke google

1:30:48di alihkan ke google

1:30:52di robah isi ininya

1:30:54dari targetnya

1:30:56tuh, yang paling atas masih

1:31:00masih Irvan juga

1:31:02web security kita belum lanjut ya

1:31:04yang part 2

1:31:08hmm, apa nih

1:31:10udah habis keling sih

1:31:12kita kan mau ada

1:31:14rencana bulan juni nanti

1:31:16sama mas Donny

1:31:18dokumentasi

1:31:22dokusaurus kan

1:31:24pernah bahas dokusaurus

1:31:26tuls-tuls dokumentasi ya berarti ya

1:31:28lebih ke tulsnya ya

1:31:30oke, kita bikin dulu

1:31:32pollingnya

1:31:34topik minggu

1:31:36depan

1:31:38tools

1:31:40dokumentasi

1:31:42dokumentasi

1:31:44terus yang kemarin tuh CLI, mau CLI

1:31:46oh iya CLI

1:31:48apa

1:31:50CLI tools ya

1:31:52CLI design

1:31:54and development

1:31:56sedap

1:31:58design and development

1:32:02apa lagi, perlu itu

1:32:04svel

1:32:06atau astro aja lah

1:32:10astro ya

1:32:12belum update lagi tentang astro

1:32:14astro atau 10 stack

1:32:16start

1:32:18apa ya

1:32:22lempar aja dua-duanya

1:32:24dua-duanya

1:32:2610

1:32:2810 stack

1:32:30start

1:32:32polling

1:32:34kita kasih waktu

1:32:36dua menit

1:32:38dua menit

1:32:40lama-lama ya

1:32:42tos dokumentasi

1:32:44oke

1:32:46itu sambil bagi kodokupon

1:32:48tadi siapa tau ada yang kelewati

1:32:50awal kan

1:32:52benar-benar kodokupon

1:32:54jangan lupa teman-teman

1:32:56kalau ada yang mau beli, ya mau beli

1:32:58mau beli

1:33:00kalau mau coba reaksor

1:33:0210 hosting

1:33:04bisa gak ini

1:33:06ini

1:33:08distortnya berapa tadi, kayak 10% ya

1:33:1010%

1:33:12ya

1:33:14tapi ini baru

1:33:16hosting ya, hosting aja ya

1:33:18kalau yang VM dan lain-lain belum

1:33:20nanti kita coba

1:33:22ngego-ngego lagi ya, mudah-mudahan dikasih ya

1:33:24ada cloud VPS-nya juga kan ya

1:33:28ada

1:33:30lengkap sebenernya

1:33:32nggak dapet discount ini

1:33:34belum-belum

1:33:36nah

1:33:38Mas Irfan

1:33:40lagi senang ngoding

1:33:42pakai kursor

1:33:44makin bodo

1:33:46bisa ya

1:33:50kita makin bodo ya

1:33:52bukannya

1:33:54kita harus ngereview

1:33:56accept all, YOLO mode

1:33:58ya enggak lah, kalau itu kan track coding

1:34:00kalau ini kan kita tetap harus review

1:34:02sebagai seorang developer

1:34:04yang baik dan benar

1:34:06kecuali

1:34:08kalau udah kepepet

1:34:10cuma

1:34:14apa ya, kita kayak

1:34:16lama-lama mungkin kita kehilangan skill ngetik

1:34:18yang satu-persatu, mungkin

1:34:20kalau konsepnya kita paham

1:34:22tapi kita ngetik satu-persatu

1:34:24export function

1:34:26bla-bla-bla itu jauh-jauh

1:34:28lama-lama lupai caranya

1:34:30tapi kita tahu prinsipnya

1:34:32function, argument

1:34:34apa, mendefinisikan function

1:34:36itu bisa ising atau

1:34:38apa sih

1:34:40jauh-jauh lama-lama mungkin 5 tahun ke depan kita

1:34:42kayak gitu tuh

1:34:44gue juga lagi pakai windsurf ini

1:34:46tapi buat mainan doang, bukan buat kerja

1:34:48badusan tadi soalnya kalau nonton

1:34:50ini nya

1:34:52karena satian adalah

1:34:54iya, copilot open source

1:34:56iya, copilot open source kan

1:34:58dan sudah

1:35:00bundle di dalam corenya

1:35:02vscode

1:35:04jadi ga perlu install extension

1:35:06tapi

1:35:08tetep harus ada

1:35:10kita harus punya subscription ke service nya kan

1:35:12iya, tapi ada mereka

1:35:14yang freemium nya kok, ada yang freemium nya

1:35:16service nya

1:35:18tapi ini

1:35:20kalau ada, bakal ada ini gak sih

1:35:22bakal ada

1:35:24apa namanya, bakal ada

1:35:26isu kita ketergantungan

1:35:28dengan service-service seperti ini

1:35:30gak sih, misalkan ya kalau

1:35:32mas Irvan mungkin bisa lah ya

1:35:34subscription cursor gitu

1:35:36atau teman-teman di kantornya

1:35:38dapet lah, di kantornya dapet, begitu pindah

1:35:40kantor gak dapet

1:35:42jadi ya, ya maksudnya

1:35:44kalau kita

1:35:46seperti kebiasaan dibangun

1:35:48interview masuk kerja

1:35:50kita gak boleh pakai AI coding

1:35:52ayo

1:35:54ya

1:35:56kalau sekarang belum kerasa sih

1:35:58tapi kalau kita terus-terusan gitu

1:36:00terus 5 tahun depan, gimana ya

1:36:02belum banyak

1:36:04belum, kita belum bahas

1:36:06AI assisted coding sih

1:36:08mas Irvan, kita bahas AI secara keseluruhan

1:36:10ya kan

1:36:12udah belum

1:36:14belum kan, ini salah satu topiknya

1:36:16oh ya, topiknya ya

1:36:18DevFace-nya kan pernah bahas

1:36:20AI

1:36:22syntax

1:36:24highlight, markdown

1:36:26sudah pernah dibahas

1:36:28apa ini maksudnya

1:36:30kayak CK JS gitu ya

1:36:32benar gak sih

1:36:34atau prism, prism ya

1:36:36prism JS gitu

1:36:38prism broad

1:36:40ya, prism broad

1:36:42kita pakainya CK, saya juga kemarin

1:36:44baru ganti itu di blok

1:36:46akhirnya pakai CK

1:36:48lebih banyak juga

1:36:50languages yang di support malah

1:36:52ternyata

1:36:54kalau dulu prism itu harus ada client side

1:36:56hydrate-nya biar bisa

1:36:58ya pokoknya highlighting-nya itu dari client side

1:37:00kalau CK dari dulu udah bisa

1:37:02server render, gak tahu

1:37:04tapi sekarang prism juga bisa

1:37:06oke

1:37:08ini kayaknya temen-temen banyak yang

1:37:10tertarik astro

1:37:1244%

1:37:14menginginkan astro

1:37:16cepet banget lagi, salah satu yang cepet banget

1:37:20terakhir pakai astro 2

1:37:22sekarang udah 5.7

1:37:24wow

1:37:26kita mau bahas astro dari

1:37:28sudut pandang

1:37:30mananya nih

1:37:32konsep, struktur

1:37:34konsep kan udah pernah ya

1:37:36maksudnya tujuannya bagaimana cara kerjanya

1:37:38lifecycle-nya kan

1:37:40langsung demo

1:37:42nyoba-nyobain ya

1:37:44biar title-nya beda sama yang

1:37:46ngeblowin astro dulu

1:37:48nanti cari celahnya deh

1:37:50episode 95

1:37:52nah ini udah berapa tahun lalu

1:37:54tapi ya, udah lewat berapa tahun

1:37:56oh kita coba yang

1:37:58terparti

1:38:00first partinya

1:38:02yang kayak data base

1:38:04kan dia ekosistemnya lumayan ya

1:38:06mirip-mirip

1:38:08paravel gitu kan ya

1:38:10ada, atau denu

1:38:12kayak denu kan, jadi ada

1:38:14komponen-komponen yang

1:38:16tidak teringas secara default, tapi

1:38:18disupport oleh si astronya sendiri

1:38:20eh, kita pernah bahas

1:38:22caching ga sih, caching

1:38:24pernah ya, cache, pernah

1:38:26pernah, episode 78

1:38:28oh

1:38:30heka hapal

1:38:32nah, engga, buka aja box-nya

1:38:34terus research

1:38:36typography juga pernah kan ya

1:38:38kile, pernah

1:38:40banyak lho

1:38:42kayaknya kita udah

1:38:44berapa tahun

1:38:463 tahun, episode 11

1:38:48ngobrolin phone

1:38:50oke

1:38:52kita tutup ya

1:38:54jadi astro ya

1:38:56dia ya astro boy, polennya kita

1:38:58tutup, astro boy

1:39:00astro boy

1:39:02oke, kalo gitu

1:39:04sekian untuk malam ini

1:39:06terima kasih banyak buat semuanya

1:39:08apa nih, masih run

1:39:10kalo ada yang punya subscription AI

1:39:12mungkin bisa explore bagaimana membantu programmer

1:39:14kapan-kapan

1:39:16ide topic itu

1:39:18AI assisted development

1:39:20lagi nunggu ada

1:39:22ini, kayak

1:39:24sharing account netflix, atau sharing account

1:39:26sharing account kursor

1:39:28sharing account windsor

1:39:30pasti ya

1:39:32pasti ya

1:39:34terus habis dari

1:39:36habis dari sini, langsung ada yang bikin

1:39:38engga, habis dari ini, dari sini

1:39:42gue nge-search sih, sharing account windsor

1:39:44ya

1:39:46mungkin kita belum bahas

1:39:48secara spesifik mas

1:39:50Irfan

1:39:52kita bahas pengalaman

1:39:54waktu yang apa

1:39:56yang kemaren

1:39:58ada website, yang saya bikin website-nya

1:40:00itu pakai AI

1:40:02dan semua saya cobain

1:40:04mulai dari windsurf

1:40:06terus copilot

1:40:08terus yang apa

1:40:10iDAR

1:40:12engga, charge bt justru engga

1:40:14terus cloud code

1:40:16dicobain semua, di satu project itu

1:40:18aslinya ya lumayan

1:40:22lumayan menyenangkan

1:40:24experience-nya menyenangkan

1:40:26jadi ya lumayan-lumayan

1:40:28ya itu tadi yang di post

1:40:30masih fun, happy

1:40:32tapi makin bego

1:40:34happy tapi makin

1:40:36bego, iya

1:40:38sama aja kayak dulu, dulu itu sempet

1:40:40waktu google baru-baru

1:40:42populer, itu ada paper

1:40:44yang menyebutkan google make us stupid

1:40:46karena dulu bukan encyclopedia ya

1:40:50karena orang dulu menghafal

1:40:52buku pintar

1:40:54inget engga, ada yang punya buku pintar engga

1:40:56jaman sb

1:40:58rpul

1:41:00rpul, buku pintar

1:41:02ya itu sama aja

1:41:04jadi kayak mesin pencari itu ya

1:41:06jadi mendistrupsi proses

1:41:08cara kita berpikir

1:41:10sama juga dengan AI

1:41:12mendistrupsi cara kita berpikir, jadi

1:41:14jangan sampai AI itu menggandikan proses berpikir kita

1:41:16ya itu yang bikin kita makin buruk

1:41:18tapi kan kita harus menanyakan pertanyaan yang betul

1:41:20jadi kita pintar

1:41:22cari pertanyaan

1:41:24makin kita ngepromnya

1:41:26makin ngepromnya

1:41:28efektif, efusien

1:41:30makin bagus hasilnya kan

1:41:32kita jadi jago ngeprom semua

1:41:34paling tidak kita bisa

1:41:36jago komunikasi lah

1:41:38bisa mengkomunikasikan apa yang ada di pikiran kita

1:41:40kita wujudkan dalam bentuk prom

1:41:42dan si AI nya bisa

1:41:44mengerti dan hasilnya sesuai ekspektasi

1:41:46itu yang susah

1:41:48dulu kuliahnya

1:41:50sustainable

1:41:52waktu kerja luntang hantung

1:41:54akhirnya nggak kepake

1:41:56akhirnya full time, jadi programmer

1:41:58terus tadinya nggak pikir

1:42:00kuliah, mikir dan belajar

1:42:02cara berkomunikasi

1:42:04dalam bahasa manusia

1:42:06nggak kepake karena sekarang

1:42:08komunikasi dengan bahasa asing

1:42:10sekarang full circle

1:42:12AI, prompting, kepake lagi

1:42:14oh oke, lumayan

1:42:16full circle lah

1:42:20itu ide yang bagus

1:42:22nanti kita coba

1:42:24diskusikan juga

1:42:26kita coba

1:42:28siapa tahu bisa kita bahas ya

1:42:30terima kasih semuanya buat ide-idenya

1:42:32dan komentar-komentarnya

1:42:34kita jumpa lagi minggu depan

1:42:36selamat malam, selamat istirahat, bye bye

1:42:50[musik]

1:43:20[musik]