[{"data":1,"prerenderedAt":1214},["ShallowReactive",2],{"blog":3},[4,245,900],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"date":11,"author":12,"tags":13,"body":19,"_type":239,"_id":240,"_source":241,"_file":242,"_stem":243,"_extension":244},"\u002Fblog\u002Fwhy-nextjs-vs-nuxt","blog",false,"","Next.js vs Nuxt 3 เลือกอะไรดีสำหรับโปรเจกต์ไทยในปี 2025?","หลายปีที่ผ่านมา ลูกค้าที่มาหาเรามักถามคำถามนี้บ่อยมาก: \"ควรใช้ Next.js หรือ Nuxt ดี?\" คำตอบของเราก็คือ \"ขึ้นอยู่กับ\" — แต่ไม่ใช่คำตอบแบบหลีกเลี่ยง เพราะมีปัจจัยที่ชัดเจนมากที่ช่วยตัดสินใจได้","2025-03-10","ทีม Khantuna",[14,15,16,17,18],"Next.js","Nuxt","Vue","React","Frontend",{"type":20,"children":21,"toc":231},"root",[22,29,36,41,47,56,61,69,74,82,87,93,101,106,114,126,134,139,145,157,182,187,221],{"type":23,"tag":24,"props":25,"children":26},"element","p",{},[27],{"type":28,"value":10},"text",{"type":23,"tag":30,"props":31,"children":33},"h2",{"id":32},"ทำไมถึงถามคำถามนี้กัน",[34],{"type":28,"value":35},"ทำไมถึงถามคำถามนี้กัน?",{"type":23,"tag":24,"props":37,"children":38},{},[39],{"type":28,"value":40},"ทั้งสอง framework ทำงานได้คล้ายกันมากในระดับ high-level — SSR, SSG, file-based routing, API routes แต่ ecosystem, developer experience และ community support แตกต่างกันพอที่จะส่งผลต่อ project ยาวๆ",{"type":23,"tag":30,"props":42,"children":44},{"id":43},"เลือก-nextjs-เมื่อ",[45],{"type":28,"value":46},"เลือก Next.js เมื่อ...",{"type":23,"tag":24,"props":48,"children":49},{},[50],{"type":23,"tag":51,"props":52,"children":53},"strong",{},[54],{"type":28,"value":55},"ทีม React \u002F JavaScript ecosystem",{"type":23,"tag":24,"props":57,"children":58},{},[59],{"type":28,"value":60},"ถ้าทีม developer คุ้นเคยกับ React อยู่แล้ว Next.js เป็นตัวเลือกที่สมเหตุสมผลที่สุด Onboarding time สั้นกว่ามาก และ npm ecosystem ของ React ใหญ่กว่า",{"type":23,"tag":24,"props":62,"children":63},{},[64],{"type":23,"tag":51,"props":65,"children":66},{},[67],{"type":28,"value":68},"ต้องการ Vercel AI SDK หรือ Server Actions",{"type":23,"tag":24,"props":70,"children":71},{},[72],{"type":28,"value":73},"Vercel ลงทุนกับ Next.js โดยตรง ถ้าโปรเจกต์ต้องการ AI features ที่ integrate ได้ง่าย หรือต้องการ Server Actions ที่ mature มาก Next.js คือ first-class choice",{"type":23,"tag":24,"props":75,"children":76},{},[77],{"type":23,"tag":51,"props":78,"children":79},{},[80],{"type":28,"value":81},"Startup ที่ต้องการ hire ง่าย",{"type":23,"tag":24,"props":83,"children":84},{},[85],{"type":28,"value":86},"React developer มีมากกว่า Vue developer ในตลาดไทย ถ้า plan ว่าจะ hire team เพิ่มในอนาคต Next.js ทำให้หาคนได้ง่ายกว่า",{"type":23,"tag":30,"props":88,"children":90},{"id":89},"เลือก-nuxt-3-เมื่อ",[91],{"type":28,"value":92},"เลือก Nuxt 3 เมื่อ...",{"type":23,"tag":24,"props":94,"children":95},{},[96],{"type":23,"tag":51,"props":97,"children":98},{},[99],{"type":28,"value":100},"ต้องการ DX ที่ดีกว่าออกกล่อง",{"type":23,"tag":24,"props":102,"children":103},{},[104],{"type":28,"value":105},"Nuxt 3 มี auto-imports, composables, components — ทุกอย่างที่ setup ให้เรียบร้อย ไม่ต้อง config อะไรเพิ่ม ทีมที่ไม่อยากเสียเวลา setup เลือก Nuxt ได้เลย",{"type":23,"tag":24,"props":107,"children":108},{},[109],{"type":23,"tag":51,"props":110,"children":111},{},[112],{"type":28,"value":113},"Content-heavy site หรือ Blog",{"type":23,"tag":24,"props":115,"children":116},{},[117,124],{"type":23,"tag":118,"props":119,"children":121},"code",{"className":120},[],[122],{"type":28,"value":123},"@nuxt\u002Fcontent",{"type":28,"value":125}," เป็น best-in-class ใน Vue ecosystem และทำงานได้ดีมากกับ Nuxt รองรับ MDX-like, content queries และ live editing ออกกล่อง",{"type":23,"tag":24,"props":127,"children":128},{},[129],{"type":23,"tag":51,"props":130,"children":131},{},[132],{"type":28,"value":133},"Vue 3 Composition API + TypeScript",{"type":23,"tag":24,"props":135,"children":136},{},[137],{"type":28,"value":138},"ถ้าทีม prefer Vue syntax และ Composition API ที่ \"ง่ายกว่า\" React hooks ในหลายๆ กรณี Nuxt ให้ DX ที่ดีกว่ามาก",{"type":23,"tag":30,"props":140,"children":142},{"id":141},"performance-จริงๆ-ต่างกันไหม",[143],{"type":28,"value":144},"Performance จริงๆ ต่างกันไหม?",{"type":23,"tag":24,"props":146,"children":147},{},[148,150,155],{"type":28,"value":149},"ในประสบการณ์ของเรา ",{"type":23,"tag":51,"props":151,"children":152},{},[153],{"type":28,"value":154},"ไม่ต่างกันมาก",{"type":28,"value":156}," ถ้า implement ถูกต้องทั้งคู่ Lighthouse 95+ เป็นเรื่องที่ทำได้ด้วยทั้งสอง framework สิ่งที่ส่งผลมากกว่าคือ:",{"type":23,"tag":158,"props":159,"children":160},"ol",{},[161,167,172,177],{"type":23,"tag":162,"props":163,"children":164},"li",{},[165],{"type":28,"value":166},"Image optimization ที่ถูกต้อง",{"type":23,"tag":162,"props":168,"children":169},{},[170],{"type":28,"value":171},"Font loading strategy",{"type":23,"tag":162,"props":173,"children":174},{},[175],{"type":28,"value":176},"JavaScript bundle size",{"type":23,"tag":162,"props":178,"children":179},{},[180],{"type":28,"value":181},"Server response time (hosting)",{"type":23,"tag":30,"props":183,"children":185},{"id":184},"คำตอบสุดท้ายของเรา",[186],{"type":28,"value":184},{"type":23,"tag":188,"props":189,"children":190},"ul",{},[191,201,211],{"type":23,"tag":162,"props":192,"children":193},{},[194,199],{"type":23,"tag":51,"props":195,"children":196},{},[197],{"type":28,"value":198},"React\u002FNext.js",{"type":28,"value":200},": เลือกถ้าทีมเป็น React หรือต้องการ hire ง่าย",{"type":23,"tag":162,"props":202,"children":203},{},[204,209],{"type":23,"tag":51,"props":205,"children":206},{},[207],{"type":28,"value":208},"Vue\u002FNuxt",{"type":28,"value":210},": เลือกถ้าต้องการ DX ที่ดีกว่า หรือทีมชอบ Vue syntax",{"type":23,"tag":162,"props":212,"children":213},{},[214,219],{"type":23,"tag":51,"props":215,"children":216},{},[217],{"type":28,"value":218},"ไม่มีคำตอบผิดถูก",{"type":28,"value":220},": ทั้งสองเป็น production-grade framework ที่ใช้งานได้ดีในองค์กรขนาดใหญ่",{"type":23,"tag":24,"props":222,"children":223},{},[224,226],{"type":28,"value":225},"ที่ Khantuna เราใช้ทั้งสองขึ้นอยู่กับโปรเจกต์ และเราเชี่ยวชาญทั้งคู่ เพราะเราเชื่อว่า ",{"type":23,"tag":51,"props":227,"children":228},{},[229],{"type":28,"value":230},"เลือก tool ให้เหมาะงาน ไม่ใช่เลือกงานให้เหมาะ tool",{"title":8,"searchDepth":232,"depth":232,"links":233},2,[234,235,236,237,238],{"id":32,"depth":232,"text":35},{"id":43,"depth":232,"text":46},{"id":89,"depth":232,"text":92},{"id":141,"depth":232,"text":144},{"id":184,"depth":232,"text":184},"markdown","content:blog:why-nextjs-vs-nuxt.md","content","blog\u002Fwhy-nextjs-vs-nuxt.md","blog\u002Fwhy-nextjs-vs-nuxt","md",{"_path":246,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":247,"description":248,"date":249,"author":12,"tags":250,"body":255,"_type":239,"_id":897,"_source":241,"_file":898,"_stem":899,"_extension":244},"\u002Fblog\u002Fcore-web-vitals-thai-2025","Core Web Vitals 2025 ทำไมเว็บไทยถึง fail และวิธีแก้จริงๆ","Google ใช้ Core Web Vitals (CWV) เป็นส่วนหนึ่งของ ranking signal มาตั้งแต่ปี 2021 แต่จากการที่เราตรวจสอบเว็บลูกค้าและ website ไทยทั่วไปกว่า 200 รายการ พบว่า มากกว่า 70% fail อย่างน้อยหนึ่ง metric","2025-01-22",[251,252,253,254],"Performance","SEO","Core Web Vitals","Lighthouse",{"type":20,"children":256,"toc":887},[257,267,272,279,289,294,302,328,336,533,539,548,553,561,593,600,736,742,751,756,763,797,803,845,851,856,866,871,876,881],{"type":23,"tag":24,"props":258,"children":259},{},[260,262],{"type":28,"value":261},"Google ใช้ Core Web Vitals (CWV) เป็นส่วนหนึ่งของ ranking signal มาตั้งแต่ปี 2021 แต่จากการที่เราตรวจสอบเว็บลูกค้าและ website ไทยทั่วไปกว่า 200 รายการ พบว่า ",{"type":23,"tag":51,"props":263,"children":264},{},[265],{"type":28,"value":266},"มากกว่า 70% fail อย่างน้อยหนึ่ง metric",{"type":23,"tag":30,"props":268,"children":270},{"id":269},"สามตัวชี้วัดที่ต้องรู้",[271],{"type":28,"value":269},{"type":23,"tag":273,"props":274,"children":276},"h3",{"id":275},"lcp-largest-contentful-paint-โหลดเร็วแค่ไหน",[277],{"type":28,"value":278},"LCP (Largest Contentful Paint) — โหลดเร็วแค่ไหน?",{"type":23,"tag":24,"props":280,"children":281},{},[282,284],{"type":28,"value":283},"เป้าหมาย: ",{"type":23,"tag":51,"props":285,"children":286},{},[287],{"type":28,"value":288},"\u003C 2.5 วินาที",{"type":23,"tag":24,"props":290,"children":291},{},[292],{"type":28,"value":293},"LCP วัดเวลาที่ element ที่ใหญ่ที่สุดบนหน้า (มักเป็นรูปหรือ heading ใหญ่) โหลดเสร็จ",{"type":23,"tag":24,"props":295,"children":296},{},[297],{"type":23,"tag":51,"props":298,"children":299},{},[300],{"type":28,"value":301},"ปัญหาที่พบบ่อยในเว็บไทย:",{"type":23,"tag":188,"props":303,"children":304},{},[305,310,323],{"type":23,"tag":162,"props":306,"children":307},{},[308],{"type":28,"value":309},"Hero image ที่ไม่ได้ optimize — ไฟล์ขนาด 3-8 MB เป็นเรื่องปกติ",{"type":23,"tag":162,"props":311,"children":312},{},[313,315,321],{"type":28,"value":314},"ไม่มี ",{"type":23,"tag":118,"props":316,"children":318},{"className":317},[],[319],{"type":28,"value":320},"fetchpriority=\"high\"",{"type":28,"value":322}," บน hero image",{"type":23,"tag":162,"props":324,"children":325},{},[326],{"type":28,"value":327},"ใช้ Google Fonts โดยไม่ preconnect",{"type":23,"tag":24,"props":329,"children":330},{},[331],{"type":23,"tag":51,"props":332,"children":333},{},[334],{"type":28,"value":335},"วิธีแก้:",{"type":23,"tag":337,"props":338,"children":342},"pre",{"className":339,"code":340,"language":341,"meta":8,"style":8},"language-html shiki shiki-themes github-light github-dark","\u003C!-- ✅ ถูก -->\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Cimg src=\"\u002Fhero.avif\" fetchpriority=\"high\" alt=\"Hero\">\n\n\u003C!-- ❌ ผิด -->\n\u003Cimg src=\"\u002Fhero-original-8mb.jpg\" alt=\"Hero\">\n","html",[343],{"type":23,"tag":118,"props":344,"children":345},{"__ignoreMap":8},[346,358,414,473,483,492],{"type":23,"tag":347,"props":348,"children":351},"span",{"class":349,"line":350},"line",1,[352],{"type":23,"tag":347,"props":353,"children":355},{"style":354},"--shiki-default:#6A737D;--shiki-dark:#6A737D",[356],{"type":28,"value":357},"\u003C!-- ✅ ถูก -->\n",{"type":23,"tag":347,"props":359,"children":360},{"class":349,"line":232},[361,367,373,379,384,390,395,399,404,409],{"type":23,"tag":347,"props":362,"children":364},{"style":363},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[365],{"type":28,"value":366},"\u003C",{"type":23,"tag":347,"props":368,"children":370},{"style":369},"--shiki-default:#22863A;--shiki-dark:#85E89D",[371],{"type":28,"value":372},"link",{"type":23,"tag":347,"props":374,"children":376},{"style":375},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[377],{"type":28,"value":378}," rel",{"type":23,"tag":347,"props":380,"children":381},{"style":363},[382],{"type":28,"value":383},"=",{"type":23,"tag":347,"props":385,"children":387},{"style":386},"--shiki-default:#032F62;--shiki-dark:#9ECBFF",[388],{"type":28,"value":389},"\"preconnect\"",{"type":23,"tag":347,"props":391,"children":392},{"style":375},[393],{"type":28,"value":394}," href",{"type":23,"tag":347,"props":396,"children":397},{"style":363},[398],{"type":28,"value":383},{"type":23,"tag":347,"props":400,"children":401},{"style":386},[402],{"type":28,"value":403},"\"https:\u002F\u002Ffonts.gstatic.com\"",{"type":23,"tag":347,"props":405,"children":406},{"style":375},[407],{"type":28,"value":408}," crossorigin",{"type":23,"tag":347,"props":410,"children":411},{"style":363},[412],{"type":28,"value":413},">\n",{"type":23,"tag":347,"props":415,"children":417},{"class":349,"line":416},3,[418,422,427,432,436,441,446,450,455,460,464,469],{"type":23,"tag":347,"props":419,"children":420},{"style":363},[421],{"type":28,"value":366},{"type":23,"tag":347,"props":423,"children":424},{"style":369},[425],{"type":28,"value":426},"img",{"type":23,"tag":347,"props":428,"children":429},{"style":375},[430],{"type":28,"value":431}," src",{"type":23,"tag":347,"props":433,"children":434},{"style":363},[435],{"type":28,"value":383},{"type":23,"tag":347,"props":437,"children":438},{"style":386},[439],{"type":28,"value":440},"\"\u002Fhero.avif\"",{"type":23,"tag":347,"props":442,"children":443},{"style":375},[444],{"type":28,"value":445}," fetchpriority",{"type":23,"tag":347,"props":447,"children":448},{"style":363},[449],{"type":28,"value":383},{"type":23,"tag":347,"props":451,"children":452},{"style":386},[453],{"type":28,"value":454},"\"high\"",{"type":23,"tag":347,"props":456,"children":457},{"style":375},[458],{"type":28,"value":459}," alt",{"type":23,"tag":347,"props":461,"children":462},{"style":363},[463],{"type":28,"value":383},{"type":23,"tag":347,"props":465,"children":466},{"style":386},[467],{"type":28,"value":468},"\"Hero\"",{"type":23,"tag":347,"props":470,"children":471},{"style":363},[472],{"type":28,"value":413},{"type":23,"tag":347,"props":474,"children":476},{"class":349,"line":475},4,[477],{"type":23,"tag":347,"props":478,"children":480},{"emptyLinePlaceholder":479},true,[481],{"type":28,"value":482},"\n",{"type":23,"tag":347,"props":484,"children":486},{"class":349,"line":485},5,[487],{"type":23,"tag":347,"props":488,"children":489},{"style":354},[490],{"type":28,"value":491},"\u003C!-- ❌ ผิด -->\n",{"type":23,"tag":347,"props":493,"children":495},{"class":349,"line":494},6,[496,500,504,508,512,517,521,525,529],{"type":23,"tag":347,"props":497,"children":498},{"style":363},[499],{"type":28,"value":366},{"type":23,"tag":347,"props":501,"children":502},{"style":369},[503],{"type":28,"value":426},{"type":23,"tag":347,"props":505,"children":506},{"style":375},[507],{"type":28,"value":431},{"type":23,"tag":347,"props":509,"children":510},{"style":363},[511],{"type":28,"value":383},{"type":23,"tag":347,"props":513,"children":514},{"style":386},[515],{"type":28,"value":516},"\"\u002Fhero-original-8mb.jpg\"",{"type":23,"tag":347,"props":518,"children":519},{"style":375},[520],{"type":28,"value":459},{"type":23,"tag":347,"props":522,"children":523},{"style":363},[524],{"type":28,"value":383},{"type":23,"tag":347,"props":526,"children":527},{"style":386},[528],{"type":28,"value":468},{"type":23,"tag":347,"props":530,"children":531},{"style":363},[532],{"type":28,"value":413},{"type":23,"tag":273,"props":534,"children":536},{"id":535},"cls-cumulative-layout-shift-หน้าขยับไหมระหว่างโหลด",[537],{"type":28,"value":538},"CLS (Cumulative Layout Shift) — หน้าขยับไหมระหว่างโหลด?",{"type":23,"tag":24,"props":540,"children":541},{},[542,543],{"type":28,"value":283},{"type":23,"tag":51,"props":544,"children":545},{},[546],{"type":28,"value":547},"\u003C 0.1",{"type":23,"tag":24,"props":549,"children":550},{},[551],{"type":28,"value":552},"CLS วัดการขยับของ layout ระหว่างโหลด ซึ่งทำให้ผู้ใช้กดผิดปุ่ม",{"type":23,"tag":24,"props":554,"children":555},{},[556],{"type":23,"tag":51,"props":557,"children":558},{},[559],{"type":28,"value":560},"ปัญหาที่พบบ่อย:",{"type":23,"tag":188,"props":562,"children":563},{},[564,583,588],{"type":23,"tag":162,"props":565,"children":566},{},[567,569,575,577],{"type":28,"value":568},"รูปที่ไม่กำหนด ",{"type":23,"tag":118,"props":570,"children":572},{"className":571},[],[573],{"type":28,"value":574},"width",{"type":28,"value":576}," และ ",{"type":23,"tag":118,"props":578,"children":580},{"className":579},[],[581],{"type":28,"value":582},"height",{"type":23,"tag":162,"props":584,"children":585},{},[586],{"type":28,"value":587},"Font fallback ที่ขนาดต่างจาก web font มาก",{"type":23,"tag":162,"props":589,"children":590},{},[591],{"type":28,"value":592},"Banner โฆษณาที่ inject เข้ามาทีหลัง",{"type":23,"tag":24,"props":594,"children":595},{},[596],{"type":23,"tag":51,"props":597,"children":598},{},[599],{"type":28,"value":335},{"type":23,"tag":337,"props":601,"children":605},{"className":602,"code":603,"language":604,"meta":8,"style":8},"language-css shiki shiki-themes github-light github-dark","\u002F* ✅ กำหนด aspect ratio ให้รูปเสมอ *\u002F\nimg {\n  aspect-ratio: 16 \u002F 9;\n  width: 100%;\n  height: auto;\n}\n\n\u002F* หรือกำหนด width\u002Fheight attribute ใน HTML *\u002F\n","css",[606],{"type":23,"tag":118,"props":607,"children":608},{"__ignoreMap":8},[609,617,629,663,690,711,719,727],{"type":23,"tag":347,"props":610,"children":611},{"class":349,"line":350},[612],{"type":23,"tag":347,"props":613,"children":614},{"style":354},[615],{"type":28,"value":616},"\u002F* ✅ กำหนด aspect ratio ให้รูปเสมอ *\u002F\n",{"type":23,"tag":347,"props":618,"children":619},{"class":349,"line":232},[620,624],{"type":23,"tag":347,"props":621,"children":622},{"style":369},[623],{"type":28,"value":426},{"type":23,"tag":347,"props":625,"children":626},{"style":363},[627],{"type":28,"value":628}," {\n",{"type":23,"tag":347,"props":630,"children":631},{"class":349,"line":416},[632,638,643,648,653,658],{"type":23,"tag":347,"props":633,"children":635},{"style":634},"--shiki-default:#005CC5;--shiki-dark:#79B8FF",[636],{"type":28,"value":637},"  aspect-ratio",{"type":23,"tag":347,"props":639,"children":640},{"style":363},[641],{"type":28,"value":642},": ",{"type":23,"tag":347,"props":644,"children":645},{"style":634},[646],{"type":28,"value":647},"16",{"type":23,"tag":347,"props":649,"children":650},{"style":363},[651],{"type":28,"value":652}," \u002F ",{"type":23,"tag":347,"props":654,"children":655},{"style":634},[656],{"type":28,"value":657},"9",{"type":23,"tag":347,"props":659,"children":660},{"style":363},[661],{"type":28,"value":662},";\n",{"type":23,"tag":347,"props":664,"children":665},{"class":349,"line":475},[666,671,675,680,686],{"type":23,"tag":347,"props":667,"children":668},{"style":634},[669],{"type":28,"value":670},"  width",{"type":23,"tag":347,"props":672,"children":673},{"style":363},[674],{"type":28,"value":642},{"type":23,"tag":347,"props":676,"children":677},{"style":634},[678],{"type":28,"value":679},"100",{"type":23,"tag":347,"props":681,"children":683},{"style":682},"--shiki-default:#D73A49;--shiki-dark:#F97583",[684],{"type":28,"value":685},"%",{"type":23,"tag":347,"props":687,"children":688},{"style":363},[689],{"type":28,"value":662},{"type":23,"tag":347,"props":691,"children":692},{"class":349,"line":485},[693,698,702,707],{"type":23,"tag":347,"props":694,"children":695},{"style":634},[696],{"type":28,"value":697},"  height",{"type":23,"tag":347,"props":699,"children":700},{"style":363},[701],{"type":28,"value":642},{"type":23,"tag":347,"props":703,"children":704},{"style":634},[705],{"type":28,"value":706},"auto",{"type":23,"tag":347,"props":708,"children":709},{"style":363},[710],{"type":28,"value":662},{"type":23,"tag":347,"props":712,"children":713},{"class":349,"line":494},[714],{"type":23,"tag":347,"props":715,"children":716},{"style":363},[717],{"type":28,"value":718},"}\n",{"type":23,"tag":347,"props":720,"children":722},{"class":349,"line":721},7,[723],{"type":23,"tag":347,"props":724,"children":725},{"emptyLinePlaceholder":479},[726],{"type":28,"value":482},{"type":23,"tag":347,"props":728,"children":730},{"class":349,"line":729},8,[731],{"type":23,"tag":347,"props":732,"children":733},{"style":354},[734],{"type":28,"value":735},"\u002F* หรือกำหนด width\u002Fheight attribute ใน HTML *\u002F\n",{"type":23,"tag":273,"props":737,"children":739},{"id":738},"inp-interaction-to-next-paint-ตอบสนองเร็วแค่ไหน",[740],{"type":28,"value":741},"INP (Interaction to Next Paint) — ตอบสนองเร็วแค่ไหน?",{"type":23,"tag":24,"props":743,"children":744},{},[745,746],{"type":28,"value":283},{"type":23,"tag":51,"props":747,"children":748},{},[749],{"type":28,"value":750},"\u003C 200ms",{"type":23,"tag":24,"props":752,"children":753},{},[754],{"type":28,"value":755},"INP แทนที่ FID ตั้งแต่ปี 2024 วัด responsiveness ของทุก interaction ไม่ใช่แค่ครั้งแรก",{"type":23,"tag":24,"props":757,"children":758},{},[759],{"type":23,"tag":51,"props":760,"children":761},{},[762],{"type":28,"value":560},{"type":23,"tag":188,"props":764,"children":765},{},[766,771,792],{"type":23,"tag":162,"props":767,"children":768},{},[769],{"type":28,"value":770},"JavaScript bundle ใหญ่เกินไป blocking main thread",{"type":23,"tag":162,"props":772,"children":773},{},[774,776,782,784,790],{"type":28,"value":775},"Animation ที่ไม่ใช้ ",{"type":23,"tag":118,"props":777,"children":779},{"className":778},[],[780],{"type":28,"value":781},"transform",{"type":28,"value":783}," หรือ ",{"type":23,"tag":118,"props":785,"children":787},{"className":786},[],[788],{"type":28,"value":789},"opacity",{"type":28,"value":791}," (ทำให้ browser ต้อง reflow)",{"type":23,"tag":162,"props":793,"children":794},{},[795],{"type":28,"value":796},"Event handlers ที่ทำงานหนักใน click\u002Finput events",{"type":23,"tag":30,"props":798,"children":800},{"id":799},"เครื่องมือที่เราใช้ในการ-debug",[801],{"type":28,"value":802},"เครื่องมือที่เราใช้ในการ debug",{"type":23,"tag":158,"props":804,"children":805},{},[806,816,826,836],{"type":23,"tag":162,"props":807,"children":808},{},[809,814],{"type":23,"tag":51,"props":810,"children":811},{},[812],{"type":28,"value":813},"Chrome DevTools > Performance",{"type":28,"value":815}," — ดู long tasks และ main thread blocking",{"type":23,"tag":162,"props":817,"children":818},{},[819,824],{"type":23,"tag":51,"props":820,"children":821},{},[822],{"type":28,"value":823},"PageSpeed Insights",{"type":28,"value":825}," — ดูคะแนน field data จาก real users",{"type":23,"tag":162,"props":827,"children":828},{},[829,834],{"type":23,"tag":51,"props":830,"children":831},{},[832],{"type":28,"value":833},"web.dev\u002Fmeasure",{"type":28,"value":835}," — analyze โดยละเอียด",{"type":23,"tag":162,"props":837,"children":838},{},[839,843],{"type":23,"tag":51,"props":840,"children":841},{},[842],{"type":28,"value":254},{"type":28,"value":844}," — ใช้ใน CI\u002FCD pipeline เพื่อ prevent regression",{"type":23,"tag":30,"props":846,"children":848},{"id":847},"สิ่งที่ทำให้-lighthouse-score-ไม่ตรงกับ-field-data",[849],{"type":28,"value":850},"สิ่งที่ทำให้ Lighthouse score ไม่ตรงกับ field data",{"type":23,"tag":24,"props":852,"children":853},{},[854],{"type":28,"value":855},"Lighthouse รันบน simulated slow mobile network ซึ่งจะ show score ต่ำกว่า real-world เสมอ ส่วน CrUX (Chrome User Experience Report) ใช้ข้อมูลจาก real users ซึ่งจะต่างกันมาก",{"type":23,"tag":24,"props":857,"children":858},{},[859,864],{"type":23,"tag":51,"props":860,"children":861},{},[862],{"type":28,"value":863},"แนะนำให้ดูทั้งสอง",{"type":28,"value":865}," — Lighthouse สำหรับ detect issues, CrUX สำหรับดูผลกระทบจริง",{"type":23,"tag":30,"props":867,"children":869},{"id":868},"บทสรุป",[870],{"type":28,"value":868},{"type":23,"tag":24,"props":872,"children":873},{},[874],{"type":28,"value":875},"Core Web Vitals ไม่ใช่เรื่องเทคนิคที่ซับซ้อน แต่ต้องใส่ใจรายละเอียดตั้งแต่ออกแบบ เช่น กำหนด aspect-ratio ให้รูป, compress รูปให้ดี, lazy load ที่ถูกต้อง — สิ่งเหล่านี้ถ้าทำตั้งแต่ต้นแทบไม่มี overhead เพิ่มเติม",{"type":23,"tag":24,"props":877,"children":878},{},[879],{"type":28,"value":880},"ถ้าเว็บคุณ fail CWV อยู่ ติดต่อเราได้ เรามี Performance Audit service ที่ให้ action items ชัดเจนทุกข้อ",{"type":23,"tag":882,"props":883,"children":884},"style",{},[885],{"type":28,"value":886},"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);}",{"title":8,"searchDepth":232,"depth":232,"links":888},[889,894,895,896],{"id":269,"depth":232,"text":269,"children":890},[891,892,893],{"id":275,"depth":416,"text":278},{"id":535,"depth":416,"text":538},{"id":738,"depth":416,"text":741},{"id":799,"depth":232,"text":802},{"id":847,"depth":232,"text":850},{"id":868,"depth":232,"text":868},"content:blog:core-web-vitals-thai-2025.md","blog\u002Fcore-web-vitals-thai-2025.md","blog\u002Fcore-web-vitals-thai-2025",{"_path":901,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":902,"description":903,"date":904,"author":12,"tags":905,"body":911,"_type":239,"_id":1211,"_source":241,"_file":1212,"_stem":1213,"_extension":244},"\u002Fblog\u002Fflutter-vs-react-native-2025","Flutter vs React Native ในปี 2025 — ประสบการณ์จาก 20+ โปรเจกต์","ทุกครั้งที่ลูกค้ามาถามว่า \"ควรทำ Flutter หรือ React Native?\" เราไม่เคยตอบได้ทันทีโดยไม่ถามกลับก่อน เพราะทั้งสองมีจุดแข็งที่แตกต่างกันชัดเจน","2024-11-05",[906,907,908,909,910],"Flutter","React Native","Mobile","iOS","Android",{"type":20,"children":912,"toc":1196},[913,917,923,928,936,1054,1060,1066,1071,1076,1082,1087,1093,1098,1104,1110,1115,1121,1126,1132,1137,1143,1148,1158,1163],{"type":23,"tag":24,"props":914,"children":915},{},[916],{"type":28,"value":903},{"type":23,"tag":30,"props":918,"children":920},{"id":919},"ภาพรวมในปี-2025",[921],{"type":28,"value":922},"ภาพรวมในปี 2025",{"type":23,"tag":24,"props":924,"children":925},{},[926],{"type":28,"value":927},"Flutter และ React Native ต่างก็ mature มากแล้ว ทั้งสองรองรับ iOS และ Android ได้ดี ทั้งสองมี hot reload ที่ทำให้ development เร็ว ทั้งสองมี ecosystem ที่ใหญ่พอสำหรับโปรเจกต์ส่วนใหญ่",{"type":23,"tag":24,"props":929,"children":930},{},[931],{"type":23,"tag":51,"props":932,"children":933},{},[934],{"type":28,"value":935},"ความต่างหลักที่เหลืออยู่:",{"type":23,"tag":937,"props":938,"children":939},"table",{},[940,960],{"type":23,"tag":941,"props":942,"children":943},"thead",{},[944],{"type":23,"tag":945,"props":946,"children":947},"tr",{},[948,952,956],{"type":23,"tag":949,"props":950,"children":951},"th",{},[],{"type":23,"tag":949,"props":953,"children":954},{},[955],{"type":28,"value":906},{"type":23,"tag":949,"props":957,"children":958},{},[959],{"type":28,"value":907},{"type":23,"tag":961,"props":962,"children":963},"tbody",{},[964,983,1001,1018,1036],{"type":23,"tag":945,"props":965,"children":966},{},[967,973,978],{"type":23,"tag":968,"props":969,"children":970},"td",{},[971],{"type":28,"value":972},"Language",{"type":23,"tag":968,"props":974,"children":975},{},[976],{"type":28,"value":977},"Dart",{"type":23,"tag":968,"props":979,"children":980},{},[981],{"type":28,"value":982},"JavaScript\u002FTypeScript",{"type":23,"tag":945,"props":984,"children":985},{},[986,991,996],{"type":23,"tag":968,"props":987,"children":988},{},[989],{"type":28,"value":990},"Rendering",{"type":23,"tag":968,"props":992,"children":993},{},[994],{"type":28,"value":995},"Own engine (Skia\u002FImpeller)",{"type":23,"tag":968,"props":997,"children":998},{},[999],{"type":28,"value":1000},"Native components",{"type":23,"tag":945,"props":1002,"children":1003},{},[1004,1008,1013],{"type":23,"tag":968,"props":1005,"children":1006},{},[1007],{"type":28,"value":251},{"type":23,"tag":968,"props":1009,"children":1010},{},[1011],{"type":28,"value":1012},"เร็วกว่าในกรณี animation",{"type":23,"tag":968,"props":1014,"children":1015},{},[1016],{"type":28,"value":1017},"ใกล้เคียง native feel",{"type":23,"tag":945,"props":1019,"children":1020},{},[1021,1026,1031],{"type":23,"tag":968,"props":1022,"children":1023},{},[1024],{"type":28,"value":1025},"Ecosystem",{"type":23,"tag":968,"props":1027,"children":1028},{},[1029],{"type":28,"value":1030},"เติบโตเร็ว",{"type":23,"tag":968,"props":1032,"children":1033},{},[1034],{"type":28,"value":1035},"ใหญ่กว่า",{"type":23,"tag":945,"props":1037,"children":1038},{},[1039,1044,1049],{"type":23,"tag":968,"props":1040,"children":1041},{},[1042],{"type":28,"value":1043},"Learning curve",{"type":23,"tag":968,"props":1045,"children":1046},{},[1047],{"type":28,"value":1048},"ต้องเรียน Dart",{"type":23,"tag":968,"props":1050,"children":1051},{},[1052],{"type":28,"value":1053},"ใช้ JS ที่รู้อยู่แล้ว",{"type":23,"tag":30,"props":1055,"children":1057},{"id":1056},"flutter-เหมาะกับอะไร",[1058],{"type":28,"value":1059},"Flutter เหมาะกับอะไร",{"type":23,"tag":273,"props":1061,"children":1063},{"id":1062},"custom-ui-ที่ต้องการ-pixel-perfect",[1064],{"type":28,"value":1065},"Custom UI ที่ต้องการ pixel-perfect",{"type":23,"tag":24,"props":1067,"children":1068},{},[1069],{"type":28,"value":1070},"Flutter render ด้วย engine ของตัวเอง ทำให้ UI เหมือนกันทุก platform 100% ถ้า design ต้องการ custom animation หรือ UI component ที่ไม่มีใน native library — Flutter ทำได้ง่ายกว่ามาก",{"type":23,"tag":24,"props":1072,"children":1073},{},[1074],{"type":28,"value":1075},"ตัวอย่างที่เราทำ: animated progress indicator ที่มี particle effects — ใน Flutter ทำได้ใน 30 นาที ถ้าเป็น React Native ต้องเขียน native module แยกสำหรับ iOS และ Android",{"type":23,"tag":273,"props":1077,"children":1079},{"id":1078},"mvp-ที่ต้องการ-ship-เร็ว",[1080],{"type":28,"value":1081},"MVP ที่ต้องการ ship เร็ว",{"type":23,"tag":24,"props":1083,"children":1084},{},[1085],{"type":28,"value":1086},"codebase เดียว compile เป็น iOS + Android ได้เลย ไม่มี platform-specific code ที่ต้องดูแลแยก ทีมเล็กๆ ดูแลได้คนเดียว",{"type":23,"tag":273,"props":1088,"children":1090},{"id":1089},"performance-sensitive-apps",[1091],{"type":28,"value":1092},"Performance-sensitive apps",{"type":23,"tag":24,"props":1094,"children":1095},{},[1096],{"type":28,"value":1097},"Impeller (rendering engine ใหม่ของ Flutter) ให้ frame rate ที่สม่ำเสมอกว่า โดยเฉพาะ animation ซับซ้อน",{"type":23,"tag":30,"props":1099,"children":1101},{"id":1100},"react-native-เหมาะกับอะไร",[1102],{"type":28,"value":1103},"React Native เหมาะกับอะไร",{"type":23,"tag":273,"props":1105,"children":1107},{"id":1106},"ทีมที่มี-javascriptreact-background",[1108],{"type":28,"value":1109},"ทีมที่มี JavaScript\u002FReact background",{"type":23,"tag":24,"props":1111,"children":1112},{},[1113],{"type":28,"value":1114},"Onboarding ทีม web developer เข้า React Native ใช้เวลาเพียง 1-2 สัปดาห์ เพราะ pattern ที่ใช้คือ React เดิม ต่างจาก Flutter ที่ต้องเรียน Dart + widget system ใหม่ทั้งหมด",{"type":23,"tag":273,"props":1116,"children":1118},{"id":1117},"apps-ที่ต้องการ-native-look-feel-อย่างเคร่งครัด",[1119],{"type":28,"value":1120},"Apps ที่ต้องการ native look & feel อย่างเคร่งครัด",{"type":23,"tag":24,"props":1122,"children":1123},{},[1124],{"type":28,"value":1125},"React Native render ด้วย native components จริง ทำให้ text rendering, scrolling และ gestures รู้สึก native มากกว่า Flutter ในบางกรณี",{"type":23,"tag":273,"props":1127,"children":1129},{"id":1128},"การ-share-code-กับ-web",[1130],{"type":28,"value":1131},"การ share code กับ web",{"type":23,"tag":24,"props":1133,"children":1134},{},[1135],{"type":28,"value":1136},"ถ้า project มีทั้ง web app (Next.js\u002FReact) และ mobile app React Native ทำให้ share business logic, types และ some UI components ได้",{"type":23,"tag":30,"props":1138,"children":1140},{"id":1139},"case-study-เราเลือก-flutter-ครั้งหนึ่ง-แต่ไม่ควรเลือก",[1141],{"type":28,"value":1142},"Case study: เราเลือก Flutter ครั้งหนึ่ง แต่ไม่ควรเลือก",{"type":23,"tag":24,"props":1144,"children":1145},{},[1146],{"type":28,"value":1147},"โปรเจกต์หนึ่งที่เราเลือก Flutter แต่ควรใช้ React Native คือแอปที่ต้องการ deep integration กับ native iOS features (ARKit สำหรับ try-on feature) — เราใช้เวลา 3 สัปดาห์เขียน Flutter-to-native bridge ที่ React Native มี library สำเร็จรูปอยู่แล้ว",{"type":23,"tag":24,"props":1149,"children":1150},{},[1151,1156],{"type":23,"tag":51,"props":1152,"children":1153},{},[1154],{"type":28,"value":1155},"บทเรียน:",{"type":28,"value":1157}," ก่อนเลือก framework ให้ list native features ที่ต้องใช้ออกมาก่อน แล้วดูว่า ecosystem ของ framework ไหนรองรับดีกว่า",{"type":23,"tag":30,"props":1159,"children":1161},{"id":1160},"คำแนะนำสุดท้าย",[1162],{"type":28,"value":1160},{"type":23,"tag":188,"props":1164,"children":1165},{},[1166,1176,1186],{"type":23,"tag":162,"props":1167,"children":1168},{},[1169,1174],{"type":23,"tag":51,"props":1170,"children":1171},{},[1172],{"type":28,"value":1173},"เลือก Flutter ถ้า:",{"type":28,"value":1175}," UI ซับซ้อน, ทีมยินดีเรียน Dart, หรืองบประมาณจำกัดแต่ต้องการทั้ง iOS+Android",{"type":23,"tag":162,"props":1177,"children":1178},{},[1179,1184],{"type":23,"tag":51,"props":1180,"children":1181},{},[1182],{"type":28,"value":1183},"เลือก React Native ถ้า:",{"type":28,"value":1185}," ทีมเป็น JavaScript, ต้องการ native feel อย่างเคร่ง, หรือต้อง share code กับ web",{"type":23,"tag":162,"props":1187,"children":1188},{},[1189,1194],{"type":23,"tag":51,"props":1190,"children":1191},{},[1192],{"type":28,"value":1193},"ทั้งสองดีพอ",{"type":28,"value":1195}," สำหรับ 90% ของ app ทั่วไป — อย่าให้ \"เลือก framework\" กลายเป็น blocker สำหรับการเริ่มต้น",{"title":8,"searchDepth":232,"depth":232,"links":1197},[1198,1199,1204,1209,1210],{"id":919,"depth":232,"text":922},{"id":1056,"depth":232,"text":1059,"children":1200},[1201,1202,1203],{"id":1062,"depth":416,"text":1065},{"id":1078,"depth":416,"text":1081},{"id":1089,"depth":416,"text":1092},{"id":1100,"depth":232,"text":1103,"children":1205},[1206,1207,1208],{"id":1106,"depth":416,"text":1109},{"id":1117,"depth":416,"text":1120},{"id":1128,"depth":416,"text":1131},{"id":1139,"depth":232,"text":1142},{"id":1160,"depth":232,"text":1160},"content:blog:flutter-vs-react-native-2025.md","blog\u002Fflutter-vs-react-native-2025.md","blog\u002Fflutter-vs-react-native-2025",1779878302655]