[{"data":1,"prerenderedAt":457},["ShallowReactive",2],{"site-header":3,"site-footer-license":37,"article-yang-baru-di-nuxt-3-nitro-vite-dan-banyak-lagi-with-latest":41},{"navigations":4},[5,20],{"collection":6,"item":7},"series",{"__typename":6,"title":8,"slug":9,"children_series":10},"Artikel","all",[11,14,17],{"title":12,"slug":13},"Algoritma dan Struktur Data","algoritma-struktur-data",{"title":15,"slug":16},"Konsep Dasar Pemrograman","konsep-dasar-pemrograman",{"title":18,"slug":19},"Kecerdasan Artifisial","kecerdasan-artifisial",{"collection":6,"item":21},{"__typename":6,"title":22,"slug":23,"children_series":24},"Tutorial","tutorial",[25,28,31,34],{"title":26,"slug":27},"Belajar Java","belajar-java",{"title":29,"slug":30},"Belajar Pascal","belajar-pascal",{"title":32,"slug":33},"Belajar Python","belajar-python",{"title":35,"slug":36},"Belajar Golang","belajar-golang",{"name":38,"url":39,"show":40},"CC BY-SA","https://creativecommons.org/licenses/by-sa/4.0/",false,{"article":42,"renderedBody":408,"renderedTakeaway":409,"latestArticles":410,"toc":433},{"id":43,"title":44,"slug":45,"excerpt":46,"published_at":47,"thumbnail_image":48,"tags":50,"reading_time":54,"takeway":55,"body":56,"authors":57,"series":58},"22","Yang Baru di Nuxt 3: Nitro Engine, Vite, dan Fitur Keren Lainnya","yang-baru-di-nuxt-3-nitro-vite-dan-banyak-lagi","Nuxt 3 hadir membawa perubahan arsitektur besar-besaran untuk menyelaraskan dengan Vue 3. Penasaran apa saja peningkatan performa dan fitur barunya?","2026-06-15T02:39:26.086Z",{"id":49},"8444bdbc-f60c-4d8b-8593-1b49400e8659",[51,52,53],"nuxt-3","vue-3","frontend-framework",null,"- Nuxt 3 berbasis Vue 3 dengan Composition API dan dukungan TypeScript secara bawaan.\n- Mengadopsi Vite sebagai bundler default yang membuat proses development jauh lebih cepat dibanding Webpack.\n- Server engine baru bernama Nitro memungkinkan output build yang super ringan tanpa ketergantungan node_modules.","Setelah [Februari lalu](https://blog.vuejs.org/posts/vue-3-as-the-new-default.html) Vue 3 resmi menjadi versi bawaan yang baru, Nuxt sebagai *framework* populer berbasis Vue nggak mau ketinggalan buat melakukan migrasi besar-besaran.\n\nBukan sekadar mengikuti tren Vue, Nuxt 3 hadir membawa banyak banget fitur baru yang siap memanjakan *developer experience* (DX) dan bikin pekerjaan koding kita jadi jauh lebih ringan.\n\nPada kesempatan kali ini, kita bakal mengulas seputar rilis Nuxt 3, fitur-fitur canggih apa saja yang diusung, dan apakah kalian sudah harus bersiap-siap buat migrasi? Yuk, kita bahas bareng-bareng! 😄\n\n## Status Nuxt 3 Saat Ini\n\nSaat artikel ini ditulis, Nuxt 3 sedang berada di tahap *Release Candidate* ke-3 (RC 3). Artinya, versi ini nggak bakal menerima perubahan besar lagi, melainkan fokus pada perbaikan minor dan stabilitas menjelang rilis final.\n\nKalau mengintip *roadmap* di situs resmi mereka, Nuxt 3 versi stabil dijadwalkan meluncur sekitar bulan Juni 2022 ini.\n\nMeskipun statusnya masih 'kandidat', Nuxt 3 saat ini sebenarnya sudah sangat fungsional, cukup stabil, dan seru banget buat dicoba—tapi disarankan jangan dipakai di lingkungan produksi dulu ya!\n\nSejalan dengan pengembangan versi barunya, modul-modul inti (*core modules*) seperti Content, Auth, dan Image juga sedang ikut berbenah. Bahkan, Nuxt Content v2 sudah curi *start* rilis duluan sejak 24 Mei kemarin.\n\n## Fitur-fitur Baru yang Bikin Ngiler\n\nTransisi dari Nuxt 2 ke Nuxt 3 bisa dibilang sebagai lompatan yang sangat jauh. Saking banyaknya perubahan mendasar, tim pengembang Nuxt sampai harus menulis ulang seluruh *codebase* dari nol dengan teknologi baru.\n\nKira-kira seberapa dahsyat perubahannya? Berikut adalah deretan fitur andalan yang hadir di Nuxt 3:\n\n### Vue 3 dan TypeScript secara Bawaan\n\nKarena Nuxt 3 berdiri di atas Vue 3, sebagai **'framework-nya framework'**, dia otomatis membawa semua kelebihan yang ada pada Vue 3. Beberapa di antaranya meliputi:\n\n* **Composition API** — gaya penulisan kode yang lebih modular dan gampang dibagikan lewat *composables*.\n* **TypeScript** — dukungan penulisan tipe data statis yang langsung aktif tanpa perlu konfigurasi ribet lagi.\n* **Performa Lebih Ngebut** — rendering halaman diklaim lebih cepat sampai 55%, ukuran *bundle* terpangkas hingga 41%, dan penggunaan memori RAM lebih hemat sampai 54%.\n\nBerhubung Vue 3 kini condong menggunakan TypeScript secara bawaan, Nuxt pun ikut menyesuaikan diri. Langkah adaptasi ini nggak main-main, karena seluruh kode inti Nuxt 3 akhirnya ditulis ulang menggunakan TypeScript. Berbeda dari Nuxt 2 yang didominasi oleh JavaScript biasa, kini proporsi repositori resminya hampir seluruhnya beralih ke TypeScript.\n\n> 📷 *Ilustrasi: grafik perbandingan komposisi bahasa pemrograman antara Nuxt 2 berbasis JavaScript dan Nuxt 3 berbasis TypeScript.*\n\nFitur *static typing* yang dibawa TypeScript bikin proyek Nuxt kalian jadi lebih mudah dikelola saat ukurannya mulai membesar. Ditambah lagi dengan dukungan fitur editor seperti *auto-completion* dan *IntelliSense* yang aktif, pengalaman koding jadi terasa makin mulus.\n\n### Vite sebagai Bundler Utama\n\nSama seperti Vue 3, Nuxt 3 kini membawa dukungan penuh untuk Vite sebagai *module bundler* bawaannya, menggantikan Webpack yang dipakai di versi terdahulu.\n\nHasilnya? Proses *build* dan *hot module replacement* pas koding berjalan jadi super cepat, hampir instan! Ukuran berkas akhirnya juga relatif lebih kecil dibandingkan hasil kompilasi Webpack.\n\nTapi buat kalian yang masih setia atau butuh Webpack, tenang saja. Nuxt 3 tetap menyediakan opsi buat menggunakan Webpack 5 dengan konfigurasi yang nggak kalah mudah.\n\n### Auto Import yang Praktis\n\nAktivitas mengimpor komponen atau fungsi bantuan sering kali memenuhi baris kode paling atas, terutama pada proyek Nuxt yang kompleks.\n\nBiar koding makin efisien, Nuxt 3 merilis fitur *Auto Import* yang canggih.\n\nBerkat fitur ini, kalian nggak perlu lagi menuliskan baris `import` secara manual tiap kali mau memakai komponen atau fungsi bantuan. Tinggal panggil namanya, dan Nuxt bakal mendeteksinya secara otomatis di balik layar.\n\nFitur *auto import* ini bekerja untuk *helper functions*, komponen, *composables*, plugin, hingga API bawaan Vue.\n\nKerennya lagi, ini nggak seperti variabel global biasa. Editor kalian akan tetap mengenali jenis komponen tersebut, sehingga fitur *IntelliSense* dan sugerensi kode tetap aktif membantu koding kalian.\n\n### Server Engine Baru Bernama Nitro\n\nSalah satu lompatan terbesar di Nuxt 3 adalah kehadiran mesin server (*server engine*) baru yang dinamai Nitro.\n\nNitro adalah proyek sumber terbuka di bawah naungan ekosistem UnJS, dikembangkan bersama *library* lainnya seperti `h3`.\n\nNitro memungkinkan server Nuxt kalian berjalan secara mandiri tanpa memerlukan folder `node_modules` lagi di lingkungan produksi. Ini berbeda jauh dengan versi sebelumnya yang sangat bergantung pada dependensi tersebut.\n\nSemua kode program, pustaka pihak ketiga, dan hasil kompilasi bakal dikemas rapi ke dalam folder `.output`. Folder ini siap kalian jalankan langsung di Node.js maupun layanan *service worker* seperti Cloudflare Workers tanpa perlu menjalankan perintah `npm install` lagi.\n\nBagaimana? Keren banget kan arsitektur barunya? 😎\n\n## Sudah Siap Mencoba Nuxt 3?\n\nItu dia beberapa fitur revolusioner yang diusung oleh Nuxt 3. Kita tinggal menunggu saja tanggal peluncuran resminya dalam waktu dekat.\n\nBagaimana dengan kalian? Sudah ada rencana buat membangun proyek baru menggunakan Nuxt 3? Atau malah sudah bersiap melakukan migrasi proyek lama?\n\nUntuk informasi lebih lengkap dan dokumentasi resmi, kalian bisa langsung mengunjungi situs [Nuxt 3](https://v3.nuxtjs.org).\n\nSelamat berkoding ria 👋",[],{"id":59,"title":8,"slug":9,"articles":60,"parent_series":54},"9",[61,77,90,102,113,126,138,149,161,172,183,193,203,214,223,234,245,255,263,266,277,288,296,305,314,327,336,347,358,368,377,386,396],{"id":62,"title":63,"slug":64,"excerpt":65,"thumbnail_image":66,"tags":68},"41","Log Aggregation Modern dengan Grafana Loki dan Vector: Hemat Storage Tanpa Indeks Raksasa","log-aggregation-modern-grafana-loki-vector-hemat-storage","Klaster Elasticsearch kalian rakus RAM dan boros storage, ya? Padahal nggak semua kata di log perlu diindeks, lho. Yuk, kita kenalan sama duet Grafana Loki dan Vector yang jauh lebih ramah kantong!",{"id":67},"03c9d1a0-c80a-401d-9f2b-2b3ee7abb115",[69,70,71,72,73,74,75,76],"backend","observa","logging","grafana","loki","vector","devops","system-design",{"id":78,"title":79,"slug":80,"excerpt":81,"thumbnail_image":82,"tags":84},"45","Rate Limiting Algorithms: Token Bucket vs Leaky Bucket vs Sliding Window","rate-limiting-algorithms-token-bucket-leaky-bucket-sliding-window","Udah tahu kenapa *rate limiting* itu wajib, tapi masih bingung beda Token Bucket, Leaky Bucket, Fixed Window, dan Sliding Window? Yuk, kita adu empat algoritma ini bareng-bareng dan cari tahu mana yang paling pas buat API kalian!",{"id":83},"0e0ed26d-20c6-443c-bde1-4a6200f6f801",[69,76,85,86,87,88,89],"rate-limiting","redis","api-gateway","architecture","traffict-management",{"id":91,"title":92,"slug":93,"excerpt":94,"thumbnail_image":95,"tags":97},"16","Menggunakan TypeScript dengan Node.js dan Express","menggunakan-typescript-dengan-node-js-dan-express","Pengen bikin server Express di Node.js tapi pakai fitur-fitur keren TypeScript? Yuk, intip cara setup lengkapnya dari nol di sini!",{"id":96},"798b60f1-9ef5-4f73-8d43-85825fd86acc",[98,99,100,101],"javascript","nodejs","express","typescript",{"id":103,"title":104,"slug":105,"excerpt":106,"thumbnail_image":107,"tags":109},"17","Pemrograman Asynchronous vs Multithreading, Apa Sih Bedanya?","pemrograman-asynchronous-dan-multithreading-apa-bedanya","Sering dengar istilah asynchronous dan multithreading pas ngoding tapi masih bingung bedanya? Yuk, kita bedah perbedaannya lewat analogi bikin mi instan yang gampang dipahami!",{"id":108},"9c05d0ae-e829-4f1b-b9f7-a84f3e0439d3",[110,111,112],"pemrograman","concurrency","tips-coding",{"id":114,"title":115,"slug":116,"excerpt":117,"thumbnail_image":118,"tags":120},"33","Berkenalan dengan RabbitMQ: Si Kurir Pesan Serba Bisa","berkenalan-dengan-rabbitmq-si-kurir-pesan-serba-bisa","Pernah nggak sih kalian klik Bayar Sekarang dan notifikasi suksesnya muncul seketika, padahal email konfirmasi baru nyampe beberapa detik kemudian? Rahasianya ada di satu kurir tak terlihat. Yuk, kita kenalan sama RabbitMQ!",{"id":119},"f6620f79-b3b2-4f9c-8104-283a335e06c4",[121,122,69,123,124,125],"rabbitmq","message-broker","microservices","async","queue",{"id":127,"title":128,"slug":129,"excerpt":130,"thumbnail_image":131,"tags":133},"34","Kenapa Backend Butuh Database Connection Pooling?","kenapa-backend-butuh-database-connection-pooling","Pernah kena error Too many connections padahal CPU server masih santai di angka 30%? Masalahnya bukan di query kalian, tapi di cara aplikasi ngobrol sama database. Yuk, kenalan sama Connection Pooling!",{"id":132},"6f7a2d8c-2a37-4901-a522-50df8d9c0a20",[69,134,135,136,76,137],"database","postgresql","connection-pooling","performance",{"id":139,"title":140,"slug":141,"excerpt":142,"thumbnail_image":143,"tags":145},"27","Background Worker & Task Queue: Jangan Jalankan Proses Berat di Request HTTP!","background-worker-task-queue-jangan-jalankan-proses-berat-di-http","Pernah nggak sih kalian klik Daftar Akun lalu halaman loading muter sampai 15 detik tanpa kepastian? Penyebabnya klasik banget. Yuk, kita bahas kenapa proses berat nggak boleh dijalanin di request HTTP!",{"id":144},"e119c6ad-fc37-4b92-abdc-3eb20f8e34b4",[69,146,147,148,121,86,124],"task-queue","celery","fastapi",{"id":150,"title":151,"slug":152,"excerpt":153,"thumbnail_image":154,"tags":156},"28","Mengatasi N+1 Query Problem: Musuh Tersembunyi Performa Backend","mengatasi-n-plus-1-query-problem-musuh-tersembunyi-backend","Pernah bikin endpoint yang cuma nampilin 50 postingan beserta nama penulisnya, tapi response-nya lambat banget? Bisa jadi kalian kena N+1 Query. Yuk, kita bedah penyebabnya dan cara memberantasnya!",{"id":155},"34b94e14-3e9a-4778-9f1f-6df5898915fb",[134,157,158,159,160,137,69],"sql","orm","sqlalchemy","django",{"id":162,"title":163,"slug":164,"excerpt":165,"thumbnail_image":166,"tags":168},"30","Berkenalan dengan Bahasa Go: Kenapa Banyak Dipakai untuk Backend Modern?","berkenalan-dengan-bahasa-go-untuk-backend-modern","Kok bisa sih Go yang masih muda ini jadi bahasa andalan Docker sampai Kubernetes? Yuk, kita kenalan sama Goroutine, Channel, dan alasan dia hemat memori luar biasa!",{"id":167},"a368631c-f331-4c50-8322-1d0fc44927aa",[169,170,69,111,171,76],"golang","go","goroutine",{"id":173,"title":174,"slug":175,"excerpt":176,"thumbnail_image":177,"tags":179},"13","Hal yang Perlu Diperhatikan Sebelum Pindah ke Linux","hal-yang-perlu-diperhatikan-sebelum-pindah-ke-linux","Tertarik migrasi dari Windows ke Linux tapi masih ragu? Yuk, pelajari kelebihan, kekurangan, dan persiapan penting sebelum kamu benar-benar pindah!",{"id":178},"ae27713e-5025-4d13-88b6-efb4860cc5b3",[180,181,182],"linux","windows","foss",{"id":184,"title":185,"slug":186,"excerpt":187,"thumbnail_image":188,"tags":190},"11","Apa Kabar JavaScript? Rilis State of JS 2022","apa-kabar-javascript-rilis-state-of-js-2022","Survei State of JS 2022 resmi dirilis dengan lonjakan responden yang luar biasa! Framework dan build tool apa saja yang berhasil mencuri perhatian tahun ini?",{"id":189},"18df5262-d813-43d1-b1f7-5595a7f53602",[98,191,192],"web","news",{"id":194,"title":195,"slug":196,"excerpt":197,"thumbnail_image":198,"tags":200},"12","Buat PowerShell Lebih Berwarna dengan Starship","buat-powershell-lebih-berwarna-dengan-starship","Bosen sama tampilan PowerShell yang hitam putih dan kaku? Yuk, sulap terminalmu jadi lebih interaktif, estetik, dan berwarna pakai Starship!",{"id":199},"c5a8262b-43db-4479-8f6c-5a6a0d61653b",[201,181,202],"shell","powershell",{"id":204,"title":205,"slug":206,"excerpt":207,"thumbnail_image":208,"tags":210},"14","Instalasi Java dengan Visual Studio Code","instalasi-java-dengan-visual-studio-code","Mau belajar ngoding Java tapi spek laptop pas-pasan buat buka IDE berat? Yuk, cari tahu cara setup VS Code biar ngoding Java tetap lancar dan enteng!",{"id":209},"99b01cc2-11ac-4449-9927-a1a7116347df",[211,212,213],"howto","java","editor",{"id":215,"title":216,"slug":217,"excerpt":218,"thumbnail_image":219,"tags":221},"15","Kenapa Ada Banyak Sekali Distro Linux?","kenapa-ada-banyak-sekali-distro-linux","Pernah bingung pas mau install Linux tapi malah disuguhi puluhan pilihan distro? Tenang, kalian nggak sendirian. Yuk, cari tahu kenapa distro Linux bisa sebanyak itu dan apa bedanya!",{"id":220},"b5352a4b-f274-4489-aca9-36814947d514",[180,222],"distro",{"id":224,"title":225,"slug":226,"excerpt":227,"thumbnail_image":228,"tags":230},"18","React, Angular, atau Vue: Pilih Framework yang Mana?","react-angular-vue-pilih-framework-yang-mana","Bingung menentukan pilihan di antara React, Angular, dan Vue untuk proyek web kalian berikutnya? Tenang, yuk kita bandingkan kelebihan masing-masing di sini!",{"id":229},"ff111270-80c2-4ccb-83d7-d5ab8c021201",[231,232,233],"web-development","frontend","framework",{"id":235,"title":236,"slug":237,"excerpt":238,"thumbnail_image":239,"tags":241},"19","Static Typing dan Dynamic Typing: Apa Bedanya?","static-typing-dan-dynamic-typing-apa-bedanya","Pernah bingung kenapa di Java tipe data harus dideklarasikan, sementara di Python tinggal pakai aja? Yuk, cari tahu perbedaan static typing dan dynamic typing di sini!",{"id":240},"98e85e76-9e7b-42d1-b989-7c75e7f49abc",[242,243,244],"programming","types","comparison",{"id":246,"title":247,"slug":248,"excerpt":249,"thumbnail_image":250,"tags":252},"20","Tailwind v3.0 Rilis: Ada JIT, Arbitrary Values, dan Banyak Lagi!","tailwind-v3-0-rilis-jit-arbitrary-dan-banyak-lagi","Tailwind CSS v3.0 resmi dirilis dengan segudang peningkatan performa yang bikin proses coding makin asyik. Apa aja sih fitur andalan yang wajib dicoba?",{"id":251},"d5e879fa-5cd0-4015-a155-b0cc69ff12fb",[253,254,231],"tailwind-css","css-framework",{"id":256,"title":257,"slug":258,"excerpt":259,"thumbnail_image":260,"tags":262},"21","TypeScript: JavaScript dengan Gaya dan Tipe Data Statis","typescript-javascript-dengan-gaya","Pernah pusing gara-gara runtime error di JavaScript? Yuk, kenalan dengan TypeScript yang bawa fitur static typing biar kode kalian makin rapi dan aman!",{"id":261},"f615bb1f-8e36-4d6c-9c2c-f1629407173c",[101,98,231],{"id":43,"title":44,"slug":45,"excerpt":46,"thumbnail_image":264,"tags":265},{"id":49},[51,52,53],{"id":267,"title":268,"slug":269,"excerpt":270,"thumbnail_image":271,"tags":273},"23","Kenapa Pakai FastAPI dan Kenapa Dia Kenceng Banget?","kenapa-pakai-fastapi-dan-kenapa-dia-kenceng-banget","Sering dengar FastAPI tapi masih bingung kenapa dia bisa ngebut kayak NodeJS dan Go? Yuk, kita bedah bareng rahasia ASGI, sihir Pydantic, sampai dokumentasi otomatisnya!",{"id":272},"84847c9e-70ab-4dcc-bed7-7be50165f7f4",[148,274,69,275,276],"python","asgi","pydantic",{"id":278,"title":279,"slug":280,"excerpt":281,"thumbnail_image":282,"tags":284},"26","REST API vs gRPC: Kapan Sebaiknya Mulai Pindah dari JSON?","rest-api-vs-grpc-kapan-sebaiknya-pindah-dari-json","Pernah nggak sih sistem mikroservis kalian mulai kerasa berat padahal cuma tuker-tukeran data internal? Belum tentu masalah servernya. Yuk, kita bahas kapan REST + JSON masih juara dan kapan gRPC jadi jawabannya!",{"id":283},"487500a0-9e09-469d-8736-1583c5ea83aa",[69,285,286,123,287,76],"grpc","rest-api","protobuf",{"id":289,"title":290,"slug":291,"excerpt":292,"thumbnail_image":293,"tags":295},"38","Optimistic vs Pessimistic Locking: Mengatasi Rebutan Data di Database","optimistic-vs-pessimistic-locking-mengatasi-rebutan-data-di-database","Seribu orang ngeklik \"Beli Sekarang\" di detik yang sama buat rebutan 1 tiket terakhir. Kira-kira apa yang bakal terjadi di server kalian? Yuk, kita banding *pessimistic* sama *optimistic locking*!",{"id":294},"21ab769d-6f82-4a22-be11-17ac16e9fb6b",[69,134,111,135,76,88,157],{"id":297,"title":298,"slug":299,"excerpt":300,"thumbnail_image":301,"tags":303},"24","Kenapa Butuh Rate Limiting?","kenapa-butuh-rate-limiting","Pernah nggak sih endpoint login kalian diserbu bot yang nyoba nembak ribuan password cuma dalam semenit? Yuk, kita bahas kenapa Rate Limiting itu wajib, plus cara masangnya di FastAPI!",{"id":302},"1401f9e5-6359-404a-8d80-273ddee9a372",[69,85,76,304,86,148],"api",{"id":306,"title":307,"slug":308,"excerpt":309,"thumbnail_image":310,"tags":312},"25","Kenapa Event Queue Bikin Backend Kalian Nggak Gampang Tumbang?","kenapa-event-queue-bikin-backend-kamu-nggak-gampang-tumbang","Pernah klik tombol Beli Sekarang dan notifikasi suksesnya muncul dalam sekejap, padahal di belakang layar ada invoice, email, sampai push notification yang harus dibuat? Rahasianya Event Queue. Yuk, kita bedah!",{"id":311},"d9e76018-fbcc-4c69-ad42-8f75ff229ecd",[69,76,313,122,88],"event-queue",{"id":315,"title":316,"slug":317,"excerpt":318,"thumbnail_image":319,"tags":321},"46","Mengapa C Mulai Ditinggalkan: Duel Filosofi Keamanan Rust vs Kesederhanaan Zig","mengapa-c-mulai-ditinggalkan-duel-filosofi-rust-vs-zig","Pernah denger kalau sekitar 70% celah keamanan kritis software modern itu asalnya dari bahasa C? Iya, bahasa yang udah jadi fondasi internet ini 😅. Yuk, kita bedah duel filosofi Rust vs Zig dan cari tahu mana yang pas buat proyek kalian!",{"id":320},"1942a5c9-c1f6-476d-9913-768f78d9d8eb",[322,323,324,325,326],"system-programming","rust","zig","c","memory-safety",{"id":328,"title":329,"slug":330,"excerpt":331,"thumbnail_image":332,"tags":334},"29","Memahami Database Indexing: Rahasia Query Super Cepat","memahami-database-indexing-rahasia-query-super-cepat","Query kalian mulai lelet padahal data baru nembus jutaan baris? Sebelum buru-buru *upgrade* server, yuk cek dulu *index*-nya. Yuk, kita bedah gimana *database indexing* sebenernya kerja!",{"id":333},"b123036f-1779-478c-a545-cf5f189b5fe9",[134,157,135,335,137,69],"indexing",{"id":337,"title":338,"slug":339,"excerpt":340,"thumbnail_image":341,"tags":343},"31","Mengenal Redis: Lebih dari Sekadar In-Memory Cache","mengenal-redis-lebih-dari-sekadar-in-memory-cache","Masih nganggep Redis cuma buat caching? Padahal dia bisa jadi leaderboard, message broker, sampai rate limiter lho. Yuk, kita bedah semua kemampuannya!",{"id":342},"9595b7d7-60e0-48f5-a715-f3cf60f34e1d",[86,69,344,345,346,274],"cache","nosql","in-memory",{"id":348,"title":349,"slug":350,"excerpt":351,"thumbnail_image":352,"tags":354},"32","Docker Compose untuk Developer Santai: Satu Perintah Buat Jalankan Semua Service","docker-compose-untuk-developer-santai","Pernah nggak kalian ngulang-ngulang perintah `docker run` cuma buat nyalain web, database, dan cache satu-satu? Capek, kan? Yuk, kita rapikan semuanya jadi satu file dan satu perintah!",{"id":353},"f4c08f1b-e0d0-410c-b091-c3618944fb3e",[355,356,75,357,69],"docker","docker-compose","containers",{"id":359,"title":360,"slug":361,"excerpt":362,"thumbnail_image":363,"tags":365},"35","Mengenal Idempotency Key: Rahasia Anti-Double Charge di API Pembayaran","mengenal-idempotency-key-rahasia-anti-double-charge-di-api-pembayaran","Pernah internet kalian ngadat pas lagi nekan tombol Bayar, terus panik ngekliknya tiga kali? Kalau endpoint-nya nggak idempotent, saldo bisa kepotong berkali-kali. Yuk, kenalan sama Idempotency Key!",{"id":364},"724cb83a-3ce5-4ee2-b0d7-533e3a0fc7df",[69,304,366,76,367,148,86],"idempotency","payment",{"id":369,"title":370,"slug":371,"excerpt":372,"thumbnail_image":373,"tags":375},"36","Mencegah Efek Domino di Mikroservis dengan Circuit Breaker Pattern","mencegah-efek-domino-di-mikroservis-dengan-circuit-breaker-pattern","Pernah nggak sih, satu fitur minor di aplikasi kalian mendadak lelet, eh malah bikin halaman checkout dan login ikut down total? Itu namanya *cascading failure*. Yuk, kita bahas gimana *circuit breaker pattern* (pemutus arus) nyelametin arsitektur kalian!",{"id":374},"c2e8e37f-8f9a-423f-a09d-74613b3c2924",[69,123,376,76,88],"circuit-breaker",{"id":378,"title":379,"slug":380,"excerpt":381,"thumbnail_image":382,"tags":384},"37","Kenapa Backend Butuh Graceful Shutdown? Jangan Asal Cabut Kabel Server!","kenapa-backend-butuh-graceful-shutdown-jangan-asal-cabut-kabel-server","Pernah nggak sih, abis kalian nge-*deploy* backend, beberapa detik kemudian monitoring malah banjir *alert* **502 Bad Gateway** dari pengguna? Saldo udah kepotong tapi status order belum keburu ter-*update* di *database*. Yuk, kita bahas kenapa *graceful shutdown* itu wajib banget!",{"id":383},"251a54a7-1d24-47fd-8cbc-a46fd42cbb6f",[69,75,148,355,385,76,88],"kubernetes",{"id":387,"title":388,"slug":389,"excerpt":390,"thumbnail_image":391,"tags":393},"39","Database Sharding vs Partitioning: Kapan Data Perlu Dipecah?","database-sharding-vs-partitioning-kapan-data-perlu-dipecah","Tabel transaksi kalian udah nembus miliaran baris dan tiap *query* laporan bikin *CPU* melonjak 100%? Sebelum asal pecah data, yuk kita pahami dulu beda *sharding* sama *partitioning*!",{"id":392},"08ef5fe5-d935-47b3-bbbc-d976948b2a9e",[69,134,135,76,88,394,395],"sharding","scaling",{"id":397,"title":398,"slug":399,"excerpt":400,"thumbnail_image":401,"tags":403},"40","Menyelami Distributed Tracing: Melacak Jejak Request di Balik Keruwetan Microservices","menyelami-distributed-tracing-melacak-jejak-request-microservices","Satu klik Checkout di backend kalian bisa memicu puluhan network call antar-service, tapi pas ada yang lambat, service mana sebenernya yang salah? Log aja nggak cukup buat njawab itu. Yuk, kita bedah Distributed Tracing!",{"id":402},"1ace92fa-b89c-4cef-ab75-4e4cd67a089c",[69,404,405,406,123,88,407],"distributed-systems","observability","open-telemetry","tracing","\u003Cp>Setelah \u003Ca href=\"https://blog.vuejs.org/posts/vue-3-as-the-new-default.html\">Februari lalu\u003C/a> Vue 3 resmi menjadi versi bawaan yang baru, Nuxt sebagai \u003Cem>framework\u003C/em> populer berbasis Vue nggak mau ketinggalan buat melakukan migrasi besar-besaran.\u003C/p>\n\u003Cp>Bukan sekadar mengikuti tren Vue, Nuxt 3 hadir membawa banyak banget fitur baru yang siap memanjakan \u003Cem>developer experience\u003C/em> (DX) dan bikin pekerjaan koding kita jadi jauh lebih ringan.\u003C/p>\n\u003Cp>Pada kesempatan kali ini, kita bakal mengulas seputar rilis Nuxt 3, fitur-fitur canggih apa saja yang diusung, dan apakah kalian sudah harus bersiap-siap buat migrasi? Yuk, kita bahas bareng-bareng! 😄\u003C/p>\n\u003Ch2 id=\"status-nuxt-3-saat-ini\">Status Nuxt 3 Saat Ini\u003C/h2>\n\u003Cp>Saat artikel ini ditulis, Nuxt 3 sedang berada di tahap \u003Cem>Release Candidate\u003C/em> ke-3 (RC 3). Artinya, versi ini nggak bakal menerima perubahan besar lagi, melainkan fokus pada perbaikan minor dan stabilitas menjelang rilis final.\u003C/p>\n\u003Cp>Kalau mengintip \u003Cem>roadmap\u003C/em> di situs resmi mereka, Nuxt 3 versi stabil dijadwalkan meluncur sekitar bulan Juni 2022 ini.\u003C/p>\n\u003Cp>Meskipun statusnya masih 'kandidat', Nuxt 3 saat ini sebenarnya sudah sangat fungsional, cukup stabil, dan seru banget buat dicoba—tapi disarankan jangan dipakai di lingkungan produksi dulu ya!\u003C/p>\n\u003Cp>Sejalan dengan pengembangan versi barunya, modul-modul inti (\u003Cem>core modules\u003C/em>) seperti Content, Auth, dan Image juga sedang ikut berbenah. Bahkan, Nuxt Content v2 sudah curi \u003Cem>start\u003C/em> rilis duluan sejak 24 Mei kemarin.\u003C/p>\n\u003Ch2 id=\"fitur-fitur-baru-yang-bikin-ngiler\">Fitur-fitur Baru yang Bikin Ngiler\u003C/h2>\n\u003Cp>Transisi dari Nuxt 2 ke Nuxt 3 bisa dibilang sebagai lompatan yang sangat jauh. Saking banyaknya perubahan mendasar, tim pengembang Nuxt sampai harus menulis ulang seluruh \u003Cem>codebase\u003C/em> dari nol dengan teknologi baru.\u003C/p>\n\u003Cp>Kira-kira seberapa dahsyat perubahannya? Berikut adalah deretan fitur andalan yang hadir di Nuxt 3:\u003C/p>\n\u003Ch3 id=\"vue-3-dan-typescript-secara-bawaan\">Vue 3 dan TypeScript secara Bawaan\u003C/h3>\n\u003Cp>Karena Nuxt 3 berdiri di atas Vue 3, sebagai \u003Cstrong>'framework-nya framework'\u003C/strong>, dia otomatis membawa semua kelebihan yang ada pada Vue 3. Beberapa di antaranya meliputi:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Composition API\u003C/strong> — gaya penulisan kode yang lebih modular dan gampang dibagikan lewat \u003Cem>composables\u003C/em>.\u003C/li>\n\u003Cli>\u003Cstrong>TypeScript\u003C/strong> — dukungan penulisan tipe data statis yang langsung aktif tanpa perlu konfigurasi ribet lagi.\u003C/li>\n\u003Cli>\u003Cstrong>Performa Lebih Ngebut\u003C/strong> — rendering halaman diklaim lebih cepat sampai 55%, ukuran \u003Cem>bundle\u003C/em> terpangkas hingga 41%, dan penggunaan memori RAM lebih hemat sampai 54%.\u003C/li>\n\u003C/ul>\n\u003Cp>Berhubung Vue 3 kini condong menggunakan TypeScript secara bawaan, Nuxt pun ikut menyesuaikan diri. Langkah adaptasi ini nggak main-main, karena seluruh kode inti Nuxt 3 akhirnya ditulis ulang menggunakan TypeScript. Berbeda dari Nuxt 2 yang didominasi oleh JavaScript biasa, kini proporsi repositori resminya hampir seluruhnya beralih ke TypeScript.\u003C/p>\n\u003Cblockquote>\n\u003Cp>📷 \u003Cem>Ilustrasi: grafik perbandingan komposisi bahasa pemrograman antara Nuxt 2 berbasis JavaScript dan Nuxt 3 berbasis TypeScript.\u003C/em>\u003C/p>\n\u003C/blockquote>\n\u003Cp>Fitur \u003Cem>static typing\u003C/em> yang dibawa TypeScript bikin proyek Nuxt kalian jadi lebih mudah dikelola saat ukurannya mulai membesar. Ditambah lagi dengan dukungan fitur editor seperti \u003Cem>auto-completion\u003C/em> dan \u003Cem>IntelliSense\u003C/em> yang aktif, pengalaman koding jadi terasa makin mulus.\u003C/p>\n\u003Ch3 id=\"vite-sebagai-bundler-utama\">Vite sebagai Bundler Utama\u003C/h3>\n\u003Cp>Sama seperti Vue 3, Nuxt 3 kini membawa dukungan penuh untuk Vite sebagai \u003Cem>module bundler\u003C/em> bawaannya, menggantikan Webpack yang dipakai di versi terdahulu.\u003C/p>\n\u003Cp>Hasilnya? Proses \u003Cem>build\u003C/em> dan \u003Cem>hot module replacement\u003C/em> pas koding berjalan jadi super cepat, hampir instan! Ukuran berkas akhirnya juga relatif lebih kecil dibandingkan hasil kompilasi Webpack.\u003C/p>\n\u003Cp>Tapi buat kalian yang masih setia atau butuh Webpack, tenang saja. Nuxt 3 tetap menyediakan opsi buat menggunakan Webpack 5 dengan konfigurasi yang nggak kalah mudah.\u003C/p>\n\u003Ch3 id=\"auto-import-yang-praktis\">Auto Import yang Praktis\u003C/h3>\n\u003Cp>Aktivitas mengimpor komponen atau fungsi bantuan sering kali memenuhi baris kode paling atas, terutama pada proyek Nuxt yang kompleks.\u003C/p>\n\u003Cp>Biar koding makin efisien, Nuxt 3 merilis fitur \u003Cem>Auto Import\u003C/em> yang canggih.\u003C/p>\n\u003Cp>Berkat fitur ini, kalian nggak perlu lagi menuliskan baris \u003Ccode>import\u003C/code> secara manual tiap kali mau memakai komponen atau fungsi bantuan. Tinggal panggil namanya, dan Nuxt bakal mendeteksinya secara otomatis di balik layar.\u003C/p>\n\u003Cp>Fitur \u003Cem>auto import\u003C/em> ini bekerja untuk \u003Cem>helper functions\u003C/em>, komponen, \u003Cem>composables\u003C/em>, plugin, hingga API bawaan Vue.\u003C/p>\n\u003Cp>Kerennya lagi, ini nggak seperti variabel global biasa. Editor kalian akan tetap mengenali jenis komponen tersebut, sehingga fitur \u003Cem>IntelliSense\u003C/em> dan sugerensi kode tetap aktif membantu koding kalian.\u003C/p>\n\u003Ch3 id=\"server-engine-baru-bernama-nitro\">Server Engine Baru Bernama Nitro\u003C/h3>\n\u003Cp>Salah satu lompatan terbesar di Nuxt 3 adalah kehadiran mesin server (\u003Cem>server engine\u003C/em>) baru yang dinamai Nitro.\u003C/p>\n\u003Cp>Nitro adalah proyek sumber terbuka di bawah naungan ekosistem UnJS, dikembangkan bersama \u003Cem>library\u003C/em> lainnya seperti \u003Ccode>h3\u003C/code>.\u003C/p>\n\u003Cp>Nitro memungkinkan server Nuxt kalian berjalan secara mandiri tanpa memerlukan folder \u003Ccode>node_modules\u003C/code> lagi di lingkungan produksi. Ini berbeda jauh dengan versi sebelumnya yang sangat bergantung pada dependensi tersebut.\u003C/p>\n\u003Cp>Semua kode program, pustaka pihak ketiga, dan hasil kompilasi bakal dikemas rapi ke dalam folder \u003Ccode>.output\u003C/code>. Folder ini siap kalian jalankan langsung di Node.js maupun layanan \u003Cem>service worker\u003C/em> seperti Cloudflare Workers tanpa perlu menjalankan perintah \u003Ccode>npm install\u003C/code> lagi.\u003C/p>\n\u003Cp>Bagaimana? Keren banget kan arsitektur barunya? 😎\u003C/p>\n\u003Ch2 id=\"sudah-siap-mencoba-nuxt-3\">Sudah Siap Mencoba Nuxt 3?\u003C/h2>\n\u003Cp>Itu dia beberapa fitur revolusioner yang diusung oleh Nuxt 3. Kita tinggal menunggu saja tanggal peluncuran resminya dalam waktu dekat.\u003C/p>\n\u003Cp>Bagaimana dengan kalian? Sudah ada rencana buat membangun proyek baru menggunakan Nuxt 3? Atau malah sudah bersiap melakukan migrasi proyek lama?\u003C/p>\n\u003Cp>Untuk informasi lebih lengkap dan dokumentasi resmi, kalian bisa langsung mengunjungi situs \u003Ca href=\"https://v3.nuxtjs.org\">Nuxt 3\u003C/a>.\u003C/p>\n\u003Cp>Selamat berkoding ria 👋\u003C/p>\n","\u003Cul>\n\u003Cli>Nuxt 3 berbasis Vue 3 dengan Composition API dan dukungan TypeScript secara bawaan.\u003C/li>\n\u003Cli>Mengadopsi Vite sebagai bundler default yang membuat proses development jauh lebih cepat dibanding Webpack.\u003C/li>\n\u003Cli>Server engine baru bernama Nitro memungkinkan output build yang super ringan tanpa ketergantungan node_modules.\u003C/li>\n\u003C/ul>\n",[411,414,417,425],{"id":315,"title":316,"slug":317,"excerpt":318,"thumbnail_image":412,"tags":413},{"id":320},[322,323,324,325,326],{"id":78,"title":79,"slug":80,"excerpt":81,"thumbnail_image":415,"tags":416},{"id":83},[69,76,85,86,87,88,89],{"id":418,"title":419,"slug":420,"excerpt":421,"thumbnail_image":422,"tags":424},"44","Transactional Outbox Pattern: Solusi Konsistensi Database dan Message Broker Tanpa 2PC","transactional-outbox-pattern-konsistensi-database-message-broker","Pernah nggak kalian lihat pesanan udah masuk database, tapi email konfirmasinya nggak pernah kekirim? Itu gejala *dual-write problem*. Yuk, kita bedah Transactional Outbox Pattern biar data dan *event* kalian nggak lagi berselisih paham!",{"id":423},"e3c617fd-1486-4b82-b937-94fbec846c77",[69,123,88,134,122,76,135],{"id":426,"title":427,"slug":428,"excerpt":429,"thumbnail_image":430,"tags":432},"43","Dead Letter Queue (DLQ) & Retry Policy: Menyelamatkan Pesan Nyasar di RabbitMQ Tanpa Bikin Worker Macet","dead-letter-queue-retry-policy-rabbitmq-resilient-messaging","Pernah nggak sih, *worker* kalian nolak satu pesan terus-terusan sampai CPU melonjak 100%? Itu namanya *poison message loop*, jebakan klasik di RabbitMQ. Yuk, kita bahas cara pasang *retry policy* dan *dead letter queue* yang bener!",{"id":431},"6c0a7ead-4841-4073-b29e-df7ae0f2aa3c",[121,122,69,88,123,124,274],[434,438,441,445,448,451,454],{"text":435,"depth":436,"id":437},"Status Nuxt 3 Saat Ini",2,"status-nuxt-3-saat-ini",{"text":439,"depth":436,"id":440},"Fitur-fitur Baru yang Bikin Ngiler","fitur-fitur-baru-yang-bikin-ngiler",{"text":442,"depth":443,"id":444},"Vue 3 dan TypeScript secara Bawaan",3,"vue-3-dan-typescript-secara-bawaan",{"text":446,"depth":443,"id":447},"Vite sebagai Bundler Utama","vite-sebagai-bundler-utama",{"text":449,"depth":443,"id":450},"Auto Import yang Praktis","auto-import-yang-praktis",{"text":452,"depth":443,"id":453},"Server Engine Baru Bernama Nitro","server-engine-baru-bernama-nitro",{"text":455,"depth":436,"id":456},"Sudah Siap Mencoba Nuxt 3?","sudah-siap-mencoba-nuxt-3",1791045073057]