Ngobrolin NextJS
Ringkasan Episode
Bantu KoreksiEpisode Ngobrolin kali ini membahas update terbaru dari Next.js 14 beserta berbagai kontroversi dan perubahan signifikan yang dibawanya. Diskusi dimulai dengan keluhan para peserta mengenai kecepatan update Next.js yang dinilai terlalu cepat, seringkali mengadopsi fitur React yang masih bersifat experimental sebelum stabil, yang menyebabkan breaking changes dan API yang deprecated dalam beberapa major version. Para peserta berbagi pengalaman kurang menyenangkan saat mengupdate versi framework, terutama dalam lingkungan produksi. Topik utama yang dibahas mencakup pengenalan Turbopack sebagai pengganti webpack yang menjanjikan performa lebih baik, Server Actions yang memungkinkan pemanggilan fungsi server dari client components, dan Partial Prerendering (PPR) untuk mengoptimasi rendering konten statis dan dinamis dalam satu layout. Kontroversi terbesar dibahas adalah perilaku caching by default pada Next.js 14 yang dianggap berbahaya karena dapat menyebabkan unexpected behavior, sehingga pada versi 15 caching akan diubah menjadi opt-in setelah mendapat protes dari komunitas. Diskusi juga menyentuh perbandingan Next.js dengan framework lain seperti Remix, Astro, dan pendekatan tradisional seperti Laravel + Blade, serta tantangan dalam memilih teknologi yang stabil versus yang selalu mengikuti perkembangan terbaru.
Poin-poin Utama
- •Next.js 14 hadir dengan fitur-fitur utama seperti Turbopack (bundler baru), Server Actions, Partial Pre-rendering (PPR), dan peningkatan pada self-hosting sebagai respons terhadap developer yang bermigrasi ke OpenNext.
- •App Router mengubah paradigma dari Pages Router menjadi server first di mana semua komponen dianggap server-side secara default, dan hanya komponen dengan direktif 'use client' yang akan di-render di client.
- •Masalah utama Next.js adalah update yang sangat cepat dan sering mengubah atau meng-deprecated API, sehingga developer sering kesulitan untuk keep up-to-date dan menghadapi breaking changes.
- •Sistem caching di Next.js 14 masih caching by default yang bisa membingungkan, namun di Next.js 15 akan berubah menjadi opt-in caching sebagai respons terhadap feedback dari komunitas developer.
- •Turbopack diklaim lebih cepat hingga 96% dibanding webpack dan dalam status RC untuk production, namun banyak developer yang masih ragu untuk menggunakannya di lingkungan production karena masih eksperimental.
- •Partial Pre-rendering (PPR) memungkinkan kombinasi antara shell/static content dan dynamic content dalam satu halaman, mirip dengan konsep Island architecture dan App Shell pattern di PWA.
- •Diskusi juga mencakup alternatif framework seperti Remix, Astro, Hono, Fresh (Deno), dan Elysia JS sebagai pilihan yang lebih stabil, serta konsep modern monolith menggunakan Laravel + Inertia.js untuk developer PHP yang ingin UI modern tanpa kompleksitas full-stack JavaScript.
Halo-halo-halo, selamat malam.
Selamat malam.
Ketemu lagi kita malam hari ini.
Selamat hari Selasa.
Seperti biasa, kalau hari Selasa itu adalah waktunya...
Waktunya...
Ngobrolin, weh.
Weh, weh, weh, weh, weh, weh, weh, weh, weh, weh, weh, weh, weh, weh, weh, weh, weh, weh.
Pada sibuk apa nih?
Karena saya habis sibuk...
Gue sibuk banget.
Astaga.
Sibuk apa? Sibuk apa?
Sibuk kerjaan.
Sibuk kerjaan banget.
Banget ya.
Biasa kan...
Kan, sudah memasuki ini kan ya?
Ini sudah memasuk Q...
Berapa ini?
Masih Q2, tapi Q2-nya mau habis.
Ampir tiga.
Iya, sudah hampir tiga kan.
Jadi banyak yang dipush.
OKR, OKR.
OKR.
Aduh.
Teman-teman sibuk apa?
Lagi ngulik apa gitu ya?
Lagi...
Lihat transkrip lengkap (2848 segmen lagi)
Tertarik ke...
Framework apa misalkan ya?
Dan seperti apa?
Judul kita, malam hari ini kita akan membahas...
Bukan membahas ya.
The Next Java Street.
The Next Java Street.
The Next Java Street.
Kita pernah beras Next Java Street nggak sih sebenarnya?
Sebelumnya?
Kayaknya pernah ya, Nextcom pernah ya kayaknya ya.
Yang tentang Turgopek dan lain-lain ya.
Iya, terus kemudian pernah yang sama...
React ID.
Frameworks.
Tuh, cocok nih lagi belajar Next.
Jadi bisa kita tanyain juga.
Karena...
Jujur kita penasaran banget sama...
Update terbaru dari Next.js.
Next.js 14.
Udah dinilang sebenarnya kan dari tahun lalu ya.
Akhir tahun lalu.
Tapi kita belum sempet...
Belum sempet catch up.
Makanya malam ini kita sempatkan untuk...
Cari tahu.
Kira-kira...
Update apa aja yang seru, apa yang menarik.
Karena kita juga belum tahu.
Tapi kita penasaran.
Karena...
Karena Next.js ini termasuk nilainya cepat ya.
Kayaknya geraknya cepat dan...
Ya, perkembangannya cepat sekali.
Kadang...
Apa ya...
Mungkin dibandingin ekosistem yang...
Tawas yang dulu.
Ini kayak tergolong ekstrim nggak sih?
Kayak dalam...
Dalam beberapa major version.
Atau apa?
Bukan ada API yang diperkekit.
Yang kayak dulu apa sih?
GetStaticSite.
Blah-blah-blah.
Jadi dulu mereka prescribe...
API-nya begini-gini-gini.
Dalam 2-3 major update.
Oh nggak.
Itu udah diperkedit.
Sekarang kita punya yang baru.
Kayak geraknya lumayan cepat sih.
Kalau menurut optimis gue.
Dan ini satu lagi dilemanya.
Apa sih?
Dulu itu sebelum jadi full-time web dev.
Bayangin.
Enak banget kerja jadi developer.
Tiap hari bisa ngulik.
Bisa ngulik.
Apalah framework baru atau apa.
Sekarang terlalu banyak yang diulik ya.
Terlalu.
Waktu udah kerja, ya kan harus ngikutin kebutuhan di kerjaan.
Dan nggak bisa gonta-ganti.
Saya enak ngulik dulu juga kan.
Dan kadang stack-nya yang kita nggak terlalu suka.
Tapi ya harus adjust.
Nah, giliran mau ngulik yang baru, yang seru, yang flashing new things.
Hah, udah capek.
Jadi nggak sempet akhirnya malah.
Tapi ada pengalaman nggak sih.
Upgrade versi dari misalnya Next.js.
Berapa ke berapa.
React berapa ke berapa itu.
Punya nightmare nggak sendiri nggak sih kalian.
Atau teman-teman disini yang nonton punya nightmare nggak sih.
Mengupdate major version itu.
Backward compatibility nggak.
Atau breaking change.
Belum lagi incompatibility.
Gimana, pernah ini nggak?
Karena pengalaman saya banyakan ngajar.
Pernah punya pengalaman buruk ketika ngajar React Native.
Oh no. Kenapa gitu?
Jadi pagi itu masih versi sekian.
Waktu sehari sebelumnya udah dicoba, demo-nya lancar.
Begitu siang, itu nggak jalan.
Ternyata ada upgrade.
Pas siang itu.
Begitu dilihat dokumentasinya itu udah berubah versi.
Dan nggak bisa jalan.
Nggak bisa dilock version.
Tapi itu kan kalau create new React Native app gitu ya.
Kalau pakai command kayak gitu kan yang muncul yang baru.
Iya.
Kan kalau misalkan demo di kelas gitu kan.
Modulnya dijalani gitu ya kayak create new app gitu ya.
Betul.
Kalau kita bikin dari awal kan nggak mungkin kita lock kan versinya kan.
Jadi itu pengalaman yang lumayan apa ya.
Kok nggak jalan? Kaget kan? Panik gitu kan.
Ayo kita lihat sama-sama dokumentasinya.
Perasaan tadi pagi masih versi segini.
Soalnya ini nya demo-nya itu pagi terus dilanjut siang.
Pas pagi jalan siangnya udah nggak jalan.
Itu sung banget sih.
Kalau produk sih belum ya.
Biasanya sudah terbiasa nge-lock version tadi.
Jadi kalau ketika di package JSON itu udah nggak pakai carrot lagi.
Udah nggak pakai yang tanda rumah begini kan.
Udah dihapus semua. Udah lock version semua.
Jadi cenderung lebih aman.
Pakai carrot aja yang cacing. Jadi cuma patch version aja.
Ya yang minor.
Halo-halo.
Kalau Eka ada nggak pengalaman?
Nggak pernah sih.
Soalnya kalau tempat kerja nggak pernah.
Karena emang apa ya kayak ati-ati banget kayak harus bilang.
Dan pasti yang lain juga ingetin beneran stand by nge-check dulu semua.
Terus ada kayak end-to-end test.
Jadi kalau yang minta update major version.
Itu beneran cuma harus karena security reason.
Bukan karena iseng atau pengen.
Sama ya emang harus ditungguin.
Dan semua yang lain juga kayak sambil ngerjain yang lain.
Tapi stand by ngebantuin kalau ada apa-apa.
Jadi nggak pernah kenapa-napa yang ekstrim.
Dan emang kayak discourage sih.
Even security pun ya kayak harus beneran conscience banget.
Nah ini beneran udah nggak ada security update nih.
Penting banget kayak digituin baru update tersebut.
Tapi kalau personal, pribadi sih sering.
Tapi kan cuma kayak starter slide atau template.
Atau apalah coba-coba doang.
Dan dulu tuh nggak ngerti, belum ngerti bedanya.
Apa sih yang lancip begini sama yang begini?
Carat sama...
Carat sama apa ini namanya?
Tilde.
Bahasa sebutnya cacing.
Kalau cacingnya tiduran begini dong jadi dust.
Ya gitu.
Namanya dulu belum itu sama sekali sih.
Sampai pernah...
Dulu pernah apa ya yang...
Ya paling ketikungnya cuma incompatible.
Antar...
Ya antar versi lah.
Tapi intinya belum pernah yang patah.
Kalau saya barusan tuh...
Sering, sering, sering.
Kenapa, kenapa?
Gimana ceritanya?
Ya barusan ini, barusan kayak 2 hari lalu.
Which is nggak bisa saya solve.
Jadi ah sudahlah bodoh amat.
Stay aja lah disitu.
Mau gimana lagi?
Jadi di downgrade versinya?
Ya udah di lock aja disitu dulu.
Karena nggak keburu waktunya.
Jadi kayak memang nggak punya waktu.
Maksudnya tadinya iseng aja...
Coba update siapa tahu.
Lebih cepet atau lebih bagus gitu ya.
Setelah nyoba nge-stack 2 jam...
Ah bodoh amat dah.
Move on.
Kasusnya itu kayak YJS ya.
YJS framework itu buat collaboration editing.
Dia si apa?
Conflict Resolution Data Type.
CRDT ya.
Jadi saya ada server side-nya.
Pake YJS.
Tetapi YJS-nya ini...
Dijalankan pakai V8.js.
Jadi bukan...
Bukan pakai node.
Ya pakai node sih jalannya.
Cuma bukan pakai node server.
Jadi pakainya node runtime yang dari V8.js.
Yang dari PHP.
Jadi pakai PHP ngerunning node.
Sebagai extension.
Bisa.
Namanya V8.js.
Jadi PHP extension untuk ngerunning node.
Di PHP server.
Di PHP runtime bahasanya.
Anyway.
Tapi V8.js ini kan...
Sesuatu teknologi yang...
Nggak di maintain lagi.
Jadi banyak hal-hal yang...
Yang...
Kayak IS module itu nggak jalan.
Atau TypeScript itu nggak jalan secara module.
Ya module nggak jalan. Harus di-compass sebagai...
Common JS.
Nah YJS-nya ini...
Nge...
Versi upgraded...
Versionnya 36-37 gitu.
Dia ubah ke TypeScript semua.
Usah lah bukan ke TypeScript.
Dia mulai pakai Type.
Type system.
Ya kan? Type system.
Type-nya ditaruh mana?
Kayak ambient gitu, DTS.
Ya apa? Disikunya beneran.
Nah kalau disikunya kodanya berarti kan harus...
Di kodanya.
Aduh harus sih...
Dan saya nge-compiler pakai roll-up.
Karena nggak mau ribet.
Ke... Cuma ke Common JS.
Jadi cuma kayak...
Tapi hasil compilenya nggak...
Nggak sempurna.
Yah... Nggak jalan.
Sebelumnya jalan. 36 jalan.
37 nggak jalan. Ya sudah lah.
Nyerah, nyerah.
36 dikasih komen huruf besar.
Jangan di-update. Nanti kacau.
Move on, move on.
Nanti gitu-gitu lah.
Dan...
Ini adalah salah satu ini ya.
Salah satu...
Sebab kenapa Next.js itu update-nya cepat.
Karena...
Dia...
Sangat tergantung kepada react.
Yang juga update-nya tidak kalah cepatnya juga.
Mungkin beberapa tahun ini...
Mungkin agak slowing down ya.
Agak pelan sedikit.
Tapi sebelum-sebelumnya itu...
Kencang banget. Gitu.
Kencang banget.
Ini ada kontroversi apa sih? Ya maksudnya mild.
Kontroversi yang Next.js itu...
Pakai react yang masih beta.
Pakai API yang...
API-nya react yang belum dipublish.
Sebetulnya.
Jadi mereka pakai duluan.
Kenapa ya kasusnya? Cuma...
Nggak tahu detail. Lupa detailnya.
Bentar. Cari dulu.
Pokoknya ya itu tadi.
Dia emang keep up banget...
Sama perkembangan react. Dan bahkan react yang masih...
Fitur react yang masih beta pun dipakai.
Jadi ya salah satu...
Harusnya dia bagusnya...
Maksudnya...
Best practice-nya kalau...
Misalnya sesuatu yang belum nonjin...
Mungkin dikasih experimental gitu.
Iya.
Jadi apa bedanya...
Sama react ya?
Nah ini ada...
Artikel yang cukup...
Deep dive. Baca bareng aja.
Karena kemarin-kemarin pas...
Itu kayak, "Oh iya. Udah lah."
Maksudnya nggak rasanya penting buat...
Explore...
Kasusnya kayak gimana.
Is next.js...
Using unreleased experimental...
React feature.
Next.js...
Beloved...
Framework...
For server render.
Zoom in BTW.
Oh iya, sorry. Eh salah.
Salah zoom.
Reactain API itu apa?
Coba gue belum sempat nyoba.
Reactain API?
Apa? Coba itu.
Jadi kesini larinya?
Iya, iya.
Itu mesti penjelasannya. Itu kan di highlight.
In the upcoming next.js 14 release.
You can put that.
Try out.
Kita pengen taunya ini.
Pakai experimental kan?
Experimental.
Let you prevent a specific
object instance from
being passed to a client component
like a user object.
Only available inside
3rd server components.
Oke, berarti ini kayak
credentials atau apalah yang...
Security.
Security teams.
The controversy, the journey of next.js
into realm cutting edge technology
began with its 13th
release.
The team behind next
started incorporate feature that
were not yet officially included
in react stable release.
Jadi belum masuk stable,
udah dimasukin ke
next.js 13. Nah cuma
detailnya gimana tuh? Itu deflect
atau enggak, enggak tau ya. Belum dijelasin.
Misalnya react server
component belum masuk stable.
Blah-blah-blah-blah. Lalu
yang 14, Reactain
API.
This forward thinking decision
bahaya dong ya. Kalo misalnya
kalau ternyata enggak jadi atau
berubah, ya kan eksperimental.
Kan dia udah ngasih flag maksudnya
argument. Mungkin kalo dari perspektif
team next.js, ya
orang yang enable
experimental flag, itu kan
at their own risk ya. Siap tanggung
resiko. Nah
cuma kalo, ya itu kan ya.
Dalam hal apapun ada perspektif
A, B, C. Nah kalo yang protest kan
jadi kayak apa ya, kayak mainan banget,
bongkar pasang, ternyata nanti, oh
ternyata bukan kayak gini ya, berubah.
Oh, React juga ada
canary-nya sekarang.
Experiment
unstable.
Canary release channel.
Sampai detik ini, ya
betul. Belum stable ya.
Belum stable ya.
Berarti masih experimental
gitu server component.
Kita lihat nanti ya di
next 14 ya, tapi ini kita run
through dulu ya, tentang apa ini.
Ini kan tadi kan
1-4 tuh flow-nya
React canary ya, sebetulnya
penjelasannya.
Masih experimental, wow.
Coba pake
mendang-mending,
bisa gak di-summary ini?
Gak bisa.
Dia cuma bisa bilang mending pake
mcs atau remix.
Experimental release
Oh, pake nano-nano.
Gemini nano mana?
Gak ada disini ya?
Udah ada prom API belum?
Ada prom API soalnya.
Buka yang web UI aja lah,
jamunai.buda.com
suruh summarize
this article, what are the
important points.
Udah baca aja. Udah lah tanggung, the final
assessment. Udah, udah mau
kelar. At present
sedang menjadi
pioneer.
Nah, tuh kan paragraf 2, it's placed
under the experimental flag or property
in config file.
Iya, kalo misalnya mau
pake fitur
yang experimental
harus siap dengan
risiko. - Tapi ya bagus juga sih ya, Beka.
Bisa jadi ngetes,
membantu timnya react juga sih sebenarnya,
gak ya? - Iya, oh, oh.
Nah, kelinci percobaannya adalah developer
yang pake fitur itu. Jadi
maksudnya mungkin ada yang
agak... - Tapi kan ada juga yang
early adopter kan.
Jadi asal jangan diaktifkan
secara default aja.
- Iya, betul. - Betul, betul.
- Di saat kita install Next.js
13 itu gak include kan, kecuali
kalau kita mungkin 13.next
atau apa gitu mungkin. - Nggak
flag di confignya. Include
cuma gak enable.
- Oke. Mungkin
ini ada faktor si Next.js
nya merekrut beberapa
orang dari
tim react yang ada di Facebook
kan, pindah ke
Versel. Jadi dia tetap kontribusi
ke react.
Dan mungkin salah satu kerjaannya
adalah ini. Dia tahu ini eksperimental
tapi udah mau rilis misalkan. Dia udah punya
bocoran misalkan gitu. Yaudah kita
implementasi aja biar
kita duluan dibandingkan yang
lain gitu, jadi pionir gitu kan.
Mungkin, mungkin. - Saya
next.js, layangannya next.js siapa sih?
Yang sedupak? - Trymix.
- Yang head to head, trimix.
Dulu Gatsby, Gatsby-nya udah...
Gatsby-nya udah baik. - Trimix,
Astro...
- Yang head to head pake react.
- Oh yang pake react.
- Yang cukup besar remix doang ya
kayaknya sekarang. - Remix, ya.
Remix.
Astro kan bisa pake
react juga. - Astro bisa pake bukan react.
Bisa pake yang lain. - Bisa pake yang lain.
- Bisa pake all framework sama sekali.
Ya beda ya.
Nggak exactly head to head.
- Nasibnya
pemain next.js
tanpa farcell masih
ini nggak sih? - Pemain next.js tanpa
farcell.
Open... - Masih relevant nggak?
- Open next. - Open next
ini sebenarnya
dia solving problem
untuk supaya
apa namanya
si ininya tidak sulit
deployment-nya.
- Iya kan
farcell itu kan memang untuk deployment.
- Betul, betul. Bukan
ke arah
adu fitur sih.
- Ya justru open next
kan fiturnya ngikutin
aja kan, next aja. - Ngikutin aja.
- Jadi cuma perkara
deployment target atau
konfigurasi
layer confignya.
- Cuman agak gimana ya.
Jadi next
tergantung react.
Open next tergantung next.
Jadi ada 3
year gitu.
Terlalu abstrak jadinya.
Abstraksinya terlalu abstrak.
- Nah, tapi si open next ini nggak
punya opini sendiri kan. Maksudnya
kayak tentang routing lah misalnya.
Iya dia ngikutin aja kan. - Enggak, dia ngikutin aja
udah. - Iya itu
layer yang harmless sih.
- Dia mempersiapkan adapternya supaya
bisa pakai server-server
yang lain. - Yang lain, selain
farcell lain. - Karena
next.js by default ya karena
kepentingan
bisnisnya, dia nggak nyedian adapter.
Padahal sebetulnya kalau di
meta framework, ekosistem meta framework
lah. Meta framework lain, adapter
sekarang kayak udah common ya. Sweltkit
punya, Astro punya. Jadi kayak
plug and play mau misalnya target
informenya, node atau
versel atau Netlify atau apapun
itu. - Kenapa nggak dikit ya.
- Plakan dia punya ya versel.
Gimana sih.
- Konflik of internet.
Cuman maksudnya bukan perkara teknis
kan itu, perkara pure bisnis.
Nah tadi perkara... - Nggak ada yang
bikin ini ya?
- Apa-apa? - Oh si Open Next itu yang bikin adapternya.
- Open Next itu bikin
cuma nggak built-in kayak meta framework
lain, karena ya itu versel.
Ya udah, community bikin adapter.
Nah, ada lagi nih
perkara
next dan kontroversi. Sebenernya
nggak kontroversial banget juga sih. Cuma
maksudnya ini isu dengan default
behavior. Jadi
yang 13 kalau nggak salah
sebelum ini kan udah mulai app router-nya
udah stable ya, udah by default.
- Oh iya. Perubahan yang
cukup signifikan ya.
- Iya dan ada, itunya sih nggak apa-apa.
Cuma ada caching behavior.
Nah masalahnya
by default katanya cache dinyalain.
Itu kan agak bahaya buat
orang yang nggak tahu, nggak sadar. Nah
ini yang, lupa dari 13
atau 14 yang kayak gitu. Nah
terus sekarang baru yang
besok ini belum
rilis, 15 RC baru
caching-nya akan
disabled by default karena
pada protes.
- Oh yang ini itu yang
dikomplain sama
Mas Irfan Maulana ya
di Twitter itu sering
beberapa kali dia sempat komplain katanya
vets-nya
next itu
nggak murni.
- Bukan. - Di-cache ya, di-cache ya.
- Oh ini ya. - Mau ke-patch
dan ada caching behavior-nya.
Nah dan itu dia nggak bilang-bilang
kayak by default. - Nggak bilang-bilang.
- Kalau nggak salah bisa op.
Lupa deh, either bisa op out.
Atau ada konfigurasinya
di-vetch-nya sendiri yang kayak
ada argumen tambahan atau apalah.
Disable caching or something.
Cuma intinya
by default kalau kita cuma nge-vetch biasa
itu akan di-caching.
Ya hasilnya
bisa unexpected behavior
karena orang nggak sadar itu lagi
caching. Dan intinya cuma
maksudnya kan pada protest, ya udah
protest-nya didengar
di-release selanjutnya akan
dibuat
opt-in. - Opt-in.
Jadi kalau mau boleh,
kalau nggak mau
ya udah, gitu ya.
Pakai yang normal vetch ya.
- Kalau dipaksa kan jadinya
be neonated.
- Ya. Udah gitu
katanya kalau kita pakai Create
Next App itu berarti
secara anonimus data kita di-collect ya.
Dicatat ya.
- Data installasinya kan?
- Ya.
- 15. - 15 ya.
Tapi sebelum ke-15
mungkin kita ngomongin 14 dulu kali ya.
Ini udah ke-15 aja.
- 14 aja belum give up.
- Iya.
Jadi kita malam ini mau
tau update apa aja di
Next 14. Kayaknya beberapa teman-teman di sini
lebih update ya. Ada Rehan
di sini ya yang bilang dari
versi 13 sudah
apa namanya? Sudah caching ini.
Terus ada juga
Miauliet. Ini juga lumayan
update kayaknya. Nggak suka.
Remy soalnya
ada embel-embel dolar. Apa nih?
Embel-embel dolar itu kayak
PHP.
Kalau
saya sih suka dolar ya.
- Sebagai anak suet saya suka dolar.
Variable apa?
- Saya suka dolar.
Suka.
Singapura dolar juga suka.
- Euro.
- Euro oke.
- Rupiah juga suka.
- Yang dolar-dolar gimana ya.
- Ada ya yang bikin apa sih?
- RP gitu.
- Ada RP-nya.
- Buat apa?
Kalau untuk
SEO, NSTS bagus nggak bagus?
Salah satu kombulannya adalah SEO.
- Dia udah ada extension atau
hanya mengandalkan server
site rendering ya?
- Ya server site
SSR.
- Kan kalau site dulu mau implementasi
meta-metanya itu
pakai React Helmet dulu bahasanya.
- Oh itu mereka
sudah bisa pakai SSR.
Udah ada built-in.
Dan kelihatannya makin kesini.
Yang 13-14 ini
makin dimudahkan kok
buat misalnya ganti routing nih.
Soalnya ganti routing sekarang pakai filebase
yang cara baru itu lah.
Ngeganti head-nya,
update head-nya juga udah ada
API-nya dari mereka.
- Di versi 14,
yang pasti boosting performance.
Ini udah pasti ya.
Setiap update harusnya ada boosting performance.
Salah satunya adalah
Turbo Pack. Nah ini yang
salah satu yang...
Oh kurang ya?
Yang menarik.
Yang lumayan menarik.
Yang lumayan menarik Turbo Pack ini.
Tapi nggak tahu bisa apakah hanya
exclusive untuk NEX
atau bisa dipakai untuk umum.
Harusnya untuk umum ya.
Karena dari landing page-nya
seperti ini kan.
- Buat dev server juga, ya kok,
pakai Turbo Pack.
- Tapi di getting started-nya masih create neck apps.
Masalahnya. - Iya, belum bisa.
Apakah ini sudah bisa buat?
- Belum ada yang...
- Non-NEX? - Non-NEX.
Selain NEX, maksudnya.
Belum ada ini.
- Atau bisa dipakai buat framework lain?
- Iya, buat framework lain selain NEX.
- Nggak perlu framework.
Masalahnya hanya sekedar
mengopile.
- Iya, kayak VT.
- Iya.
Kayak VT. - Ada nggak di sini?
- Coba.
Ada Turbo Pack,
Turbo Repo.
- Ini apa? - Turbo.
- Belum kayaknya ya.
- Fender Embro system.
Ya mungkin kalau yang
jago build-tung,
ya cek aja code-nya kayak
di Oprek sendiri.
Mungkin bisa kali ya.
- Oh, bisa nih.
Bisa ini.
Ada install global.
Ada install global.
Terus Turbo Build.
Oh, udah bisa.
Getting started.
Start for example.
Assisting project.
Udah bisa, udah bisa.
- Ininya sama nggak
sama webpack?
- To existing project,
the assumption is existing
NEX.js project.
Eh nggak deh, bisa sama coba.
- Enggak, yang dari installing
aja nih udah langsung kan.
Terus abis itu masuk
ke sini, apps/docs, misalkan
Turbo Build. Bisa langsung kan?
Kayaknya udah bisa ya.
Tapi harus kita coba ya.
- Ada nggak ini?
Ininya Mas Riza, ada
ada ada apa?
Repo apa gitu? - Ada.
Repo mainan.
- Repo mainan. - Oh, DSF ya?
- Ya, apapun lah.
- Sample React App?
- Nggak usah.
Nggak usah react.
Yang apapun lah, yang JavaScript
yang perlu di-compile, TypeScript.
- JavaScript, ya. Ada.
Tapi boon.
- Eh, nggak apa-apa.
- Gak apa-apa ya.
Apa nih? Oh, kurang gede.
- Boon install.
- Boon install.
Global.
- Oh, dia pakai
global.
- Coba NPM.
- Oh iya, ini NPM.
Install global.
Harus global ya?
NPX aja.
- Yaudah. Coba NPX
Turbo Build.
- Oh, langsung gitu?
NPX Turbo Build.
- Ya, produsnya bisa dong.
Yang di-build apa?
- Yang isi directory.
- Gini kali.
- Dikit directory-nya dulu kali ya?
- Bukan.
Kita kan ada package JSON-nya.
- Itu kan project directory.
- Oh iya.
Ini?
- Iya, coba.
- Package JSON ya. Kita lihat ya. Isinya apa?
- Ada indexnya. - Isinya OHSDK.
- Iya, ada.
- Bitrock. Ada TypeScript.
Oke, ada DevDependency.
Boon.
Bisa nggak? Gak yakin bisa sih.
Tapi ya, oke lah. Kita coba ya.
- Harusnya ada stacknya, tapi coba aja lah.
- NPM.
Turbo Build.
Halo, Rahul.
- Halo. - Kesel sendiri.
Ngikutin Next.js. Kenapa, kenapa?
Keselnya kenapa?
- Karena cepat, karena berubah-ubah, karena...
Apa ya?
Seru-seru.
Seru tapi kesel.
- Mas Riza, itu main is
versi 1.1.0,
1.0.0, versi 1.1.4.
- Ini juga nggak tau apaan.
Ngeselin install aja.
"Pake Boon X ya?"
Oh iya, bener juga. Kenapa nggak pake Boon X?
- Oh iya.
- Maaf, kita...
- Ada ya?
- Iya, kita baru tau. Ternyata ada
Watashiwa.
Watashiwa Watashi.
- Kebiasaan, kebiasaan.
- Halo, halo.
- Halo.
- Old habit, old habit.
Oke, sambil kita
lihat ya.
Nah, ini yang pertama tentang
Turbo Pack.
Ada Mas Irvan, dia dipanggil tadi
langsung dalam.
- Iya, tadi kita bilang ngomongin
itu, patch yang
di-catch otomatis sama
Mas Irvany dateng.
Making things simpler.
- Itu
partial pre-rendering itu gimana sih?
Oh, masih eksperimental.
- Stable server action.
Ini bukan yang tadi ya?
Bukan server component ya?
- Bukan, ini yang kayak
form action itu loh. Form action
tapi kalau dari client, tapi bisa
manggil server side.
- This is basically
remote procedural, similar
to TRPC, but built into
Next.
- Oh.
- Tadi malah, oh
Next is learning course dari
itu resminya.
- Iya, ini learning course-nya juga baru.
Ya iyalah, baru. Orang baru update.
- Kayaknya berubah semua.
- Maksudnya platform-nya yang baru
gitu loh.
- Tapi memang salah satu
keunggulan
NSJS itu ya ini, learning
platform-nya bagus. - Iya, detail banget.
Kayak tadinya nggak bisa sama sekali,
abis itu jadi bisa. Tapi begitu bisa
muncul versi baru
yang EPK-nya beda.
- Jadi nggak
relevan lagi gitu ya?
- Bukan, ini sampai
12 lesson loh, wow.
Ini kita harusnya nanya ke
Mas Irvan nih, update apa aja nih, yang
Next.js, update apa aja nih.
Kita nanya, disini nanya.
- Udah selesai belum tuh? Turbo, turbo,
udah selesai belum? - Oh, turbo.
Turbo belum.
- Ada apa? Lama banget ya?
Kayaknya dia nggak hang.
- Kayaknya nge-hang ya,
bingung kali dia.
Coba kita bikin folder baru
aja lah.
- Ah, nggak ada isinya, terus saya ngapain?
- Turbo test, ya diisi
something lah. Turbo test.
Apa lagi?
- Index.
- Index atau email?
- Index.js?
- Oke.
- Echo hello world.
- Echo?
Echo?
- Server.js gitu ya.
Ini server apa klien?
App.js lah.
Biar
makin bingung. Ini
klien apa server?
Konsolok?
Turbo.
Udah?
Terus?
NPX.
- Oh, turbo, ya.
Boon X dong.
- Mau Boon X aja?
- Nggak jalan soalnya.
Lebih lama lagi.
Oke, lanjut.
Oh, ini Strapi ya.
- Coba, itu yang
detail sih, yang enak
dibaca tuh di Next.js block aja.
- Yang ini ya?
Eh, 14.2 ini.
Eh, mana dia?
Next.js block. - Next.js block aja.
Jadi kita buka satu persatu
block update-nya.
Jadi pas mulai versi,
berapa lah?
Nah, yang bawah dekit dulu.
- Ini?
- Gue tuh terakhir ngulik. Ini 13,5.
- Ini?
13,5 ini.
Berarti ini kan? 14 ya?
Ini sama sih.
Turbo pack, server action,
partial prerendering,
sama Next.js learn. Jadi udah ya?
- Ya. Sekarang coba
ke 14.1.
- 14.1.
- 14.1 itu.
Improved self-hosting.
- Self-hosting.
Nah, gue dengar
suara developer yang pada
lari ke Open Next.
-
Karena udah ada yang bikin ya?
- Dan dia sebenernya meng-admogic
juga kebutuhan itu kan. Cuma tuh ya
dibikin, ya dibikin agak sulit.
Kita nggak dipermudah, ya
demi kepentingan bisnis. Tapi sebenernya kan
nggak dilarang ya. Emang itu terbuka
bahwa mereka open ya. Emang bisa kok
kalau mau. Cuma effort dikit.
Terus apa itu? - Yang paling extreme
adalah adopsi app router.
Udah nggak ada lagi
get server side props. Semuanya jadi
server first.
- Iya. Jadi sekarang apa ya?
Kayak nge-ekspresinya. Kalo dulu kan
ada get static, apa
get server side props, ada get static
page, ada get static
path, kalo nggak salah.
Nah, kalo sekarang perbedaan server
client, ya semua dianggap
server first. Tapi kalo
misalnya untuk, kan sebenernya yang
client itu adalah
komponennya kan. UI-nya.
Bukan route-nya. Kalo
ada hal-hal yang perlu di client, ya
komponennya kita kasih use client.
Jadi kayak, apa ya, paradigma-nya berubah
aja sih. - Oh,
sekarang ada custom image optimization.
- Oh, ini mah udah dari
12. - Udah lama ya?
- Udah lama, 11-12 gitu.
- Kalo mau hosting
sendiri, sekarang udah gampang
image component.
- Iya, dari dulu. Sebenernya itu
11-12. Jadi
kayak ada. Cuma itu kayak diumpetin
juga sih. Jadi kayak by default
itu makan compute-nya
versel. Agak licik gitu. Maksudnya kalo
buat orang yang developer-nya
nggak terlalu ngedalemin ya. Trus
misalnya
blog post atau artikel
news atau apalah yang image-nya banyak
itu lumayan jebol juga sih.
Tapi dari dulupun bisa diubah
kayak provider-nya diubah.
Misalnya kita punya CDN sendiri nih
apa ya kayak image
CDN apapun itu
tinggal diganti aja provider-nya.
Gue inget pake itu dulu
pas apasih kerayokan sama Mas Zain
dan temen-temen bikin
warga-bantu warga itu loh. - Warga-bantu
warga.
- Itu tahun berapa itu? Nah, itu udah ada
fitur buat
nge-customize
image.
- Image.
Oh, ternyata udah ada nih.
Kalo mau tahu
turbo-nya udah siap apa belum?
RUI Turbo, yes.
Development, yes.
- Itu kan development, production
nggak ada ya? Coba scroll ke
- Production.
No, 83%.
Udah siap apa belum gitu.
Udah siap pake di production apa
belum. Ini berdasarkan
testing ya.
Testing, development test.
600 or more
since the last update.
- Dan kayaknya emang si
ya, test.
Si turbo repo itu
kayaknya di prioritasin buat
next.js dulu deh. Jadi kayak walaupun
theoretically, secara teori
mungkin ya bisa buat apalah
JavaScript lainnya, kayaknya
dilihat dari docs-nya sekilas pun
contoh-contohnya ya nggak jauh dari
next.js.
Mungkin nanti kalo production
udah yes, ya
bakal bisa. Meskipun suatu hari bakal bisa.
Tapi sekarang mereka prioritasin
kebutuhan mereka sendiri.
Lagi-lagi ini kan perkara bisnis kan.
Ini kan emang under
payroll-nya Versel kan.
- For versel.com, a large next.js
application, we've seen
76% faster, 96%
code update with
fast refresh.
Banyak juga ya.
- Ya, dan dari 2012-2013
ini turbo pack
ini udah experimental.
Udah sebenernya enable dan kerasa
sih dibandingnya misalnya
sepung 11 gitu.
Entah yang banget kayak, mungkin faktor
gue ganti laptop juga sebetulnya sih.
Cuma emang kayak
pen-laptop itu nggak bunyi sama sekali
dong.
- Proof error message.
Apa lagi?
Ya, ini proof error message.
Window is to report state and
replay state. Okay.
Data cache logging.
Observability.
Next image support picture.
- Nah, itu yang full banget sih. Karena caching kan
suka nyebelin kan. Maksudnya kita
itu sulit nggak
langsung kelihatan deh. Kalo misalnya
di-log di server pas lagi def,
itu bagus sih.
Suka kagum sih.
Kepikiran aja bikin fitur kayak gitu.
- Ini tadi yang kita omongin ya?
Server fetch-nya default
cache. Di versi
15 sudah...
- Sampai 14 masih caching by default, 15
opt-in.
- 15 opt-in ya. Jadi by default nggak ya.
- Oh, itu tadi komennya bagus tuh.
Karena ada API baru
kayak generate metadata yang kadang
butuh fetch juga.
Nah, sama mereka itu kayaknya di...
Jadi kan isi halaman, misalnya
gini dari client-side routing,
dari list of posts, buka
single post, buka salah satu post,
post detail. Kan itu harus
fetch data kayak dipake di metadata
di head-nya buat SEO,
buat kontennya juga.
Nah, itu tuh emang jadi kayak
kita, kalau nggak salah ya,
encourage. Ya udah, semua di fetch aja
nanti apa, di...
di debut sendiri
sama mereka, sama
Next.js-nya. Jangan
sekali dipake di berbagai
tempat. Nah, exactly
gimana. Karena belum pernah pakai buat production
juga sih. Cuma coba-coba doang.
Itu juga versi 13.5 dulu.
Cuma, maksudnya, prinsipnya
paradigma-nya kayak gitu.
Jadi sebetulnya emang ada tujuan
yang legitimate. Cuma
mungkin kalau by default cache kan
lebih menginginkan.
Iya, karena nggak bilang-bilang, nggak ada infonya ya.
Parallel
routes apa?
Allow you to simultaneously
or conditionally
render one or more pages in the same
layout for highly
dynamic session of the app.
Can you say kalau
contohnya, contoh yang
apa ya, maksudnya UI
pattern yang common,
kebayang nggak WhatsApp, web,
web atau email, atau
apapun yang misalnya di kirikan ada list of
post-nya. Ada index-nya.
Terus kalau kita klik salah
satu, di kanan
nanti kayak single, single
view-nya kan. Nah, cuma kalau
di mobile, kalau di HP, itu kan
sebenarnya kayak dua route yang berbeda kan.
Pertama index, kita buka aja.
Terus kita klik salah satu, masuk ke
single, single page-nya.
Nah, ini tuh kayak dipermudah
sama app routing-nya.
Tapi kalau belum pernah
coba, itu pas, pas beneran
mau, mau loading, itu
nyelimit banget sih.
Itu ribet, ribet
tapi helpful.
App router tidak lebih
baik daripada page router.
Tapi
karena cache-nya jadi berasa kencang.
Caching system-nya dia pinter banget.
Ya, buat yang
mungkin yang belum familiar, app router
itu apa? Bedanya dibandingkan
page router apa?
Kalau page router itu ada folder
pages kan?
Kalau app itu gimana?
Intinya file-based, tapi lebih
ribet. Nih, bentar-bentar, ada link-nya.
File-based, tapi
lebih ribet.
Ya, file-based juga.
Caranya berbeda ya, caranya berbeda.
Dia bikin merampuan sendiri.
Yang emang
secara spesifik,
ya itu kayak ada optimization,
ada kayak dia harus
dibalik layar, ngebaca
dulu semua, dan figure out
mana yang perlu dilazy load,
mana fetch yang perlu dijalani.
Oke.
App,
dashboard, ini sub 3,
ini root, leaf,
okay. Terus
URL segment,
ini domain, ini segment, ini segment.
Dan ada pola-polanya,
kayak ada folder khusus yang
misalnya square bracket,
apa, titik 3 kali,
terus nama slug-nya,
terus misalnya ada
nama component, nama file component
khusus, jadi kayak page.tsx,
itu ada apanya,
masing-masing ada behavior-nya sendiri.
Ini versi 13
udah React Server Component,
katanya Server Component belum
kelar-kelar.
Ya kan,
ada di itu, kan belum kelar,
belum stable, tapi kan sebetulnya
udah, apa itu kan, Ria?
Udah bisa dipake.
Sudah bisa streaming ya, tuh.
Ada streaming, tuh.
Iya.
Menarik.
Oh.
Apro toh
sudah RSC
yang default streaming
page router, masih tradisional
JavaScript SSRO.
Intinya sih, kalau produksi,
kalau yang high-stake,
udah sebenarnya pakai pages aja, aman kok,
nggak usah diapa-apain, maksudnya nggak ada
perubahan yang ekstrim, ya.
Cuma kalau emang pengen ngelik,
kalau mau ngelik,
baru app router, cuma ya jangan
di production site yang
high-stake juga.
Karena banyak banget hal baru
sekaligus kayak ada hal baru dari sini,
dari sana, kayak dari
berbagai hal.
Termasuk ini ya, tadi
page-nya, ya.
Wah, banyak sekali.
Tapi detail, loh.
Misalnya pages, iya, detail pasti.
Ini
dokumentasinya salah satu yang terbaik,
sih.
Detail sekali.
Advanced routing pattern.
Oh, ini tadi yang para router, ya.
Dan bahkan ada kayak misalnya
kalau nggak salah loading atau apalah
loading.tsx.
Itu kan kayak
under the hood-nya, dibaliknya udah pakai
react-suspense itu.
Itu memudahkan kita bikin loading view
jadi komponen, kita bikin komponen
buat loading, ada loading.tsx,
ya.
Loading UI and steaming.
Paling bawah kanan.
Ya, gitu lah. Pokoknya
semua kayak udah dipikir dan disediain
ada. Maksudnya itu
positif-negatif ya, positifnya ya.
Maksudnya ini kan emang kebutuhan
yang umum udah disediain,
fasilitasnya, fiturnya.
Cuma negatifnya bingung, banyak banget hal
baru yang dipelajarin.
Ya.
Gak ada
yang salah sih.
Gak ada yang salah sih, cuman
kalau kita berangkat
dari
apa, router yang sebelumnya
itu agak roaming ya,
agak roaming terlalu banyak soalnya update-nya.
Oh beda banget. Karena emang ini
entirely kayak misalnya
itu tadi kayak
server sama klien,
itu kan sekarang paradigma-nya dan
cara nge-definisinya udah
beda terus, ya
belum kayak streaming, kayak suspens,
itu semua udah backed in
yang di app router.
Itu hal bagus. Maksudnya fasilitasnya
banyak, tapi semua
opinionated. Karena ya
mereka yang nawarin dalam berbagai
apa? Ya, berbagai
syntax lah, berbagai idea. Mereka ada
profile ini gak sih? Kayak migrate dari
page router ke
app router?
Atau langsung drop in?
Gak tahu sih kalau migrate ya.
Oke.
Kalau
ini kan 14.2
tadi ya? Atau 14.1?
14.
Oh iya, kita tadi masih lagi baca
block ya. Ini 13.
Ini 13 tadi.
Kita masih lanjut baca
block lagi ya. Ada improvement
yang 14.
Jadi
ya, ini kita gak usah baca ya.
Kita naik ke 14.2.
14.2 ya.
Yang bulan April kemaren.
Turbopack RC.
Kalau mau ngomong Turbopack belum
selesai juga sampai sekarang kayaknya.
Itu kayaknya gak bisa deh.
Kayaknya gak bisa ya. Kayaknya gak bisa.
Detestable itu 14.2.
Ya, thank you.
Build and production improvement, caching improvement,
Error DX improvement.
Oh hampir-hampir sama ya. Perubahannya juga
masih sejalur
sama 14.1 ya.
Katagorinya maksudnya.
Yang penting major lah. Kan satu major
version gak boleh ada
perubahan yang ekstrim.
Eh, 16 CSS
bundler baru. Nah, ini penasaran.
Pengen coba. Lightning CSS.
Ini baru juga ya.
Inovasi baru. Apa ini?
Mereka pake kata Turbo, pake kata
Lightning.
Biar kita secara subliminal
ngerasa ini, wah ini cepet banget.
Lightning fast.
Nanti Flash lagi namanya.
Builder nya Turbo,
CSS bundler nya Lightning.
Nah, kalau ada yang
lebih cepet daripada extremely fast
CSS parser apa kita sebutnya? Super fast.
Very very fast.
Faster than anyone else.
Faster than extremely fast.
Pake Rust lagi.
Everything Rust at the end.
Semuanya Rust.
Rust, Rust, Rust, Rust.
CSS Nano.
Ini apa CSS Nano ya?
Belum pernah.
CSS Build.
CSS Build aja 17,2. Lightning CSS
4,16. Wow.
Live Indie Feature.
Ini input.
Outputnya. Oh, ini sekaligus
di itu ya. Target Browser.
Di apa?
Di...
Compile ya.
Error.
Belum ada di NPM.
Kok belum ada sih?
Dia harus pakai global mas.
Tadi saya udah coba.
Oh iya bener harus pakai global.
Harus install global.
Harus install global, nggak ada NPS nya ya.
Nanti juga, nanti juga harus ada
package.json nya juga harus ada.
Nanti dia ngamuk.
Kita lanjut lagi.
Creating device, yes.
Crushed it.
CSS Module.
Ini apa sih? Apa aja sih?
Buat itu ya. Intinya adalah buat compiling ya.
Kayak post CSS gitu ya?
Parser, parser.
Created by Mozilla, ternyata.
Oh, using the CSS
parser and selector creates
created by Mozilla.
CSS parsernya dibikin sama Mozilla.
Servo punya.
Oke.
Lanjutnya apa lagi?
Ini hampir sama ya.
Dia update nya
diversal.com
Dia kayaknya prioritasnya adalah improve
compatibility
test nya TurboPack.
We verify top
300 NPM packages
using next.js app.
Bisa di compile dengan TurboPack.
Ya udah punya TurboPack, TurboPack.
Ya, ini angkanya
mungkin bisa misleading ya.
Karena 96%
dari satu
domain doang.
Jadi mungkin
perubahannya misalkan dari
satu detik ke setengah
detik itu kan udah 50% kan?
Karena cuma satu.
Angkanya dramatis.
Ya, angkanya mungkin
agak dramatis. Karena yang dicoba hanya
di satu website gitu. Nggak dicoba di
10, 100 dan lain-lain.
Jadi pasti angkanya wow
keren sekali gitu, padahal
nggak begitu berasa misalkan.
Terus, apa lagi?
Production improvement
tree shaking.
Oke. Caching.
Persistent caching.
Memory usage, ya.
Masih lagi
we're expecting
to share more details in
future release.
Ya, lagi.
Ya, performance ya intunya.
Tree shaking, build memory usage,
CSS.
OK.
CSS apa?
Optimize. Semuanya optimize ya.
Behaviornya juga.
Kayaknya naik CSS ini.
Cachingnya banyak amat ya.
Iya, ada di mana-mana.
Iya.
Dia sangat
sangat caching.
Dari sini menjadi gini.
Sangat caching.
Nah, ini React 19.
Ini yang seru
to prepare for React 19.
Jadi kayak mereka
kecenderungannya nyolong start
gitu lah kalau soal
apapun yang berkaitan sama React ya.
Ini apa?
Ini apa?
Itu udah nonton
gue itu React from another dimension.
Eh, baru tahu
ternyata si Dana Bromoff
sudah tidak di META lagi ya.
Udah keluar ya?
Iya, baru tahu.
Di Blue Sky.
Blue Sky.
Blue Sky itu apa?
Alternativenya Twitter.
Yang Jack Dorsey kan yang bikin.
Yang Jack Dorsey, iya.
Udah punya akunnya
sih mungkin? Blue Sky.
Cuma buat scouting username
doang sih.
Cuman, iya, gak aktif.
Iya, biar gak diambil orang.
Biar gak diambil orang.
React Canary. Oh, udah ada Canary ya.
Ini kita gak usah baca yang
ini ya. Nah.
Sudah sampai 4/12.
Sekarang 5/12.
14/2. Iya, 14/2.
Ini yang RC.
Berarti yang akan datang ya.
Ini belum ya. Kalau teman-teman mau coba
mungkin bisa kali ya.
Experiment ya.
Support for React 19 RC.
Tuh, kan cepet banget kan
geraknya tiba-tiba udah.
Ya, walaupun RC juga, walaupun
RC ya, maksudnya tiba-tiba React 19
aja.
React Compiler.
Ini Mas Irfan tadi ya.
Yang Mas Irfan tadi
yang komplain, nah, ini udah
di-cache,
tidak di-cache by default.
Gak tahu apa
akan berpengaruh. Nanti, tapi pasti
ada protes lagi, karena maksudnya udah
teranjur nulis kode, mungkin udah nulis
dokumentasi, kayak ini cache by default,
jadi harus begini-gini-gini, eh,
berubah lagi.
Jadi keliatannya kalau yang, apa ya,
kalau yang buat, ya itu buat kerjaan,
production side, penggunanya banyak,
ini kayaknya jangan terlalu cepat.
Kalau penggunanya banyak,
jangan langsung upgrade aja ya.
Ya, makanya maksudnya
jangan terlalu
ngikutin Next.js
yang latest kayaknya deh.
Ya, atau kalau pun
mau, ya berarti harus per, apa ya,
ini juga kita baru tahu detailnya
banget, karena kita baca ini kan,
jadi ya, developer-nya
udah ngeluangin waktu buat
keep up to date dengan apapun
yang Next.js
berarti ada celah nih, ada celah,
bikin framework baru
seperti Next.js, tapi
lebih stabil.
Nah itu good in theory,
tapi pasti nanti ada keluhannya lagi ya.
Susah, susah.
Jadi
Next.js kayaknya terlalu up to date ya,
jadi kalau kita mau
mengandalkan si Next.js sebagai
platform yang apa ya.
Sama aja, kalau di dunia
Linux kan, satu
Ubuntu, satu lagi Centos.
Oh iya.
Ah, Debian, Debian.
Oh iya, Debian.
Kalau Centos, Centos kan
lama banget update-nya tuh.
Makanya
mengandalkan
stabil.
Kayaknya tadi udah ada deh
partial pre-rendering.
Tapi ada konfigurasi baru,
new layout and page config
option for incremental adoption.
Jadi yang app routing ini banyak
banget lah masing-masing tuh ada
kayak config object-nya.
Jadi itu banyak lah, punya banyak
customization yang
opinionated, lagi-lagi.
Ini problem apa sih yang mau disolving
sama partial pre-rendering ini?
Ya itu...
Gak tau, coba cari penjelasannya di blog.
Rehydration itu loh kayaknya mas.
Oh rehydration.
Partial pre-rendering ya itu
mungkin skeltone.
Ya kayak ada yang netanya
dynamic nunggu fetch. Kan dia udah tau tuh
kan dia baca semua kan.
Tapi kan ada yang nggak termasuk kayak
skeltone-nya yang
apa?
Kayak loading state.
Nah dia
pre-render itu kali.
Tuh kan semua jadi ada
config-config yang dia, oh
itu di config deh.
Kirain di page.
Nah ini baru nih, beneran baru liat
sekarang ini.
Execute code after a response
with next after.
Oh
jadi bisa nambah
kalau
fungsi yang bisa
dieksekusi setelah
rendernya selesai.
Oh ada kayak callback gitu ya?
Ya.
Kayak
ini apa namanya?
Component lifecycle kan?
Cuma itu kan
bawaannya. Use effect
Masuknya. Use effect ya.
Masih jadul banget ya component lifecycle.
Di baliknya
use effect. Component did
unmount. Component did mount.
Ya bener. Component
did mount. Nggak? Bukan itu ya?
Kalau after itu kan component did mount kan setelah
di mount kan. Si render kan?
Iya.
Nah itu
di chat itu private chat
apa? Partial pre-rendering.
Dia udah mengantisi pasti pertanyaan
macam kita ini.
Ya gitu.
Menarik sih.
Zoom in.
Seperti biasa.
Experimental feature.
Nah dia
what partial pre-rendering is?
How it works?
Jadi kayak apa ya?
Bener. Bener.
Kayak itu kan. Island
Island apa?
Architecture. Ada yang static
Ada yang dynamic. Ada yang dynamic.
Nah terus
hubungannya partial pre-rendering
adalah
you might be able to pre-render
oh ya
island ya intinya.
Island ya island.
Once you're ready.
Reveal the solution.
Oh bener kan?
Skeletonnya atau
sideburnnya static.
Data-datanya
dynamic. Sebentar.
Ini di PWA juga ada kan namanya
apa? Skeleton?
Epsilon. Epsilon.
Shell. Shell kan?
Itu sama dengan static juga
kan sebenarnya kan?
Iya. Cuma kalau itu kan
pattern-nya.
Yang di PWA itu kan pattern aja kan
yang shell, up-shell.
Iya sih. Iya bener.
Kalau itu kan
kalau contoh yang simplenya hello world-nya emang
pakai HTML aja kan.
Kalau ini kan semua komponen, tapi komponennya
behavior-nya lain-lain.
Allow you to render a route
with a static loading shell
static loading shell. Nah itu.
Tadi itu ngomong skeleton sebenarnya maksudnya
shell kayaknya deh.
Gue ingetnya skeleton aja.
Oke.
Jadi.
Berarti sudah kita bisa
static terus kemudian dalamnya
bisa dynamic.
Iya. App shell-nya kita bikin static
ini sebenarnya memudahkan
kita. Kalau yang kayak PWA
itu kan terpisah kan. Ini bikin sendiri
up-shell-nya, terus yang ini
yang dinamisnya beda lagi kan.
Dan static-nya ya static aja, dynamic-nya
harus di dalamnya.
Maksudnya biasanya kan kalau yang standard PWA
kan kayak shell-nya itu kayak
logo, hamburger menu,
footer, tapi dalamnya
dynamic, kepisah. Nah kalau ini bisa
campur.
Static route shell.
Ada. Nah itu island
kalau di astro nih dibilangnya.
Iya kalau di astro namanya
island.
Yes. Kita balik lagi kesini ya.
Ya gitu lah.
After. Create new apps.
Ada design baru.
Design baru.
Wow, keren.
Oke next.
Buat dihapus sih sebenarnya.
Apakah gak sayang kita udah bertahun-tahun
lihat kotak-kotak yang 6 grit itu kan.
Bosan ya bosan.
Oh ini udah ditanya
kalau kemarin kan
ada flag kan minus-minus turbo.
Kalau ini kita ingin mau pake atau nggak.
Kalau pake flag ya tanya
kalau udah ada flagnya ya udah.
Ya mau nyoba silahkan
pake FRC.
Itu bagus tuh.
Ada empty flag.
A new empty flag has been
added to CLI. This will remove
extrano's files and styles
resulting a minimal hellwork page.
Nice.
Penting ini.
Optimize bundling of
external packages.
Ini, itu ya, vendor ya.
Vendor.
DPHP vendor namanya.
Jamannya apa
kayak Goldgrunt juga itu vendor kok.
Iya, gigwary kan.
Vendor-vendor.
Package name.
Okay.
Other changes.
Minimum react version is now
19 RC.
Breaking.
Next image breaking.
Remove skus in favor of sharp.
Oh dia ganti ya. Nggak pake skus lagi ya.
Balik lagi ke sharp.
Terus kayaknya udah nggak di-update lagi.
Jack-nya udah nggak di-update.
Kayaknya udah nggak, nggak ngeriin skus lagi.
Sekarang dia udah di-sharpify ya.
Emang skus itu bukannya
project open source ya?
Iya, cuma ya
kalau dia nge-maintain.
Nggak ada yang maintain.
Nggak bakal di-update lagi
tapi yang sekarang ya masih tetap
ada. Oh.
Masuknya ke Google Chrome. Ya, pantas.
Nggak di-maintain orang.
Masuknya ke Google.
Di organisasi ya?
Masa sih. Masih ada kontributor kok.
Ini kan open.
Iya, tapi kan cuma udah...
Udah nggak masuk KPI.
Udah nggak masuk KPI.
Males ah. Mendingan
bikin open, apa, bikin
e-commerce aja.
Nah, terus apa, error when?
Buset, breaking-nya banyak amat nih 15.
Iya.
Ya, namanya itu.
Remove phone family hashing.
Catching force dynamic.
Will now set no store default to face case.
Enable SWJ
minify.
SWJ ini apa?
Itu, itunya
Next.js
apa, sistem apa ya?
Server web component.
Asal sih gue.
Ini direveal sekitar 10-11
compile, semacam
compiler gitu, apa ya?
SWJs.
SWJ yang
pakai GoLang.
Yang pakai Rust. Lagi-lagi semua.
Oh, Rust.
Rust apa Go ya, antara itulah ya?
Ini.
Bedanya SWJ sama Turbo Pack apa?
Ini bukannya bundler juga ya?
Nah, itu
maksudnya kapan Turbo-nya jalan,
SWJ-nya jalan.
Can be used both compilation and bundling.
Oh, ini buat itu, pengganti bubble.
Benar gak?
Buble, buble, oh iya.
Kita pernah bahas ini.
Benar, benar.
Buble.
Oke, oke.
Ya, iya, iya, ngetingat.
Lanjut, lanjut.
Benar-benar Rust, Rust, Rust, Rust.
Sampe ada bahasa
yang lebih kencang daripada Rust.
Terpindah lagi.
Ya, itu semua punya
jadi default
default behavior.
Metadata
and fallback.
Ya.
Parallel.
Oke. Ini, oh udah
sampe next 15 kita.
Udah.
Selesai.
Jadi apa?
Nextnya JavaScript?
Next JS.
Oh iya, baru sadar.
Kenapa dia cepet, terus lalu pake
yang paling baru namanya aja Next.
Kalau orang komplain dijawab ya
"You pake meta framework namanya Next,
what do you expect?"
Oh, berarti kita harus bikin
framework namanya Previous.
Previous JS.
Previous JS.
Pakainya apa yang udah
ditinggalin gitu yang lama-lama.
Jadi kita selalu forking
versi Next JS yang stabil.
Ini 14 kan?
Previous JSnya 13.
Next JS versi 13.
Atau tiap deprekated
justru kita bikin.
Polyfill, polyfill untuk sesuatu yang
dideprekated sama Next JS.
Polyfill.
Nah tadi ada komen-komen bagus tuh soal
10-stack query.
Ini ada pertanyaan bagus dari Abdul Malik.
"Apakah library kayak 10-stack
query masih diperlukan kalau buat
Next JS up-router?"
Ini jadi agak clash deh.
Bingung juga sih soalnya.
Jadi kalau di Next itu pake
state managementnya
pake apa? Udah di server aja langsung.
State management itu kan luas banget ya
data fetching.
Kalau kita pake perspektifnya kayak jaman regex tuh.
Dari data fetching
sampai yang UI state
juga semua kayak disimpan di state management.
Nah masalahnya, masalah
dalam tanda kutip ya, masalahnya
ini kalau soal apa sih
fetching data, fetching data
sama kayak caching,
sama apa, diduplicate,
compare-compare gitu, itu udah dihandle
sama Next JS.
Tapi kan, misalnya yang
UI state, ya nggak dihandle juga
sama Next JS. Jadi
itu tetap dibalikin ke masing-masing
sih. Dan jujur
belum pernah punya pengalaman yang
pegang major site
yang harus nentuin kayak gitu.
Jadi sebetulnya kalau mau pakai, mau
pakai sih bisa-bisa aja. Cuma kan ya itu
concern-nya buat fetching data.
Jadi kalau mau belajar Next JS...
Ini disimpan bantu jawab kali ya?
Nah itu jawaban yang udah kali.
Nah itu jawaban yang udah kali.
Tapi bener-bener nggak dihydrate.
Jadi pas server fetch,
pakai fetch biasa, pas client-side
baru pakai regex query.
Oh, handle buat
di client-side-nya.
Client-side-nya aja,
client-side query-nya hanya untuk di client-side.
Yang di server-side-nya nggak, gitu ya.
Nah sama ini, pasti
kalau sebelumnya pakai
buat semua, server dan client,
sekarang kan harus dipindah-pindah ke tempat
yang atasnya.
Sekarang atasnya semua kan harus ada
use client tuh, yang client only.
Nah itu agak
PR-nya, soain dengan pattern-nya.
Maksudnya pindah-pindahin
file-nya tuh folder ya?
Folder yang client...
Udah, tambahin use client.
Or use client.
Mereka nggak nyediin code mode ya?
Oke.
Nggak ada segitu itu kali ya?
Iya, oke.
Kenapa Next.js memaksa menambahkan
versi regex
Canary padahal Next.js versi stabil?
Karena mau pakai fitur-fitur
baru-barunya itu.
Itu kemungkinan kan
tadi dia mau pakai regex server
component RSC,
sama apa tadi? Tain API.
Nah belum ada di stable.
Biar mereka
lebih dulu.
Bisa dapet yang, karena namanya
Next.
Biar bisa pakai API yang
belum masuk di stable.
Kompetisi framework itu berat.
Jadi harus yang paling depan.
Terdepan.
Harus paling update gitu ya.
Ya kita nggak tau ya
alasan utamanya apa, tapi
ada kemungkinan itu ya.
Mereka pengen duluan, satu, yang kedua.
Memang mereka butuh.
Yang ketiga, karena memang
ada kontributor-kontributor regex yang
ada di Next.js. Jadi mereka udah tau lah
kira-kira ini bakal dirilis, kok
udah pasti bakal dirilis, cuman masih
RSC atau experimental.
Iya, jadi mereka
langsung adaptasi aja, biar
nanti ketika rilis, mereka
udah duluan.
Dan itu kayaknya positioning-nya mereka deh.
Emang maksudnya mereka memposisikan
diri sebagai framework yang
pakai fitur terbaru.
Kayak API terbaru
di regex sendiri, itu kan semua
ada manfaatnya. Itu hal yang positif ya.
Kenapa ada RSC, kenapa ada
TNAPI, ya walaupun
belum stabil, masih bisa berubah-ubah.
Tapi kan ada value-nya,
benefit-nya. Nah, Next.js itu
kayak positioning aja.
Mereka framework yang manfaat.
Itu kayak core value-nya
Next.js. Core value-nya Next.js
itu salah satu.
Update-nya, iya.
Nah, ini ada pertanyaan
yang mungkin...
Maksudnya cara
mereka approach React
Ecosystem tuh kayak gitu juga,
atau justru sebaliknya,
atau mirip-mirip, atau gimana?
Oke. Ini ada
pertanyaan tentang state management. Mungkin nggak terlalu
berhubungan sama Next.js, tapi
ada
ada insight nggak state management
sekarang yang dipakai apa, selain
Redux. Kalau dulu kan Redux ya.
Kalau sekarang banyak, ya.
Redux so evergreen lagi sebetulnya.
Ini untuk Next.js atau untuk
React?
Kalau ditulis use context,
saya curiga pakai React, buat React.
Apakah
di Next umum menggunakan use context?
Ya umum-umum aja.
Kan React.
Maksudnya si Next sendiri
sudah bawa punya
state management nggak? Gak.
Masih state management.
Ada sustain.
Ya standard lah sustain.
Ada JOT AI, JOTAI.
Oh JOTAI.
Ya, ada Xstate.
Nanti orangnya dateng loh kalian.
Ya, kalau kita
state management, apa?
Mas David.
JOTAI lebih simple, semudah
pakai use state.
Kalau simple, kalau cuma 1-2 komponen yang
perlu state management,
use state, use context aja.
Iya.
Gak perlu, apa,
apa sih yang lebih ini, kalau emang udah solving
problemnya, ya udah pakai itu aja.
Tapi kalau yang perlu,
kalau yang UI-nya context, ya perlu sih.
Kalau sustain tuh belum
kesampaian pakai, cuma pengen pakai
alusanya nggak logis banget
karena landing page-nya bagus.
Sustan.
Kalau untuk di server side, apa
relevan pakai state management?
Ini udah dijawab sama November.
Iya.
State management itu
cuma ada di react, artinya di client side
kan ya.
Dan fokusnya ya UI, jadi kayak misalnya
sustan Xstate atau apa, buat kalau yang
kita UI-nya
ribet.
Eh, kalau dulu kan, waktu jaman
ya nggak perlu-perlu amat.
Kalau dulu jamannya
GraphQL sedang berjaya kan,
pakai Apollo kan,
sebagai state management juga bisa
kan ya.
Ya, pakai Apollo.
Apollo client.
Terus apa lagi ya, ada pertanyaan
apa lagi?
Nah, ini tadi permasalahan yang sama
dihadapi Mas Ipan juga ya
soal caching ya,
udah ter-cache otomatis.
Besok bakal diubah lagi.
Iya.
Cache itu
double-edged sword katanya.
Pedang mermata dua.
Membantu tapi bikin pusing.
Dan yang nyebelin,
kalau udah dipublish nggak sih,
udah dipush, maksudnya kalau misalnya user
kita dapet data yang stale,
itu kan sulit
ngontrolnya.
Oke. Ini ada yang bisa jawab,
"Pakai NX14 pas run dev,
ada tulisan kayak Webpack fail cache."
Publish.
Wah.
Nggak tahu.
Apakah
mungkin
harddisnya penuh?
Jadi nggak bisa ke-cache.
Nggak tahu juga.
Itu banyak faktor ya.
Jadi kita nggak bisa jawab ya, sorry ya.
"Is it out of topic?
Kalau sekarang bundling web bisa
pakai Flutter.
Apa ini lebih better dari NX?"
Bundling web?
Untuk web.
Pakai data.
Flutter untuk web
masih
surang katanya.
Terakhir kita tanya sama yang
jagoan Flutter.
Ya,
Enrico,
dia kan cuman bisa Flutter,
jadi dia bikin webnya pakai
Flutter. Dan itu bundlingnya
gede banget.
Dia juga mau akui, cuman karena dia nggak bisa
HTML CSS, jadi dia
pakai Flutter terpaksa.
Karena nggak bisa bahasa lain katanya.
Mungkin bagus buat
apa?
Multiple target ya, minimal. Cuma
kalau optimization yang
pure web kayak apa,
ya itu tadi yang client-side JS-nya
dipecah-pecah,
loading-nya sedikit-sedikit, itu kayak
nggak mikir, emang nggak
mengutamakan itu sih.
Soal web performance.
Kalau, ya, kalau hanya
sempat kadar kayak internal
internal
application
yang dipakai nggak hanya
di dalam lokal net. Ya, silahkan sih sebenarnya.
Tapi kalau sudah online,
terlalu besar ininya.
Terlalu besar ya? Terlalu besar
bundlingnya.
Ya, ini yang pernah
ditunjukin ya,
sama Enrico, waktu kita ketemu di
Bogor ya, itu dia bilang ini
pakai Flutter web. Ini berapa
besar ini? Atau berapa kecil?
Itu aja sudah
11,4 Mega.
11,4 Mega.
Kalau pure static cuma,
itu kan marketing landing page doang kan?
Iya, landing page doang. Bukan
aplikasi ya, bukan aplikasi.
Canvas kit pakai Wasm lagi.
Dan ini kalau misalnya di console
ke page-nya itu
Canvas.
Isinya Canvas ya?
Ini ya. Element.
Bodi.
Bukan, itu Flutter View.
Flutter View, Flutter View.
Oh, Flutter View.
Nah, itu Canvas tuh.
Tuh, ini.
Flutter Glass Pane.
Shadow Dome.
Shadow Route.
Mana ya?
Mana Canvasnya?
Canvas Container.
Jadi
seluruhnya itu satu Canvas.
Ya, itu
salah satu.
Ya, itu
salah satu ciri khasnya
Flutter. Karena di mobile
juga seperti ini mereka. Jadi mereka
nge-pane satu persatu komponennya.
Sama. Perlakuannya
sama dengan web juga.
Aksesibilitasnya gimana kalau Canvas ya?
Ya, emang bukan di desain web itu.
Buat game kali ya. Buat game cocok ya.
Buat game gitu ya.
Kembali lagi, kalau misalnya kayak
internal application yang kayak banyak
button-button.
Tau gak sih?
Quiz, quiz.
Quiz atau misalnya gitu. Tau gak sih
kayak misalnya
di bandara kita
setelah keluar dari toilet apakah
menyenangkan.
Nah, itu cocok.
Gitu an. Jadi, mau pakai mobile,
mau jadi web, cocok.
Sama aja.
Oke, lanjut.
Tadi di artikel Next 14, kira-kira
Next.js sudah bisa deploy untuk company belum.
Ya, kalau tadi kan karena menggunakan TurboPack
bilang no untuk production.
Kan Next.js bisa pakai
TurboPack atau enggak. Jadi, kalau yang
belum no untuk production, jangan pakai
TurboPack. Pakai webpack dulu.
Masih open kok.
Bisa gak sih? Next.js pakai PTE?
Nggak bisa.
Belum pernah lihat.
Kalau iseng mau nyobain, coba.
Exisibility-nya gimana?
Ya, enggak ada kabar.
PPR, apa sih ini tadi?
Paralel.
Bagus nih, ada koreksi
bedanya dengan
island architecture yang kita tahu.
Commentarnya Rehan.
Somewhere di atas.
Ini?
More than island.
Jadi, yang statiknya itu dikirim dari
server UdhaHTML.
Beneran mirip SSG Shell.
PPR ini yang statiknya itu pre-rendered.
Bajian statiknya, kayak UdhaHTML,
UdhaHTML.
Dia memudahkan kita
gak perlu bikin app shell di
Service Worker dan lain-lain.
Jadi, udah jadi satu di app itu aja.
Jadi, memudahkan.
Dikerjainya di server,
dikirim UdhaHTML.
Sudah pre-rendered.
Dan mengurangi kerjaan main trap.
Sekarang core web vital,
apa itu? ENP atau apa?
Yang baru, ya itu pokoknya.
Pokoknya itu pasti
improve itu banget sih.
Nasibnya gimana kata
Mas Ipan, itunya
bundle size-nya Next.js
masih cukup gede.
Jadi, ya ujung-ujungnya ENP-nya juga.
Ujung-ujungnya ENP-nya juga.
VFX sebenarnya.
Tapi kan ngurangin
kerjaan parsing
buat si UI komponennya lah.
Minimal, apa sih?
busy-time. Apa sih yang busy itu?
Yang microtas-nya harus...
Ya itu lah.
Microtas-nya kan harus dikit-pikit-pikit.
Gak boleh yang terlalu banyak,
terlalu lama. Nah, itu kan ngurangin
satu pertama
yang di-render shell-nya.
Walaupun secara size katanya tetap sama ya.
Kalau Next.js bisa di-render Laravel, ngapain?
Ini server dua-duanya loh.
Laravel jalan di server, Next.js jalan di server.
Overkill.
Bisa, harus.
Pakai React aja, pakai React.
Pakai UI yang macem-macem, udah pakai
Inertia atau apalah itu udah banyak...
Ya, Inertia.js.
Laravel dari pihak Laravel-nya
juga kayaknya bikin deh mirip kayak gitu.
Cuma gak tahu, gak inget apa namanya.
Pokoknya intinya, kalau kita pengen pakai UI
Framework Moderen
dengan sistem full-stack
Laravel itu udah bisa.
Kayak Ivan tadi aja
manggil
Node-nya, ya.
Di PHP.
Nggak punya JS.
Bentar, ngapain punya PHP?
Nggak.
Karena...
Yjs-nya hanya ada
release aja untuk
Node.
JavaScript, jadi harus di-jalan
di server.
Ya, apa boleh buat.
Itu aja, apa,
komen, komen line, apa,
kalau PHP kan bisa kan, manggil
command line, manggil perintah terminal.
Oh gitu, bisa shell.
Shell.
Exec, ya.
Shell exec,
npm, create, next app.
Ngapain? Coba aja cari PHP.
PHP, V8.js, ada kok.
Itu kan extension lama.
Tapi jangan
next.js juga, digabungin sama Laravel,
overkill.
Iya sih, kalau mau
jalanin JavaScript aja tuh bisa, tuh.
Ininya, repo-nya tuh.
Udah lama banget, tapi
nggak diminta.
V8.js.
Sudah 5
tahun lalu, terakhir di-update.
Terakhir di-update, 4 bulan
yang lalu.
Itu juga paling gini.
V8.js
untuk PHP.
Ini juga update itu ya?
Depend the bot.
Apa nggak berat ini
jalaninnya?
Kan hanya untuk kebutuhan
khusus kan? Bukan untuk
sesuatu yang
digunakan
sehari-hari.
Ini kan istilahnya kebutuhan khusus.
Memang
biasanya harus pakai gitu solusinya, apa boleh
buat.
Gue juga nggak suka.
Ada LiveWire
kalau di Laravel.
Oh, kalau LiveWire itu
agak
berikut TMX sih.
Iya, agak berikut TMX.
Itu official
apa? Yang bikin
khusus dari Laravel-nya.
Cuma yang nggak pakai
Vue.
Jadi dia pakai
bahasa sendiri ya?
Seperti
JSX atau seperti
SwiftUI ya?
Tiba-tiba ada add-nya,
punya syntaxnya dia sendiri.
Cuma dinamik dan modern.
Mindsetnya udah dinamik UI.
Kalau mau bikin
Next.php bisa nih.
Jalanin JavaScript-nya,
React-nya pakai VHS.
Nanti di
ini-nya,
di client-nya,
tetap jalanin React. Bisa.
Oh, ngerti, ngerti. Mungkin
maksudnya watasi ini,
mungkin ya, mungkin ini
interpretasi sendiri. Mungkin maksudnya gimana
caranya React render,
server render, tapi
menggunakan PHP
atau Laravel.
Kalau misalkan kita pakai Laravel sebagai
API, terus di client-nya pakai React kan
dia nggak server render kan?
Jadi pakai inertia dia asli
jawabannya ya? Bukan?
Jalanin React
di client ya,
dari sisi server tetap PHP,
jalanin React-nya di client tetap bisa kan?
Gak masalah.
Bisa, nggak usah pakai Next.php, setap aja.
Iya, jangan pakai
JS itu overkill namanya.
Yang natural thing dan
apa ya, family to wear atau
kukis atau apa kan harus satu, harus satu
orang nih, harus satu tempat. Nah, perkara
UI-nya pakai apa sih ya?
Boleh-boleh aja ditambahin.
Nih, bener kan maksudnya
pakai itu
tadi, apa? Inertia ya?
Inertia
JS.
Saya juga belum pernah coba,
tapi tau-tau aja, apa?
Cuma tau, sekadar tau doang.
Ini yang biasa dipakai di
Google BPK nih.
Ini oke kok. Iya, oke.
Masa asal use case-nya nggak rumit-rumit
amat ya, jadi intinya
ini cuma kayak adapter sih, kayak adapter
yang ngubungin dunia
client-side UI
sama the rest of the
Laravel system, sisanya jadi
kayak apapun lah, kayak misalnya middleware
atau routing.
Ya, semacamnya gitu.
Routingnya tetap pakai
Laravel, cuma ada kayak
library-nya lah, buat
nah, itu buat
jadi penengah. Penengah ya, middleware.
Middleware. Middleware.
Middleware untuk UI,
UI component. Untuk UI.
Nah, component-nya standard, udah mau
pake React, mau pake Swell, mau pake
Vue, ya kayak React
pelosan aja. Berarti jadi ya headless
jatuhnya. Headless ya istilahnya ya?
Oh, Doren monolitik.
Jadinya modern monolitik.
The modern monolith
inertia.
Membingungkan nggak sih bikin
Debit nggak sih? Mau PHP ya, maintain
PHP aja gitu. Kalo mau maintain
JavaScript ya, all the way JavaScript.
Ini kan UI-nya doang, client-side UI.
Kalau UI dinamis gimana PHP?
Kalo kita mau UI-nya
dinamis gitu.
Kalo perkara bingung mah, kayaknya malah
lebih bingung untuk CS sih. Kalo gue ya.
Cuma kalo bingung nggak bingung itu kan
sebektif. Kalo ini beneran
client-side UI.
Udah itu aja. Jadi, use case-nya adalah
kalo pake Laravel kan by default
pake Blade sebelum ada Livewire.
Breed ya, ha-ha.
Kalau buat UI dynamic yang misalnya
form-nya ada step 1, step 2, step 3,
open, close, toggle,
punya kalo yang UI-nya banyak
interaksi gitu, ya bisa
pake vanilla JavaScript. Cuma kan malas ya.
Orang, orang pingin pake
React, Swell, Vue.
Yaudah, itu purely
for that purpose.
Dan inertia.js ini, dia
agnostik ya, mau pake
Vue, mau pake...
Ya, ya.
Itu udah kayak community.
Jadi yang dia official
dia sediain React sama Vue
atau apalah, punya...
Ada Swell juga tadi, ada Swell juga tadi.
Itu client-side, client-side.
Cuma dibuka kayak
API-nya dibuka buat
itu, buat adapter.
Kayak nambahin semacam adapter
baru.
Nah, ini menarik juga nih.
KSA.
Kebanyakan developer PHP sering menggunakan Blade,
Blade Component, pindahnya ke Livewire
justru. Tapi kalo orang
front-end, mungkin dia akan mencari...
Kalo orang JavaScript, ya pingin pake React ya.
Ya, mencari
UI framework
atau library yang seperti
React yang sudah dimanjakan dengan React
dan Vue, dan temen-temennya
itu lebih memilih pake
Inertia, mungkin ya.
Pernah nyari ada Adonis.js
buat aplikasi Monolith, tapi belum sempat
pelajari. Iya, Adonis.js ini adalah salah satu.
Ya, itu kayaknya lumayan high
dari ekosistem Node.js, iya.
Adonis.js ini
Fullstack.js, iya.
Terinspirasi dari
Laravel, tapi Node.js.
Oh, really? Pantes.
Mirip.
Semuanya ada ini Adonis.
Tuh, pake Ace.
Make, container, host.
Cuma itu game brandingnya, positioningnya
lebih ke bespoke back-end
application ya, walaupun yang fullstack.
Sama kayak Meteor. Meteor itu juga kan?
Meteor, iya Meteor.
Guravel lagi.
Ada juga Guravel.
Gulen, tapi kayak Guravel. Ada lho!
Guravel.
Guravel.
Ini, first
Frankenstein creature.
Gorels gak ada ya?
Gorels ya? Gorels.
Kita bikin ini aja lah.
Gulen, tapi
pake baju Laravel.
Ada tuh Gorels.
Enggak, ini
belajar reels.
Oke lah.
Frix, kita bikin Rastafel.
Rastafel?
Warnanya itu ya, merah kuning hijau ya.
Rastafel.
Rastafel.
Yo man.
Tagline-nya yo man.
Yo.
Yo.
Rastafel.
Bundafel.
Adonis.
Developer Laravel yang mau coba teknologi lain
tapi gak mau ninggalin PHP.
De Novel.
Aduh.
Rastafel.
Rastafel, tapi
tulisannya jadi Rasta.
R-A-S-T-A aja. Rastafel.
Rastafel.
Kita punya semua.
Ya betul sih, gak salah sih.
Banyak yang terinspirasi dari
Laravel ya.
Sebenernya dia
biru untuk of symphony sih sebenernya.
Tapi ya banyak.
Sekarang sudah banyak tambahan jauh
ekosistemnya yang dia bikin bagus.
Rastafel.
Rastafel.
Nah itu bisa tuh
wasmnya buat ngeluh
PHP. Kan waktu itu Ivan
udah pernah kasih contoh tuh server
PHP jangan di browser ya.
Jadi teknologi bisa.
Cuma siapa yang
siapa yang terlalu senang
buat bikin aja.
Ini kan
Laravel itu terinspirasi dari Ruby
on Rails kan ya.
Terus sekarang banyak yang
menginspirasi
eh terinspirasi dari
Laravel ya.
Berarti OG-nya
yang full stack, yang segala ada,
segala dikasih itu Ruby on Rails ya.
Semuanya mulai dari
Zen Framework.
Zen Framework.
Ngomongin soal Framework,
belakangan ini lagi hangat
Rails Web Hey Calendar yang lemut
karena gak mau pakai Frontend.
Kenapa jadi
lambat? Tapi
harusnya kalau Vanilla kan jadi lebih cepat.
Dia pakai itu Hotwire.
Hotwire itu kayak
Livewire-nya Laravel.
Jadi
kayaknya sih ada
kurang
di sisi
arsitekturnya sih.
Jadi kayak misalkan
kalau diklik dua kali itu
masih bisa. Jadi gak
di prevent gitu-gitu.
Itu masalah developer-nya dong.
Bukan masalah teknologi yang dipakai kan.
Ya, jadi itu kan
dia koneksinya pakai Websocket.
Websocket-nya kebuka terus kan.
Dan semakin banyak
semakin besar loading-nya
semakin, kan Hey itu kan
calendar ya, calendar.
Ada event, semakin banyak event-nya ya, semakin banyak Websocket-nya
dan mungkin Websocket-nya gak
di recycle atau gak dimati-matiin.
Itu nge-stream
terus gitu ya?
Nge-stream terus.
Nah, berarti
kalau pakai teknologi yang powerful gitu
harus siap, beneran ya.
Harus siap dengan konsekuensinya yang
selama ini juga kita pikir
sebelum pakai teknologi canggih itu kan.
Iya.
Susah loh memaintain
Websocket server itu susah.
Websocket, betul-betul.
Itu tricky sekali.
Keep alive-nya itu loh kan, dia nge-streaming
terus tuh.
Dan itu yang membuat...
Betul.
Itu yang membuat...
Katanya ya, kabarnya, itu yang membuat
si perusahaan yang
bikin Hey calendar itu
atau Hey inbox itu.
Mereka pindah, kan.
Mereka pindah dari cloud
ke on-premise. Karena mereka
merasa terlalu mahal.
Jalan terus.
Karena itu juga.
Websocket kan.
Kebuka terus.
Slim framework
masih?
Masih pakai?
Ada YI.
YI itu, YI framework.
YI nggak asik apa nggak asik.
Nggak asik.
Ya, ada...
Itu mas...
Kalau misalnya mau tahu YI framework
tanya Mas Peter.
Oh ya, Mas Peter itu
master-nya.
Slim framework itu apa?
Slim framework itu apa?
Slim framework ini...
Udah lama banget.
Laravel yang slim-nya apa?
Sebelumnya.
Ada...
Gimana sih Laravel yang slim-nya?
Ada versi kecil.
Versi slim.
Lupa apa ya namanya ya?
Laravel Lite?
Tidak.
Nih, temen-temen pasti tahu.
Lumen.
Udah nggak ada kan?
Udah mati.
Jadi,
Slim framework itu
ada sebelum lumen.
Jadi jauh sebelum...
Oh, minimal framework ya?
Kayak express gitu-gitu ya?
Ya, hanya untuk jadi
REST API.
Slim framework untuk jadi REST API.
Apa lagi?
Apa lagi?
Tadi ngomongin Websocket, kan?
Nah, temen-temen kalau mau ada
apa?
Ada ide buat topik,
silahkan ke ngobrolin...
Eh, ngobrolin kan?
kesana.in/ngobrolin
Ada masih yang buat tuh. Mas Irvan mana?
Mas Irvan, terima kasih kita udah pakai kesana-in.
Iya, kita pakai kesana-in.
Jadi nanti arah...
mengarah kesini, itu
diskusi. Bukan cuma topik, tapi
kalau temen-temen punya masalah kayak
tadi tuh, ada yang apa?
Case-nya error tuh.
Mungkin bisa dijelasin di sini.
Lebih lanjut. Gimana cara reproducenya.
Mungkin bisa kasih reponya buat kita coba.
Siapa tahu ada yang mau coba, kan?
Taging kita ya, tagging kita.
Jadi saya bisa dapet notif.
Bukan cuman
saran topik.
Kalau pertanyaan ini udah banyak,
nanti kita bahas lagi di
satu episode khusus kita bahas
di sini, pertanyaan-pertanyaan
yang mungkin tidak ada
kategori khusus, gitu. Jadi
kita bisa bahas
di satu episode khusus.
Oke, oke, oke.
Sip.
Sip, kalau gitu.
Mungkin untuk malam ini,
udahan dulu.
Untuk bahasan Next.js-nya
cukup menarik.
Sekaligus banyak insight.
Dan banyak ide untuk framework.
Ide yang masuk akal
maupun nggak masuk akal.
Iya.
Tapi jadi penasaran ya. Jadi penasaran
kira-kira.
Ya, mungkin jawabannya,
saya nggak tahu jawabannya apakah jawabannya Remix
atau bukan. Kira-kira ada nggak sih framework yang
di atasnya
React tapi lebih stabil daripada Next.
Karena kan permasalahannya di Next kan
temen-temen di sini udah pada ini, kan.
Kok dia ngambil yang eksperimental masuk
ini, gitu kan.
Yang lebih stabil ada nggak ya alternatifnya?
Ya, pakai Next.js yang
sebelum terakhir aja.
Iya. Iya, itu bisa.
Cuman kan kita tuh developer tuh
gatel kan kalau ada update gitu kan.
Kayaknya pengen gitu ya. Nah, itu lagi-lagi
masalah developer, bukan masalah
choice of framework. Sebetulnya misalnya
stay di Next.js 12
pakai pages router, ya udah kan
nggak affected dengan
semua ini.
Nah, ini bagus nih, ide-nya nih.
Oh, itu fundamental.
Bahas res kondisian bagus.
Kemarin masih ya sama Laravel
ribut. Udah liat belum? Belum.
Ributnya apa?
Apa yang diributkan?
Kalau Astro atau Gatsby?
Gatsby udah mati suri.
Dia jarang yang pakai.
Kalau Astro,
kalau Astro,
iya.
Bukan, iya.
Kalau Astro itu kan dia
terbuka untuk semua framework kan.
Dan ujung-ujungnya kita diarahkan ke bikin
komponen Astro kan, bukan komponen
React kan. Ujung-ujungnya.
Hono? Wah menarik nih.
Hono bisa React.
Bisa JSX ya, kalau nggak salah ya.
Gatsby berat banget.
Apolo?
Apolo ini bukan GraphQL?
Apolo Client?
Apolo Client dan
Apolo Server juga ada sih.
Tapi kan buat GraphQL kan ya.
Hono kali ya.
Hono menarik ya.
Hono nih, bahas Hono.
Boleh, boleh, boleh.
Kita tulis ya.
Ultra fast web application
framework.
Bahas Hono tuh.
Banyak yang minta Hono ya ternyata ya.
Tellowin 4 nanti
kalau update
stabil dibahas.
Oh, mudah-mudahan.
Itu juga bagus tuh.
Kita udah sempat
bahas bukunya tapi ya.
Yang bikin bukunya.
Mas Adam Wotan kita bahas
beberapa episode yang lalu.
Tapi Tellowin nya sendiri belum kita bahas.
Kalau Preact itu, on top
of React juga nggak? Nggak.
Preact itu adalah...
Coba yang lebih ringan ya.
Oh, ini bagus lagi.
Jadi Prenex.
Sebelumnya...
Paseh aja.
Masih tetep ya.
Oke.
Remix. Mungkin.
Ya, bisa jadi. Remix bisa jadi.
Spellkit.
Beda, bukan React Spellkit. Spellkit ya.
Gak head-to-head.
Gak head-to-head.
Sama juga dengan Astro.
Astro juga, ya dia bisa pakai React.
Tapi bisa pakai
framework lain juga.
Mungkin Quick juga mirip React.
Tapi bukan dia nggak pakai React.
Prenex.
Itu kan.
Ini omot apa Prenex?
Oh, ElysiaJS menarik.
ElysiaJS.
Ini bun ya, dari bun ya.
Itu lucu dong. Meta framework yang kecil-kecil kayak Elysia,
Hono, apalagi.
ElderJS.
Masih hidup nggak sih? ElderJS?
Itu dari Spellkit, bukan?
Ke team password kit lah.
Dulu kan belum ada tuh yang setara Spellkit.
Dulu gue mulai mulai
Meta framework Spellkit yang aneh-aneh, lucu.
ElderJS, JungleJS.
Gue pernah punya
Production application itu.
ElderJS.
ElderJS ini bukannya Spellkit, ya.
Meta frameworknya Spellkit, ya.
Service side, ya.
SSG. SSG only.
Sebelum eranya
Masih Spellkit ya?
Masih Sapper.
Developmentnya.
Hmm.
Oh, Ribut soal scaling.
Terus dinotis sama
Ya, biasalah.
Namanya juga rebutan lahan.
Ya gimana, kan?
Open source maintainer
tuh kayak peremannya.
Kalau udah Ribut, datang.
Ada apa?
Ada apa sih? Kayak seniman gitu.
Kayak skena-skenaan gitu.
Kayak orang-orang.
Kalau masalah
yang major kan gak ada.
Masalah kayak gitu-gitu doang. Cuma rame-rame.
Pada rame-rame.
Terus nanti lupa lagi. Terus nanti ada yang
ada yang heboh, ada yang
bikin heboh-heboh baru lagi, urusan lain.
Itu mereka ramainya cuman di sosial media.
Kalau ketemu mah
rangkuran-rangkulan.
Kita aja yang liatnya
"Wah, ini Ribut apa?" segala macem.
Nggak, aslinya mah nggak.
Aslinya anti-sosial.
Aslinya pas ketemu malu gitu
intropart lah.
Aslinya anti-sosial, diam-diam aja.
Apalagi sama siapa remix
yang suka cara Ribut itu lagi enteng ya?
Oh iya.
Oh enggak, kemarin juga dia cari masalah tuh.
Oh, iya udah.
Berarti emang hobi, emang passionnya.
Emang hobi, emang bukan hobi.
Cara marketingnya seperti itu.
Cari keributan biar
nggak perlu bayar iklan.
Jadi dia nyari Ribut aja.
Ember Jazz masih ada.
Kayaknya suram ya.
Ember mana sih?
Masih, tapi ya suram.
Masih cuman
nggak ada user baru.
Di-maintain aja.
Nggak ada yang nyebut anggul.
Anggul RGS.
Hari ini rekod loh, nggak ada yang sebut
JQuery loh hari ini.
JQuery.
Koa. Koa kan head-to-headnya
Express ya dulu.
Bukan.
Koa itu
next versionnya dari Express.
Jadi experimentalnya tuh namanya Koa.
Kalau udah masuk stabil dia kayak Express.
Mentarnya sama.
Kepu sama Honu, iya.
Ini cuman buat nari gitu.
Experiment aja.
Experiment aja.
Kepu sama Honu,
iya sama. Kayaknya menarik ya.
Kita bahas Honu ya.
atau framework-framework kecil gitu ya.
Honu ada
Vastify, apa lagi.
Alicia JS.
Micro Framework.
Minimalist.
Oke, kalau gitu.
Kita sudah terlalu
melebar kemana-mana. Terima kasih banyak
buat semuanya, buat inspirasi malam hari ini.
Kita sangat terhibur dengan
penaman-penaman yang ajaib.
Kita jumpa lagi minggu depan dengan topic yang berbeda.
Rastafah ya.
Rastafah ya.
Rastafah ya.
Freshnya Denu
juga termasuk ya.
Jadi mudah-mudahan kita bisa
bahas nanti sedikit-sedikit.
Siapa tahu bisa dapat insight juga.
Oke. Untuk malam ini, terima kasih banyak.
Kita ketemu lagi minggu depan.
Selamat malam, selamat istirahat. Bye-bye.
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 Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
1 Apr 2025
Ngobrolin Lebaran
Episode ini adalah ucapan Selamat Idul Fitri dari tim Ngobrolin WEB. Eka, Ivan, dan Rizah memberikan salam Lebaran denga...
2 Okt 2024
Ngobrolin Drama Trademark & Open Source
Episode ini membahas drama perseteruan antara Matt Mullenweg (co-founder WordPress) dengan WP Engine, sebuah perusahaan ...
31 Jan 2024
Ngobrolin Koneksi Real-Time
Episode Ngobrolin ini membahas WebRTC (Web Real-Time Communication) secara mendalam bersama Yohan, pendiri InLive - star...
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 .