Apakah TanStack Start Lebih Baik dari Next.js?

MMaximilian Schwarzmüller
Computing/SoftwareInternet Technology

Transcript

00:00:00Tan Stack Start sedang mengalami hype akhir-akhir ini,
00:00:03dan pertanyaannya adalah,
00:00:04apakah kamu harus beralih dari Next.js?
00:00:06Apakah lebih baik dari Next.js?
00:00:08Kemarin saya melakukan livestream lengkap di mana saya membandingkan keduanya dan membangun dua aplikasi atau satu aplikasi dua kali,
00:00:15sekali dengan Next.js dan sekali dengan Tan Stack Start dan kamu bisa menontonnya jika ingin melihatnya,
00:00:20tapi di sini saya akan memberikan ringkasan singkat tentang apa yang berbeda,
00:00:24apa yang lebih baik dan mana yang harus kamu gunakan.
00:00:27Tentu saja,
00:00:28ini hanya pendapat saya,
00:00:29jelas bukan perbandingan objektif,
00:00:31tapi saya akan membagikan pengalaman saya tentang keduanya dan apa yang saya pikirkan tentang Next.js dan Tan Stack Start.
00:00:37Saya telah menyiapkan beberapa dimensi yang ingin saya gunakan untuk membandingkan keduanya dan kamu bisa menambahkan lebih banyak lagi dan kamu juga bisa menambahkan framework lainnya di sini.
00:00:47Maksud saya,
00:00:48kita bisa memasukkan Remix,
00:00:49React Router sekarang,
00:00:50kita bisa memasukkan Nuxt untuk Vue,
00:00:52kita bisa membahas SvelteKit,
00:00:53tapi saya tidak akan melakukannya,
00:00:55video ini tentang Next.js dan Tan Stack Start,
00:00:57bukan karena yang lain buruk,
00:00:59tapi karena kedua framework ini sering dibandingkan.
00:01:01Pertama,
00:01:02perlu dicatat bahwa Tan Stack Start pada dasarnya hanyalah Tan Stack Router ditambah beberapa fitur server,
00:01:09terutama.
00:01:10Jadi kamu bisa menggunakan Tan Stack Router secara standalone jika ingin membangun single page application yang tidak memerlukan server-side rendering dan fungsi server-side,
00:01:19misalnya.
00:01:19Kamu bisa menggunakan Tan Stack Router sebagai pengganti React Router di aplikasi React Vite-mu,
00:01:24misalnya.
00:01:25Tan Stack Start kemudian,
00:01:26seperti yang disebutkan,
00:01:27hanya menambahkan fitur server-side ke Tan Stack Router,
00:01:29menjadikannya framework React full-stack yang lengkap.
00:01:32Sama seperti Next.js,
00:01:33yang tentu saja juga merupakan framework React full-stack.
00:01:37Dan itu juga penting.
00:01:38Saya kadang mendapat pertanyaan apakah harus menggunakan Next.js atau React Vite dengan React Router dan saya pikir itu perbandingan yang salah.
00:01:47Jika kamu tidak memerlukan logika server-side,
00:01:49jika kamu tidak memerlukan server-side rendering,
00:01:52maka kamu sebaiknya hanya menggunakan React Vite,
00:01:55jadi proyek Vite dengan React,
00:01:57dan tambahkan React Router atau Tan Stack Router.
00:02:00Tidak perlu mengambil jalur Next.js dalam kasus tersebut.
00:02:02Baiklah, mari kita mulai dengan perbandingan itu.
00:02:05Dan dimensi pertama yang saya pilih adalah kesiapan AI dari keduanya,
00:02:09karena tentu saja itu penting akhir-akhir ini.
00:02:12Kemungkinan besar kamu menggunakan AI untuk menghasilkan beberapa kode,
00:02:16mungkin semua kode yang kamu inginkan di proyek Next.js atau Tan Stack Start-mu,
00:02:21dan oleh karena itu AI tentu saja perlu tahu cara menulis kode tersebut.
00:02:25Jelas,
00:02:26kamu bisa dan sebaiknya memberikan konteks yang sesuai dengan menyalin halaman dokumentasi atau dengan menggunakan MCP seperti Context 7 agar AI dapat mengakses dokumentasi,
00:02:36atau dengan memberi tahu AI bahwa ia harus melakukan pencarian web,
00:02:40atau dengan menambahkan skill agent yang mengajarkan AI cara menggunakan Tan Stack Start atau Next.js.
00:02:47Tapi secara default,
00:02:48jika kamu hanya bertanya kepada ChatGPT pertanyaan tentang Tan Stack Start,
00:02:52kemungkinan besar ia akan tahu lebih sedikit tentangnya dibandingkan dengan Next.js dan apa yang ia ketahui mungkin salah.
00:02:59Karena bahkan sekarang,
00:03:00ketika saya merekam ini,
00:03:02Tan Stack Start masih dalam fase release candidate,
00:03:05yang berarti tidak ada perubahan besar yang merusak lagi,
00:03:08tapi juga belum sepenuhnya stabil.
00:03:10Selama setahun terakhir ini terutama masih dalam fase beta dan alpha dan itulah pengetahuan yang dimiliki chatbot AI ini secara default,
00:03:18itulah mengapa mereka secara default memiliki pengetahuan yang salah tentang Tan Stack Start.
00:03:23Jadi kesiapan AI secara default tidak terlalu bagus,
00:03:28jelas lebih baik untuk Next.js.
00:03:31Dengan Next.js tentu saja juga ada perubahan selama bertahun-tahun,
00:03:35ada directive use cache yang baru yang secara default juga tidak terlalu dipahami AI tapi AI memiliki pemahaman yang cukup baik tentang app router,
00:03:44tentang React server components dan semua hal seperti itu jadi jelas lebih baik untuk Next.js daripada Tan Stack Start.
00:03:51Tapi sekali lagi,
00:03:52seperti yang disebutkan,
00:03:53kamu harus memastikan bahwa kamu memberikan konteks tambahan yang sesuai yang dibutuhkan AI,
00:03:58jika tidak kamu hanya menggunakan AI dengan cara yang salah.
00:04:02Bagaimana dengan ekosistem dan yang saya maksud adalah sumber daya lain yang bisa kamu temukan seperti tutorial,
00:04:08video YouTube,
00:04:09kursus,
00:04:10mungkin juga paket tambahan untuk framework-framework ini.
00:04:13Dan di sini tentu saja Next.js juga terlihat jauh lebih baik daripada Tan Stick Start semata-mata karena lebih tua,
00:04:20sudah ada lebih lama,
00:04:21Anda akan menemukan lebih banyak sumber daya tentangnya karena memang lebih besar juga.
00:04:27Perlu dicatat juga bahwa lebih besar berarti lebih banyak digunakan karena Next.js adalah bagian dari stack default yang dimiliki AI di mana pada dasarnya memberi Anda Next.js,
00:04:37React,
00:04:38Tailwind dan TypeScript untuk sebagian besar aplikasi web yang Anda minta.
00:04:42Tan Stick Start mungkin tidak akan pernah menjadi pilihan defaultnya..
00:04:47Dan karena itu tidak mengherankan jika Anda membandingkan grafik unduhan keduanya,
00:04:51ya,
00:04:52Tan Stick Start jelas memiliki lebih sedikit unduhan seperti yang Anda lihat.
00:04:56Jika Anda menghapus Next.js,
00:04:57Anda bisa melihat tren naik yang bagus untuk Tan Stick Start.
00:05:01Hal yang agak terkait dengan poin ekosistem itu tentu saja kemudahan belajar,
00:05:06tapi bukan hanya itu.
00:05:07Dengan kemudahan belajar yang saya maksud adalah seberapa sederhana untuk mempelajari hal tersebut?
00:05:11Dan saya tahu tentu saja sekarang di era AI Anda tidak tertarik untuk mempelajarinya,
00:05:15tetapi sebagai developer yang baik Anda harus memahami hal yang Anda kerjakan.
00:05:19Anda mungkin tidak lagi menulis semua kode secara manual tetapi Anda harus memahami kode yang dihasilkan AI untuk Anda.
00:05:25Jadi mempelajarinya tetap penting.
00:05:28Dan di sini saya akan bilang untuk Next.js itu campur aduk.
00:05:33Anda bisa memberikannya,
00:05:34saya tidak yakin apakah saya ingin memberikannya satu atau dua plus karena memulai dengan Next.js dengan app router dan ngomong-ngomong semua ini mengacu pada app router cukup mudah.
00:05:46Masuk akal.
00:05:47Kemarin dalam streaming saya membuat aplikasi pencatat sederhana di mana Anda bisa membuat dan menyimpan serta me-render catatan.
00:05:56Dan Anda melakukan itu dengan Next.js hanya dengan menentukan beberapa file page.tsx yang merupakan,
00:06:01Anda tebak,
00:06:02halaman-halaman.
00:06:03Anda bisa memiliki segmen dinamis.
00:06:04Dan mempelajari sintaks dan pendekatan itu untuk membangun aplikasi Anda pada akhirnya cukup mudah.
00:06:12Saya juga berpikir dokumentasinya melakukan pekerjaan yang baik dalam memandu Anda melalui konsep-konsep inti langkah demi langkah dan memulai dengan Next.js.
00:06:22Tapi segalanya menjadi lebih kompleks begitu Anda membangun aplikasi yang lebih kompleks dan begitu Anda menyelami konsep-konsep yang lebih canggih seperti caching.
00:06:30Dan terutama bagian caching bisa sangat membingungkan karena Next.js membuat keputusan bahwa dengan diperkenalkannya app router mereka ingin melakukan caching yang sangat agresif pada berbagai layer dan memahami itu serta memahami cara mengonfigurasi komponen Anda agar bekerja dengan baik dengan caching bawaan itu dan memberikan perilaku yang Anda inginkan kepada pengguna Anda bisa jadi rumit.
00:06:54Saya akan katakan begitu..
00:06:55Saya akan katakan begitu.
00:06:56Jadi memulai itu bagus.
00:06:59Mempelajari fitur-fitur yang lebih canggih itu sulit.
00:07:02Saya mungkin akan memberikan ini dua plus di sini.
00:07:05Dan saya akan memberikan Tan Stick Start yang sama tapi untuk alasan yang sangat berbeda.
00:07:09Untuk Tan Stick Start saya akan bilang bahwa memulai mungkin sedikit lebih sulit daripada dengan Next.js karena dokumentasi getting started mereka tidak sebaik dokumentasi Next.js.
00:07:20Konsep-konsep penting hilang di sini menurut saya seperti data fetching atau mutations.
00:07:27Meskipun jika Anda sudah memiliki pengetahuan Next.js ada dokumen perbandingan yang cukup bagus yang membandingkan fitur-fitur utama termasuk yang terkait dengan data fetching dan mutations.
00:07:36Tapi saya pikir bisa sedikit lebih sulit karena dokumentasinya meskipun saya akan bilang telah sangat diperbaiki masih memiliki sedikit nuansa brain dump di mana tidak terlalu jelas artikel mana yang Anda butuhkan dan misalnya tidak ada artikel data fetching di sini dan hal-hal seperti itu.
00:07:54Selain itu karena Tan Stick Start dibangun di atas Tan Stick Router untuk semua hal terkait routing Anda harus masuk ke dokumentasi Tan Stick Router yang juga agak overwhelming ketika Anda melihatnya untuk pertama kali.
00:08:07Tapi begitu Anda melewati hambatan awal itu semuanya menjadi jauh lebih mudah dan semuanya menurut saya sangat masuk akal dan tidak terlalu sulit dan tidak ada jebakan tersembunyi seperti masalah terkait caching yang mungkin Anda miliki dengan Next.js.
00:08:22Itulah mengapa saya akan bilang bahwa memulai lebih sulit dengan Tan Stick Start tapi begitu Anda berjalan lebih mudah untuk berkembang dan menyelami fitur-fitur yang lebih canggih daripada dengan Next.js.
00:08:32Seperti yang disebutkan,
00:08:34itu hanya pendapat pribadi saya tentu saja.
00:08:36Sekarang bagaimana dengan kemudahan penggunaan dari perspektif developer?
00:08:41Seberapa menyenangkan bekerja dengannya?
00:08:43Itu sepenuhnya subjektif tentu saja,
00:08:45tapi Next.js jelas punya beberapa masalah di sini.
00:08:48Bukan hanya masalah terkait pembelajaran saja,
00:08:51tapi juga masalah lainnya.
00:08:53Misalnya dengan caching,
00:08:54bisa terjadi aplikasi Anda berperilaku berbeda di mode development dibanding mode production,
00:08:59yang artinya Anda harus selalu mengujinya di mode production—yang memang seharusnya dilakukan—tapi jadi cukup menjengkelkan kalau harus melakukannya terus-menerus selama development karena itu memperlambat Anda.
00:09:11Jadi itu satu masalah besar yang pernah saya alami.
00:09:14Dev server juga bisa jadi cukup lambat.
00:09:18Setidaknya jika Anda menggunakan versi webpack—versi turbo pack yang baru jadi default jauh lebih baik di sana—tapi menurut pengalaman saya,
00:09:26itu tidak mengalahkan setup berbasis Vite yang diberikan TanStack Start.
00:09:30Jadi saya beri tiga plus di sini karena menurut pengalaman saya bekerja dengannya sangat lancar dari sisi developer experience.
00:09:40Cepat,
00:09:41bisa diprediksi,
00:09:42tidak ada perilaku aneh sebagian besar waktu—masih ada beberapa keanehan di sana-sini dan masih dalam fase release candidate—tapi secara keseluruhan saya lebih suka developer experience TanStack Start dibanding Next.js.
00:09:57Tentu saja itu mungkin berbeda untuk Anda.
00:10:01Sekarang bagaimana dengan fitur konkret yang ditawarkan Next.js dan TanStack Start?
00:10:06Untuk routing,
00:10:07seperti yang saya tunjukkan di Next.js Anda punya pendekatan berbasis file,
00:10:10Anda menyiapkan file yang bertindak sebagai route dan di sana ada berbagai konvensi penamaan yang harus diikuti.
00:10:16Dokumentasinya cukup bagus dalam menjelaskan itu,
00:10:19tapi juga ada fitur yang lebih kompleks seperti parallel routes yang bisa jadi rumit untuk diatur.
00:10:25TanStack Start juga punya pendekatan berbasis file menggunakan TanStack Router di balik layar seperti yang disebutkan,
00:10:31dan Anda juga punya konvensi nama file yang harus diikuti di sini yang juga sama mudahnya dipelajari.
00:10:36Satu keuntungan yang Anda dapat dari TanStack Start adalah dengan routing berbasis filenya,
00:10:42ia memberi Anda type safety penuh yang cukup bagus.
00:10:45Jadi keduanya berbasis file dan tergantung preferensi Anda pola penamaan mana yang Anda suka,
00:10:52tapi TanStack Start juga punya type safety 100% yang datang dengan router berbasis filenya yang bagus untuk dimiliki.
00:11:00Dan itu juga menjawab pertanyaan selanjutnya—Next.js punya dukungan TypeScript yang sangat bagus dan TanStack Start punya dukungan TypeScript yang bahkan lebih baik menurut pengalaman saya.
00:11:11Juga ketika membahas hal seperti server actions atau server functions atau apapun Anda mau menyebutnya dan data fetching.
00:11:18Jadi ya,
00:11:18ketika Anda menggunakan TypeScript—yang menurut saya seharusnya—TanStack Start benar-benar menyenangkan untuk digunakan.
00:11:24Sekarang soal data fetching dan data mutations,
00:11:26keduanya seperti yang saya sebutkan memungkinkan Anda menjalankan kode di server,
00:11:30keduanya adalah aplikasi React full stack tapi mereka mengambil pendekatan berbeda.
00:11:35Next.js menggunakan React server components dan untuk waktu yang lama ia adalah satu-satunya framework yang mendukung React server components.
00:11:43Itu artinya komponen halaman Anda secara default hanya di-render di server.
00:11:48Mereka tidak pernah di-render ulang di client,
00:11:50yang berarti Anda bisa menaruh kode data fetching seperti ini yang akan mengakses database di balik layar ke dalam komponen Anda dan itu tidak akan bocor ke client.
00:11:59TanStack Start punya pendekatan berbeda.
00:12:01Dukungan React server component akan segera hadir di sana juga—belum keluar saat saya merekam ini—tapi pendekatan yang saya tunjukkan di sini dan saya gunakan di semua proyek saya juga akan tetap ada,
00:12:13dan dalam pendekatan itu komponen route Anda secara default di-render di sisi server dan sisi client,
00:12:18di-pre-render di sisi server,
00:12:20di-update di sisi client,
00:12:22dan karena itu Anda tidak bisa menaruh kode sisi server Anda ke dalam fungsi komponen.
00:12:27Sebaliknya,
00:12:27ia menggunakan pola loader yang mungkin Anda kenal dari Remix,
00:12:31misalnya,
00:12:32di mana Anda dapat melampirkan loader ke rute-rute Anda yang juga akan berjalan di sisi klien dan server,
00:12:38tetapi Anda kemudian dapat memanggil fungsi-fungsi yang didekorasi atau dibungkus dengan create server functions,
00:12:44yang merupakan fungsi yang disediakan oleh Tan Stick Start yang menandai sebuah fungsi untuk hanya dijalankan di sisi server tetapi dapat dipanggil dari sisi klien.
00:12:54Itulah yang dimaksud dengan server function.
00:12:56Dan jika Anda memiliki fungsi seperti itu,
00:12:58Anda dapat dengan aman memanggilnya dalam loader atau juga dari badan fungsi komponen dan kodenya akan tetap berada di sisi server.
00:13:05Di balik layar, permintaan HTTP akan dikirim.
00:13:07Jadi Next.js terutama mengandalkan RSC meskipun tentu saja Anda juga bisa menyiapkan API endpoint di sana dan menggunakan useEffect dengan Fetch API.
00:13:15Tan Stick Start menggunakan loader dan server functions meskipun perlu dicatat bahwa di sana juga Anda dapat menyiapkan API routes dan menggunakan Fetch API,
00:13:24Tan Stick query,
00:13:25atau yang serupa,
00:13:26tetapi pendekatan bawaan utamanya adalah pendekatan loader ditambah server function ini.
00:13:31Untuk mutasi,
00:13:32Next.js menggunakan server actions,
00:13:34yaitu action yang didekorasi dengan direktif khusus useServer.
00:13:39Salah satu hal yang dimiliki Next.js adalah direktif-direktif ini: useServer,
00:13:44useClient.
00:13:44Beberapa orang tidak menyukainya,
00:13:46saya juga bukan penggemar besar,
00:13:47sejujurnya.
00:13:48Dan jika Anda memiliki file yang didekorasi dengan useServer,
00:13:51maka semua fungsi di dalamnya menjadi server functions yang hanya akan dieksekusi di server.
00:13:55Bukan di sisi klien,
00:13:56meskipun Anda tetap bisa memanggilnya dari sisi klien.
00:13:59Jadi misalnya fungsi saveNode yang saya miliki di sini yang menyimpan node di database tetap dapat dipanggil dari sisi klien di sini dengan menggunakan hook useActionState,
00:14:09misalnya.
00:14:10Di Tan Stick Start kita tetap menggunakan pendekatan createServer function ini karena saya sebutkan bahwa itu adalah fungsi yang dijamin berjalan di server dan Anda dapat menggunakannya untuk pengambilan data atau mutasi data karena sekali lagi kodenya hanya akan berjalan di server.
00:14:24Dalam fungsi komponen yang juga di-render di klien,
00:14:26Anda dapat menggunakan hook useServer function yang disediakan oleh Tan Stick Start untuk membungkus server function Anda dan itu pada dasarnya membuatnya dapat dipanggil dari sisi klien dan memberi Anda fitur tambahan seperti penanganan redirect otomatis dan sebagainya.
00:14:39Jadi itu kemudian memungkinkan saya untuk memanggil server function tersebut dari komponen sisi klien saya.
00:14:43Jadi Next.js menggunakan server functions resmi React,
00:14:46sementara Tan Stick Start menggunakan server functions mereka sendiri pada akhirnya.
00:14:51Meskipun begitu, ide umumnya tentu saja sama.
00:14:54Sekarang bagaimana dengan caching?
00:14:56Saya sebutkan bahwa itu adalah bagian yang sulit.
00:14:58Di Next.js cukup agresif dan berpotensi kompleks.
00:15:04Ini jelas salah satu bagian tersulit dari Next.js.
00:15:07Dan saya membahasnya sama seperti semua konsep penting Next.js lainnya dalam kursus Next.js saya jika Anda ingin mempelajari semua tentang Next.js.
00:15:16Kursus tersebut adalah sumber daya yang bagus untuk membawa Anda dari pemula mutlak menjadi pengguna Next.js tingkat lanjut.
00:15:21Tetapi caching jelas merupakan salah satu topik yang lebih bermasalah dengan Next.js.
00:15:26Keuntungannya tentu saja karena pengaturan default yang agresif,
00:15:30Anda berpotensi mendapatkan caching yang cukup baik untuk pengguna Anda.
00:15:35Tetapi Anda juga bisa menembak kaki sendiri dengan cukup mudah.
00:15:38Untuk Tan Stick Start,
00:15:39saya akan meringkasnya sebagai pengaturan default yang baik.
00:15:43Jauh lebih tidak agresif dibanding Next.js dan yang paling penting konsisten menurut pengalaman saya setidaknya antara mode development dan production.
00:15:52Ini juga memberi Anda caching sehingga ketika pengguna bernavigasi antar rute,
00:15:56misalnya,
00:15:57data di-cache untuk periode waktu tertentu.
00:16:00Sehingga untuk navigasi cepat,
00:16:01Anda tidak mengirim banyak permintaan ke server Anda.
00:16:04Dan itu tentu saja sangat membantu dengan performa tetapi tidak meng-cache semuanya atau mencoba meng-cache semuanya di berbagai lapisan dan itu dapat membuat hidup Anda sebagai developer lebih mudah.
00:16:14Namun itu juga tentu saja berarti bahwa jika Anda ingin mendapatkan performa terbaik untuk pengguna Anda dan berpotensi menghemat traffic,
00:16:21Anda harus mengatur header caching yang baik sendiri dan berpikir sedikit lebih banyak tentang bagaimana Anda meng-cache aplikasi Anda dibanding yang mungkin perlu Anda lakukan dengan Next.js.
00:16:30Di sana Anda harus memikirkan masalah lain.
00:16:32Sekarang bagaimana dengan stabilitas?
00:16:35Nah di sini saya mungkin akan memberi keduanya dua plus.
00:16:39Keduanya cukup stabil.
00:16:40Jelas Next.js lebih matang tetapi berdasarkan pengalaman saya cukup banyak bug selama beberapa tahun terakhir terutama server pengembangan yang mengalami masalah crash dan sebagainya.
00:16:53Tapi sudah jauh lebih baik dan secara keseluruhan pengalaman yang stabil dan tentu saja ada ratusan bahkan ribuan aplikasi yang menggunakannya dan berjalan di produksi tanpa masalah.
00:17:03Itu jelas penting untuk dicatat.
00:17:06Tentu saja ada kerentanan keamanan React tersebut tetapi pertama beberapa di antaranya bisa ditemukan di masa depan dan juga mempengaruhi 10-stack start terutama setelah mereka juga mulai mendukung komponen server React dan kedua itu bukan masalah utama Next.js tentu saja.
00:17:2110-stack start masih dalam fase release candidate dan saya pasti mengalami cukup banyak masalah dengannya.
00:17:28Beberapa crash aneh,
00:17:29pesan error aneh,
00:17:30perilaku aneh di sana-sini jadi saya juga bisa memberinya satu plus untuk itu tetapi karena masih dalam fase release candidate dan untuk itu cukup stabil saya akan memberi dua di sini.
00:17:41Perlu diketahui bahwa Anda pasti bisa mengalami beberapa masalah saat menggunakan 10-stack start.
00:17:47Meski begitu saya punya aplikasi yang berjalan di produksi seperti buildmygraphic.com di sini yang bisa Anda gunakan untuk membuat infografis menakjubkan dengan bantuan AI yang ditenagai oleh 10-stack start dan berjalan tanpa masalah dan juga tidak ada masalah saat membuatnya.
00:18:02Bagaimana dengan batteries included?
00:18:04Jadi seberapa mudah untuk mendapatkan rendering gambar yang dioptimalkan,
00:18:08internasionalisasi atau hal-hal menyenangkan lainnya.
00:18:12Di sini Next.js jelas melakukan pekerjaan yang lebih baik.
00:18:15Ini memiliki komponen gambar bawaan,
00:18:18dukungan internasionalisasi bawaan dan 10-stack start tidak memiliki semua itu.
00:18:24Tidak yakin apakah itu direncanakan,
00:18:26tidak yakin apakah itu penting untuk Anda,
00:18:28itu jelas bukan sesuatu yang Anda butuhkan,
00:18:30ada alternatif lain,
00:18:31paket pihak ketiga yang bisa Anda gunakan,
00:18:34mungkin Anda bahkan tidak menginginkan fitur bawaan tetapi jika itu sesuatu yang Anda pedulikan atau khawatirkan maka Next.js mungkin pilihan yang lebih baik di sini.
00:18:43Dan kemudian bagaimana dengan deployment?
00:18:45Itu topik yang sulit.
00:18:48Next.js dibuat oleh Vercel tentu saja dan jika Anda deploy di Vercel sangat mudah dan lancar.
00:18:56Semuanya dioptimalkan untuk itu.
00:18:58Secara historis agak sulit untuk deploy di server Anda sendiri misalnya tetapi jujur saja tim Next.js benar-benar telah melakukan beberapa pekerjaan untuk membuatnya lebih mudah,
00:19:08menulis dokumentasi yang lebih baik dan oleh karena itu saat ini saya akan bilang Anda benar-benar bisa deploy di layanan lain tanpa banyak masalah juga.
00:19:17Jadi itu dua atau tiga plus,
00:19:20tiga plus jika Anda menggunakan Vercel dan dua mungkin jika Anda menggunakan penyedia lain saya rasa.
00:19:28Untuk 10 stack start saya akan memberi dua di sini sekarang tetapi saya juga bisa memberinya tiga.
00:19:36Alasan utama saya memberi dua adalah pada saat saya merekam ini dokumentasi hosting masih agak rumit.
00:19:45Ada mitra yang didukung secara resmi seperti Cloudflare dan Netlify yang memiliki dokumentasi cukup bagus dan di mana deployment mungkin cukup lancar,
00:19:54meskipun saya belum menggunakannya.
00:19:56Jika Anda ingin menjalankannya di VPS Anda sendiri misalnya dengan BUN ada beberapa instruksi di sini tetapi saya merasa agak sulit mengikutinya atau mengalami beberapa masalah yang semuanya bisa diselesaikan tetapi jelas memakan waktu.
00:20:12Saya pikir setelah ada panduan yang bagus untuk deploy 10 stack start dengan BUN atau Node di VPS deployment pasti akan lebih mudah terutama jika panduan itu mencakup rekomendasi mengenai beberapa praktik terbaik yang harus Anda ikuti atau potensi masalah yang mungkin Anda hadapi.
00:20:29Tapi seperti yang disebutkan Anda juga bisa memberi tiga plus di sini tergantung bagaimana Anda melihatnya.
00:20:34Seperti yang saya sebutkan ini semua subjektif dan hanya pengalaman saya,
00:20:38pemikiran saya dan tentu saja saya juga tertarik mendengar pemikiran Anda.
00:20:42Jika Anda beralih atau apa pendapat Anda tentang Next.js dan T3 Stack,
00:20:45jika Anda sedang mempertimbangkan untuk beralih atau jika Anda tidak menggunakan keduanya dan malah menggunakan pilihan lain.

Key Takeaway

TanStack Start menawarkan developer experience dan type safety yang superior dengan setup Vite yang lebih cepat, tetapi Next.js masih unggul dalam hal ekosistem, sumber daya pembelajaran, stabilitas, dan kemudahan deployment terutama di Vercel.

Highlights

TanStack Start masih dalam fase release candidate sementara Next.js sudah matang dan lebih banyak digunakan

Next.js unggul dalam ekosistem, sumber daya pembelajaran, dan kesiapan AI, tetapi memiliki kompleksitas caching yang tinggi

TanStack Start menawarkan developer experience lebih baik dengan Vite, type safety penuh, dan perilaku yang lebih konsisten antara development dan production

Kedua framework menggunakan pendekatan berbeda: Next.js dengan React Server Components vs TanStack Start dengan loader pattern dan server functions

Next.js lebih mudah untuk memulai tetapi lebih sulit untuk fitur lanjutan, sementara TanStack Start sebaliknya

Deployment Next.js sangat mudah di Vercel, sedangkan TanStack Start memerlukan dokumentasi yang lebih baik untuk self-hosting

Pilihan framework tergantung kebutuhan spesifik: Next.js untuk stabilitas dan ekosistem, TanStack Start untuk DX dan type safety

Timeline

Pengenalan dan Konteks Perbandingan

Video ini membandingkan TanStack Start yang sedang hype dengan Next.js untuk menentukan mana yang lebih baik. Pembicara menjelaskan bahwa ia telah melakukan livestream lengkap membangun aplikasi yang sama dengan kedua framework. Perbandingan ini bersifat subjektif berdasarkan pengalaman pribadi dan mencakup beberapa dimensi evaluasi. Penting dicatat bahwa TanStack Start pada dasarnya adalah TanStack Router ditambah fitur server, sementara keduanya adalah framework React full-stack yang sebanding dengan Next.js.

Kesiapan AI dan Ekosistem

Next.js jelas mengungguli TanStack Start dalam hal kesiapan AI karena lebih banyak data training tersedia untuk chatbot AI. TanStack Start masih dalam fase release candidate sehingga AI cenderung memiliki pengetahuan yang salah atau usang tentangnya. Dari segi ekosistem, Next.js memiliki lebih banyak tutorial, video YouTube, kursus, dan paket tambahan karena sudah lebih lama ada dan lebih banyak digunakan. Grafik unduhan menunjukkan Next.js jauh lebih populer, meskipun TanStack Start menunjukkan tren naik yang bagus. Next.js adalah bagian dari stack default yang diberikan AI untuk sebagian besar aplikasi web.

Kemudahan Belajar

Kedua framework mendapat rating dua plus tetapi untuk alasan berbeda. Next.js mudah untuk memulai dengan app router dan dokumentasi yang bagus, tetapi menjadi sangat kompleks ketika mempelajari fitur lanjutan terutama caching yang sangat agresif dan membingungkan. TanStack Start lebih sulit untuk memulai karena dokumentasi getting started kurang terstruktur dan konsep penting seperti data fetching tidak jelas, plus pengguna harus bolak-balik ke dokumentasi TanStack Router. Namun, setelah melewati hambatan awal, TanStack Start menjadi jauh lebih mudah untuk berkembang dan menyelami fitur lanjutan tanpa jebakan tersembunyi seperti masalah caching di Next.js.

Developer Experience dan Fitur Routing

TanStack Start unggul dalam developer experience dengan rating tiga plus dibanding Next.js yang lebih rendah. Next.js memiliki masalah seperti perilaku berbeda antara development dan production mode yang mengharuskan testing konstan di production, plus dev server yang lambat meskipun turbo pack baru sudah lebih baik. TanStack Start dengan setup Vite jauh lebih cepat, lebih dapat diprediksi, dan minim perilaku aneh. Untuk routing, keduanya menggunakan pendekatan berbasis file dengan konvensi penamaan masing-masing yang mudah dipelajari. Keunggulan TanStack Start adalah type safety penuh 100% yang datang dengan router berbasis filenya, memberikan pengalaman TypeScript yang superior.

Data Fetching dan Mutations

Next.js dan TanStack Start mengambil pendekatan yang sangat berbeda untuk data fetching dan mutations. Next.js menggunakan React Server Components (RSC) di mana komponen halaman hanya di-render di server dan tidak pernah di-render ulang di client, memungkinkan kode database langsung di komponen. TanStack Start menggunakan pola loader yang di-render di server dan client, dengan fungsi yang dibungkus createServerFunction untuk menandai kode yang hanya berjalan di server. Untuk mutations, Next.js menggunakan server actions dengan direktif useServer, sementara TanStack Start menggunakan createServerFunction dengan hook useServerFunction. Meskipun Next.js menggunakan server functions resmi React dan TanStack Start punya implementasi sendiri, ide dasarnya sama.

Caching dan Stabilitas

Caching adalah salah satu bagian tersulit Next.js dengan pengaturan default yang sangat agresif di berbagai layer, berpotensi kompleks dan mudah menembak kaki sendiri. TanStack Start memiliki pengaturan default yang lebih baik, tidak agresif, dan konsisten antara development dan production. Namun ini berarti developer harus lebih berpikir tentang header caching untuk performa optimal. Untuk stabilitas, keduanya mendapat dua plus. Next.js lebih matang tetapi mengalami cukup banyak bug dalam beberapa tahun terakhir terutama dev server crash. TanStack Start masih release candidate dengan beberapa crash aneh dan perilaku tidak terduga, tetapi cukup stabil untuk fase pengembangannya dan sudah ada aplikasi produksi yang menggunakannya.

Batteries Included dan Deployment

Next.js unggul dalam fitur bawaan dengan komponen gambar yang dioptimalkan dan dukungan internasionalisasi built-in, sementara TanStack Start tidak memiliki semua itu dan bergantung pada paket pihak ketiga. Untuk deployment, Next.js sangat mudah di Vercel (rating tiga plus) karena dibuat oleh Vercel, dan juga sudah lebih mudah di-deploy ke server lain berkat perbaikan dokumentasi (rating dua plus). TanStack Start mendapat rating dua karena dokumentasi hosting masih rumit, meskipun ada mitra resmi seperti Cloudflare dan Netlify dengan dokumentasi cukup bagus. Deployment ke VPS sendiri dengan BUN memiliki instruksi yang sulit diikuti dan mengalami beberapa masalah. Pembicara menutup dengan meminta pendapat penonton tentang pengalaman mereka dengan kedua framework.

Community Posts

View all posts