[{"data":1,"prerenderedAt":344},["ShallowReactive",2],{"blog-optimasi-pure-ssg-nuxt":3},{"id":4,"title":5,"body":6,"description":327,"extension":328,"meta":329,"navigation":339,"path":340,"seo":341,"stem":342,"__hash__":343},"blog\u002Fblog\u002Foptimasi-pure-ssg-nuxt.md","Panduan Optimasi Pure SSG pada Nuxt: Kecepatan Instan di Vercel",{"type":7,"value":8,"toc":321},"minimark",[9,13,21,26,29,51,55,63,194,208,212,219,277,280,292,296,299,310,317],[10,11,12],"p",{},"Banyak situs web modern menderita sindrom \"kelebihan bobot JavaScript\". Framework canggih sering kali menghasilkan bundle ratusan kilobyte yang sebenarnya tidak diperlukan untuk halaman yang mayoritas berisi teks, dokumentasi, atau portofolio.",[10,14,15,16,20],{},"Dengan ",[17,18,19],"strong",{},"Pure SSG (Static Site Generation)"," pada Nuxt 4, kita dapat memangkas waktu Time to First Byte (TTFB) hingga mendekati nol dan menyajikan halaman statis murni yang di-cache di seluruh CDN global Vercel.",[22,23,25],"h2",{"id":24},"kenapa-memilih-pure-ssg-dibanding-ssr","Kenapa Memilih Pure SSG Dibanding SSR?",[10,27,28],{},"Untuk situs pribadi, blog, atau showcase karya:",[30,31,32,39,45],"ul",{},[33,34,35,38],"li",{},[17,36,37],{},"Biaya Nol & Bebas Maintenance Server",": Tidak ada proses Node.js yang berjalan di background, tidak ada kekhawatiran memori bocor (memory leak) atau restart process.",[33,40,41,44],{},[17,42,43],{},"Keamanan Absolut",": Tidak ada celah Remote Code Execution (RCE) di sisi server karena yang disajikan hanyalah file HTML, CSS, dan aset statis.",[33,46,47,50],{},[17,48,49],{},"Skalabilitas Tak Terbatas",": Jika artikel Anda viral di media sosial, CDN Vercel dapat menangani jutaan kunjungan per detik tanpa server ambruk.",[22,52,54],{"id":53},"trik-1-konfigurasi-nitro-prerender-crawler","Trik 1: Konfigurasi Nitro Prerender Crawler",[10,56,57,58,62],{},"Di ",[59,60,61],"code",{},"nuxt.config.ts",", pastikan Nitro diinstruksikan untuk merayapi semua link internal saat proses build:",[64,65,70],"pre",{"className":66,"code":67,"language":68,"meta":69,"style":69},"language-typescript shiki shiki-themes github-light github-dark","export default defineNuxtConfig({\n  nitro: {\n    prerender: {\n      crawlLinks: true,\n      routes: [\n        '\u002F',\n        '\u002Fblog',\n        '\u002Fproyek',\n        '\u002Fteman',\n        '\u002Fgarasi',\n        '\u002F404.html'\n      ]\n    }\n  }\n})\n","typescript","",[59,71,72,92,98,104,117,123,132,140,148,156,164,170,176,182,188],{"__ignoreMap":69},[73,74,77,81,84,88],"span",{"class":75,"line":76},"line",1,[73,78,80],{"class":79},"szBVR","export",[73,82,83],{"class":79}," default",[73,85,87],{"class":86},"sScJk"," defineNuxtConfig",[73,89,91],{"class":90},"sVt8B","({\n",[73,93,95],{"class":75,"line":94},2,[73,96,97],{"class":90},"  nitro: {\n",[73,99,101],{"class":75,"line":100},3,[73,102,103],{"class":90},"    prerender: {\n",[73,105,107,110,114],{"class":75,"line":106},4,[73,108,109],{"class":90},"      crawlLinks: ",[73,111,113],{"class":112},"sj4cs","true",[73,115,116],{"class":90},",\n",[73,118,120],{"class":75,"line":119},5,[73,121,122],{"class":90},"      routes: [\n",[73,124,126,130],{"class":75,"line":125},6,[73,127,129],{"class":128},"sZZnC","        '\u002F'",[73,131,116],{"class":90},[73,133,135,138],{"class":75,"line":134},7,[73,136,137],{"class":128},"        '\u002Fblog'",[73,139,116],{"class":90},[73,141,143,146],{"class":75,"line":142},8,[73,144,145],{"class":128},"        '\u002Fproyek'",[73,147,116],{"class":90},[73,149,151,154],{"class":75,"line":150},9,[73,152,153],{"class":128},"        '\u002Fteman'",[73,155,116],{"class":90},[73,157,159,162],{"class":75,"line":158},10,[73,160,161],{"class":128},"        '\u002Fgarasi'",[73,163,116],{"class":90},[73,165,167],{"class":75,"line":166},11,[73,168,169],{"class":128},"        '\u002F404.html'\n",[73,171,173],{"class":75,"line":172},12,[73,174,175],{"class":90},"      ]\n",[73,177,179],{"class":75,"line":178},13,[73,180,181],{"class":90},"    }\n",[73,183,185],{"class":75,"line":184},14,[73,186,187],{"class":90},"  }\n",[73,189,191],{"class":75,"line":190},15,[73,192,193],{"class":90},"})\n",[10,195,15,196,199,200,203,204,207],{},[59,197,198],{},"crawlLinks: true",", setiap kali Anda menambahkan artikel baru di folder ",[59,201,202],{},"content\u002F",", Nitro otomatis mendeteksi link tersebut dari halaman ",[59,205,206],{},"\u002Fblog"," dan mengompilasinya menjadi file HTML fisik mandiri.",[22,209,211],{"id":210},"trik-2-offline-icon-bundling-nuxticon","Trik 2: Offline Icon Bundling (@nuxt\u002Ficon)",[10,213,214,215,218],{},"Salah satu penyebab build lambat atau ikon berkedip saat pertama kali dibuka adalah request jaringan ke remote iconify CDN. Kita dapat memaksa ",[59,216,217],{},"@nuxt\u002Ficon"," untuk mengemas koleksi ikon secara lokal:",[64,220,222],{"className":66,"code":221,"language":68,"meta":69,"style":69},"icon: {\n  serverBundle: 'local',\n  clientBundle: {\n    scan: true, \u002F\u002F Otomatis memindai file SFC untuk ikon yang digunakan\n  }\n}\n",[59,223,224,232,245,252,268,272],{"__ignoreMap":69},[73,225,226,229],{"class":75,"line":76},[73,227,228],{"class":86},"icon",[73,230,231],{"class":90},": {\n",[73,233,234,237,240,243],{"class":75,"line":94},[73,235,236],{"class":86},"  serverBundle",[73,238,239],{"class":90},": ",[73,241,242],{"class":128},"'local'",[73,244,116],{"class":90},[73,246,247,250],{"class":75,"line":100},[73,248,249],{"class":86},"  clientBundle",[73,251,231],{"class":90},[73,253,254,257,259,261,264],{"class":75,"line":106},[73,255,256],{"class":86},"    scan",[73,258,239],{"class":90},[73,260,113],{"class":112},[73,262,263],{"class":90},", ",[73,265,267],{"class":266},"sJ8bj","\u002F\u002F Otomatis memindai file SFC untuk ikon yang digunakan\n",[73,269,270],{"class":75,"line":119},[73,271,187],{"class":90},[73,273,274],{"class":75,"line":125},[73,275,276],{"class":90},"}\n",[10,278,279],{},"Hasilnya:",[281,282,283,286,289],"ol",{},[33,284,285],{},"Tidak ada dependensi jaringan luar saat prerender berlangsung.",[33,287,288],{},"File SVG di-injeksi langsung ke dalam HTML atau asset bundle lokal.",[33,290,291],{},"Nol layout shift (CLS 0.00).",[22,293,295],{"id":294},"trik-3-menjaga-palet-minimalis-geist","Trik 3: Menjaga Palet Minimalis Geist",[10,297,298],{},"Gaya desain Vercel Geist bukan hanya indah, tetapi juga ramah performa:",[30,300,301,304,307],{},[33,302,303],{},"Hindari library animasi berat yang memuat puluhan kilobyte matematika matrix jika cukup ditangani CSS transitions bawaan.",[33,305,306],{},"Gunakan Tailwind CSS dengan purging otomatis. Hanya kelas yang benar-benar digunakan yang disertakan dalam berkas CSS akhir (~12-15 kB gzip).",[33,308,309],{},"Hindari penggunaan canvas background grid dinamis atau partikel mouse hover yang membebani GPU perangkat pengunjung.",[10,311,312,313,316],{},"Dengan tiga prinsip di atas, website ini berhasil meraih skor sempurna ",[17,314,315],{},"100\u002F100 pada seluruh metrik Google Lighthouse",".",[318,319,320],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":69,"searchDepth":94,"depth":94,"links":322},[323,324,325,326],{"id":24,"depth":94,"text":25},{"id":53,"depth":94,"text":54},{"id":210,"depth":94,"text":211},{"id":294,"depth":94,"text":295},"Bagaimana cara mengejar 100\u002F100 Google Lighthouse dengan memanfaatkan Nitro prerender crawler, bundling ikon lokal, dan eliminasi runtime server overhead.","md",{"date":330,"category":331,"tags":332,"readTime":338,"cover":69},"2026-06-10","Web Performance",[333,334,335,336,337],"Nuxt","SSG","Vercel","Performance","SEO","5 menit",true,"\u002Fblog\u002Foptimasi-pure-ssg-nuxt",{"title":5,"description":327},"blog\u002Foptimasi-pure-ssg-nuxt","C_K_jUzbGdtFEcUna7yH9w13I957COFH13iXcc2J3Iw",1789128905113]