Gatsby vs Next.js

Gatsbyjs และ Next.js เป็นหัวข้อร้อนแรงที่สุดในการพัฒนาเว็บตอนนี้ ผมเห็นหลายคนบนกระดานข่าวและคอมเมนต์ YouTube ถามว่าทำไมต้องเลือกตัวหนึ่งมากกว่าอีกตัว ผมดูแลโลกของ Next.js และ Gatsbyjs มา 12 เดือนแล้ว และเชื่อว่าทำให้ผมมีคุณสมบัติพอที่จะออกมาพูดในเรื่องนี้

เมื่อพูดถึงการใช้ Next.js หรือ Gatsby สำหรับโปรเจกต์ของคุณ คำว่า "the right tool for the right job" (เครื่องมือที่เหมาะสมสำหรับงานที่เหมาะสม) เข้ามาใน腦海 แต่别担心 ผมไม่ได้จะปล่อยให้คุณค้างกับคำตอบที่คลุมเครืออย่างนั้น

TLDR:

• Gatsby และ Next.js เป็น React frameworks ทั้งคู่ และทั้งคู่ให้ SSR (Server-Side Rendering) ออกของกล่อง (ดีสำหรับ SEO)
• Next.js น้อยกว่าความคิดเห็น (less opinionated) แต่มี learning curve ชันกว่า มี batteries included น้อยกว่า หมายถึงคุณต้องทำมากขึ้นเอง
• Next.js ดูเหมาะกว่าสำหรับเว็บไซต์ที่มีปริมาณข้อมูลมหาศาลที่ต้องอัปเดตบ่อย

Next.js และ Gatsby.js ความคล้ายคลึง

มีเหตุผลที่ดีที่คนเปรียบเทียบ Gatsby และ Next.js พวกมันมีจุดร่วมมากกว่าจุดต่าง ดังนั้นมาดูสิ่งที่ Gatsby และ Next.js ร่วมกันก่อน แล้วค่อยอภิปรายความต่าง

Gatsby และ Next.js:

• ทั้งคู่ส่งมอบประสิทธิภาพสูง out-of-the-box
• เป็น JavaScript frameworks ทั้งคู่ และเป็น React-based ทั้งคู่
• ทั้งคู่ให้ Server-Side Rendering (SSR) และ Client-Side Rendering (CSR) ออกของกล่อง
• ทั้งคู่ให้ Static Site Generation (SSG) และ Dynamic Site Generation (DSG)
• ทั้งคู่มี code-splitting และ caching ยอดเยี่ยมออกของกล่อง
• ทั้งคู่เสนอ page data prefetching Gatsby ทำอัตโนมัติ Next.js มี prefetch prop สำหรับ Link component (สำหรับ routing)
• ทั้งคู่ให้ automatic routing สำหรับหน้าเว็บ ใช้ router ของตัวเอง (Gatsby ใช้ Reach Router, Next.js ใช้ Next.js Router)
• ทั้ง Gatsby และ Next.js ดึงข้อมูลจาก Rest APIs ได้ เช่น ใช้ WordPress, Contentful, หรือ Prismic เป็น CMS backend

ออกของกล่อง Gatsby และ Next.js ให้คุณได้ดีที่สุดของทั้งสองโลกใน Server-Side Rendering (SSR) และ Client-Side Rendering (CSR) SSR ดีสำหรับ SEO และ CSR ดีสำหรับการเปลี่ยนหน้าแบบ instant (ไม่ต้อง refresh) ที่คุ้นเคยกับ native mobile app

Next.js และ Gatsby.js ความต่าง

ผมต้องการชี้ให้ชัดว่าสิ่งต่อไปนี้เป็นไปตามสิ่งที่คุณได้ออกของกล่องกับแต่ละ framework ไม่ใช่สิ่งที่พวกมันอาจกลายเป็นผ่านการปรับแต่ง ทั้ง Next.js และ Gatsby ยืดหยุ่นสูง

Gatsby และ Next.js ปรับแต่งได้ "ไม่มีขีดจำกัด" ทั้งคู่บอกว่านี้มาก ผมไม่ได้อยู่ในเกมนี้ ดังมุมมองของผมเป็นกลาง พื้นที่หลักที่ทำให้ Next.js และ Gatsby ต่างกัน:

• Gatsby บังคับให้ใช้ GraphQL (opinionated) ใน Next.js เป็น optional
• Gatsby จัดการ image transformation ออกของกล่อง (ค่อนข้าง opinionated) แม้คุณไม่ถูกบังคับให้ใช้
• Gatsby เพิ่ม lazy-loading ให้รูปภาพอัตโนมัติ (opinionated)
• เว็บไซต์ Gatsby สามารถกลายเป็น Progressive Web App (PWA) โดยติดตั้ง plugin เล็กๆ ผมไม่เคยเห็นวิธีง่ายๆ ใน Next.js
• Next.js เสนอทั้ง dynamic และ static routing ตามที่ผมรู้ Gatsby เสนอแค่ static/hardcoded routing ผมไม่แน่ใจ 100% เพราะหาข้อมูลชัดเจนยาก (จะอัปเดตเมื่อรู้มากขึ้น)
• Gatsby ทำ SSR ระหว่างการ build site (SSG phase)
• Next.js ทำ SSR แบบไดนามิกเมื่อมีคำขอหน้า — แต่ก็เสนอ SSG ผ่าน static export feature

เรื่องการปรับแต่ง Gatsby มี plugins มากมายส่วนใหญ่ติดตั้งง่าย (จาก Comments ถึง Algolia สำหรับ search) Next.js มี /examples directory ใน GitHub repo ที่แสดง libraries ("plugins") ในการใช้งานกับ Next แต่ในประสบการณ์ของผม การใช้ Next.js examples ยากกว่าการใช้ Gatsby plugins

Dynamic data fetching

แม้ Gatsby จะเป็น statically generated ออกของกล่อง Gatsby สามารถ query server APIs ต่างๆ เพื่อ ไดนามิก ดึงข้อมูล

Next.js ทำ dynamic data fetching แบบคล้ายกันได้

หากคุณต้องการ SSR คุณสามารถใช้ GraphQL API ในตัวของ Gatsby เพื่อ consume ข้อมูลจาก CMS เช่น WordPress หรือ Contentful ("Headless CMS") และใช้ webhook (จาก CMS) เพื่อจัดการ auto-deploy ทุกครั้งที่เผยแพร่เนื้อหา

Convention vs Configuration

โดยทั่วไป Gatsby เป็นที่ opinionated กว่า ข้อดีคือคุณตัดสินใจน้อยลง Next.js ต้องการ configuration มากกว่าเพื่อเริ่มต้น ข้อดีคือไม่มีอะไรถูกบังคับ

Next.js เป็น "สร้างแอปจากศูนย์" พร้อม บาง batteries ที่ดี (SSR, routing, prefetching, code-splitting)

Gatsby เป็น "จุดเริ่มต้นของคุณรวมสิ่งที่คุณอาจอยากได้อยู่แล้ว" พร้อม มากมาย batteries (GraphQL, prefetching, SSR, code-splitting, lazy loading, image transformations)

หากคุณต้องการ customization เฉพาะจุดสำหรับทุกมุมของผลิตภัณฑ์ Next.js เป็นตัวเลือกที่ดีกว่า เพราะมัน "barebone" กว่า (มีสิ่งที่ทำให้คุณน้อยกว่า) ออกของกล่อง

ไม่สนุกที่จะเริ่มโปรเจกต์ด้วยการลบฟีเจอร์ออกจาก framework ดังนั้นถ้าคุณไม่ชอบ GraphQL (ไม่ว่าจะเหตุผลอะไร) Gatsby ไม่เหมาะกับคุณ

GraphQL เป็น hype ตอนนี้ (ด้วยเหตุผลที่ดี) ทำให้ยากที่จะโต้แย้ง Gatsby ที่ทำมันเป็นส่วนของ framework ผมถือว่าเป็นโบนัส แตความชอบของคุณอาจต่างออกไป เห็นได้ว่า Apollo (GraphQL engine) เป็นหนึ่งในสิ่งที่ได้รับความนิยมมากที่สุดในการเพิ่มเข้าไปใน Next.js apps

เรื่อง Gatsby จัดการ image transformations และ lazy loading ให้ แม้จะ opinionated แต่การเพิ่มประสิทธิภาพมากที่ได้จากมัน อาจทำให้คุณยอมรับพวกเขาที่ตัดสินใจให้คุณ แต่เช่นเดียวกัน อาจคุณอยากจัดการ image transformations เอง ในกรณีนั้น Next.js เป็นตัวเลือกที่ดีกว่า

Gatsby vs Next.js สำหรับ SEO

เนื่องจาก Gatsby และ Next.js ทั้งคู่เป็น server-side rendered ออกของกล่อง ทั้งคู่เป็นตัวเลือกดีสำหรับเว็บไซต์ที่ต้องการ SEO (Search Engine Optimization) ดี — หมายถึงเกือบเว็บไซต์สาธารณะทุกตัวทุกวันนี้

อย่างไรก็ตาม มี use-case SEO เฉพาะที่ Next.js สว่างสว่างกว่า Gatsby:

หากคุณสร้างแพลตฟอร์มอย่าง Twitter หรือ Reddit ที่ต้อง push content updates ตลอด — และต้องการ SEO ที่เหมาะสมที่สุดสำหรับเนื้อหาทั้งหมด — Next.js เป็นตัวเลือกที่ดีที่สุด

ทำไม? เพราะ Next.js สามารถ dynamically server-side render content updates จากเซิร์ฟเวอร์ของคุณเอง ทันที เมื่อมีการเปลี่ยนแปลง

สำหรับ Gatsby ให้แสดงเนื้อหาใหม่ คุณต้อง rebuild และ redeploy แอปทุกครั้งที่มีการเปลี่ยนแปลงเนื้อหา นี่โอเคสำหรับบล็อก, เว็บอีคอมเมิร์ซ และเว็บไซต์ส่วนใหญ่ที่ต้อง push updates วันละครั้ง หรือแม้แต่วันละหลายครั้ง

แต่ถ้า Gatsby site ของคุณดึงข้อมูลจาก external API แบบไดนามิกเพื่อแสดงอัปเดตบนไซต์ (เช่นผ่าน comments service เช่น Talkard หรือ Disqus) คุณจะได้ real-time content updates บน Gatsby site — แต่คุณจะ ไม่ได้

สังเกตการณ์โลกจริงทั่วไป