Gatsby กับ Next.js

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

เมื่อพูดถึงการใช้ Next.js หรือ Gatsby สำหรับโครงการของคุณ "เครื่องมือที่เหมาะสมสำหรับการแสดงออกของงานที่เหมาะสม" จะอยู่ในใจ แต่อย่ากังวลว่าฉันจะไม่ปล่อยให้คุณค้างอยู่กับคำตอบที่คลุมเครือเช่นนี้

TLDR:

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

ความคล้ายคลึงกันของ Next.js และ Gatsby.js

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

Gatsby และ Next.js:

• ทั้งคู่ให้ประสิทธิภาพสูงตั้งแต่แกะกล่อง
• เป็นทั้งเฟรมเวิร์ก JavaScript และทั้งสองแบบใช้ React
• ทั้งคู่ให้การแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) และการแสดงผลฝั่งไคลเอ็นต์ (CSR) แก่คุณทันที
• ทั้งคู่ให้บริการ Static Site Generation (SSG) และ Dynamic Site Generation (DSG)
• ทั้งคู่มีการแยกโค้ดและการแคชที่ยอดเยี่ยม
• ทั้งคู่เสนอการดึงข้อมูลหน้าล่วงหน้า Gatsby ทำสิ่งนี้โดยอัตโนมัติ Next.js มี prefetch พร็อพที่คุณสามารถใช้กับ Link องค์ประกอบ (สำหรับการกำหนดเส้นทาง)
• ทั้งคู่มีการกำหนดเส้นทางอัตโนมัติสำหรับเพจ โดยใช้เราเตอร์ของตนเอง (Gatsby ใช้ Reach Router, Next.js ใช้ Next.js Router)
• ทั้ง Gatsby และ Next.js สามารถดึงข้อมูลจาก Rest API และเช่น โดยใช้ WordPress, Contentful หรือ Prismic เป็นแบ็กเอนด์ CMS

นอกกรอบ Gatsby และ Next.js มอบสิ่งที่ดีที่สุดให้กับทั้งสองโลกเมื่อพูดถึง Server-Side Rendering (SSR) และ Client-Side Rendering (CSR) SSR นั้นยอดเยี่ยมสำหรับ SEO และ CSR นั้นยอดเยี่ยมสำหรับการให้ผู้ใช้ของคุณเปลี่ยนหน้าทันทีอันรุ่งโรจน์ (โดยไม่ต้องรีเฟรชหน้า) ซึ่งจะเตือนให้คุณนึกถึงการใช้แอปบนอุปกรณ์เคลื่อนที่ที่มาพร้อมเครื่อง

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

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

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

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

ฉันไม่มีสกินในเกม ดังนั้นนี่คือมุมมองที่เป็นกลางของฉัน พื้นที่หลักที่ทำให้ Next.js และ Gatsby แตกต่างกัน:

• Gatsby บังคับให้คุณใช้ GraphQL (มีความคิดเห็น) โดย Next.js เป็นตัวเลือกหรือไม่
• Gatsby จัดการการเปลี่ยนแปลงของภาพได้ทันที (ค่อนข้างมีความเห็น) แม้ว่าคุณจะไม่ได้บังคับให้ใช้ก็ตาม
• Gatsby เพิ่มการโหลดแบบ Lazy Loading ให้กับรูปภาพโดยอัตโนมัติ (มีความเห็น)
• ไซต์ Gatsby สามารถเปลี่ยนเป็น Progressive Web App (PWA) ได้โดยการติดตั้งปลั๊กอินขนาดเล็ก ฉันไม่เห็นวิธีง่ายๆ เลยใน Next.js
• Next.js มีทั้งการกำหนดเส้นทางแบบไดนามิกและแบบคงที่ เท่าที่ฉันสามารถบอก Gatsby เสนอการกำหนดเส้นทางแบบสแตติก/ฮาร์ดโค้ดเท่านั้น ฉันไม่แน่ใจ 100% เกี่ยวกับข้อมูลนี้เนื่องจากหาข้อมูลที่ชัดเจนได้ยาก (ฉันจะอัปเดตสิ่งนี้เมื่อทราบข้อมูลเพิ่มเติม)
• Gatsby ทำ SSR ระหว่างขั้นตอนการสร้างไซต์ (SSG)
• Next.js ใช้ SSR แบบไดนามิกตามคำขอของเพจ — แต่พวกเขายังเสนอ SSG ผ่านฟีเจอร์การส่งออกแบบคงที่ด้วย

สำหรับการปรับแต่ง Gatsby มีปลั๊กอินที่มีประโยชน์มากมายซึ่งส่วนใหญ่ติดตั้งได้โดยตรง (จากความคิดเห็นไปยัง Algolia สำหรับการค้นหา) Next.js มีไดเร็กทอรี /examples ใน GitHub repo ที่แสดงไลบรารีต่างๆ ("ปลั๊กอิน") ที่ใช้งานกับ Next แต่จากประสบการณ์ของฉันที่ใช้ตัวอย่าง Next.js นั้นกำหนดค่าได้ยากกว่าการใช้ปลั๊กอินของ Gatsby

การดึงข้อมูลแบบไดนามิก

แม้ว่า Gatsby จะถูกสร้างขึ้นแบบสแตติกตั้งแต่เริ่มต้น แต่ Gatsby สามารถสืบค้น API ของเซิร์ฟเวอร์ต่างๆ ไปที่ไดนามิก ดึงข้อมูล

Next.js สามารถดึงข้อมูลแบบไดนามิกได้ในลักษณะเดียวกัน

หากคุณต้องการ SSR คุณสามารถใช้ GraphQL API ในตัวของ Gatsby เพื่อใช้ข้อมูลจาก CMS เช่น WordPress หรือ Contentful (“Headless CMS”) แล้วใช้เว็บฮุค (จาก CMS ของคุณ) เพื่อจัดการการปรับใช้อัตโนมัติทุกครั้งที่คุณเผยแพร่เนื้อหา

คอนเวนชั่นเทียบกับการกำหนดค่า

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

Next.js เป็นผลิตภัณฑ์ "สร้างแอปของคุณตั้งแต่เริ่มต้น" มากกว่า โดยมีบางส่วน รวมแบตเตอรี่ที่ดี (SSR, การกำหนดเส้นทาง, การดึงข้อมูลล่วงหน้า, การแยกรหัส)

Gatsby เป็นผลิตภัณฑ์ “จุดเริ่มต้นของคุณรวมถึงสิ่งที่คุณอาจต้องการอยู่แล้ว” ด้วยผลิตภัณฑ์ มากมาย รวมแบตเตอรี่ (GraphQL, การดึงข้อมูลล่วงหน้า, SSR, การแยกโค้ด, การโหลดเมื่อจำเป็น, การแปลงภาพ)

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

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

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

สำหรับ Gatsby ที่จัดการกับการเปลี่ยนแปลงของรูปภาพและการโหลดแบบ Lazy Loading ให้กับคุณ ในขณะที่ความเห็นแล้ว การเพิ่มประสิทธิภาพมหาศาลที่มอบให้คุณ อาจทำให้คุณยกโทษให้พวกเขาที่ตัดสินใจเลือกสิ่งนั้นเพื่อคุณ แต่อีกครั้ง คุณอาจต้องการจัดการกับการแปลงภาพในแบบของคุณเอง และในกรณีนั้น Next.js เป็นตัวเลือกที่ดีกว่า

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

เนื่องจากทั้ง Gatsby และ Next.js แสดงผลทางฝั่งเซิร์ฟเวอร์ทันที ทั้งสองจึงเป็นตัวเลือกที่ยอดเยี่ยมสำหรับเว็บไซต์ที่ต้องการ SEO ที่ยอดเยี่ยม (Search Engine Optimization) ซึ่งหมายความว่าเว็บไซต์สาธารณะแทบทั้งหมดในปัจจุบันนี้

อย่างไรก็ตาม มีบางกรณีการใช้งาน SEO ที่ Next.js โดดเด่นกว่า Gatsby:

หากคุณกำลังสร้างแพลตฟอร์มเช่น Twitter หรือ Reddit ซึ่งคุณจำเป็นต้องผลักดันการอัปเดตเนื้อหาอย่างต่อเนื่อง และหากคุณต้องการ SEO ที่เหมาะสมที่สุดสำหรับเนื้อหาทั้งหมดของคุณ Next.js คือตัวเลือกที่ดีที่สุดของคุณ

มาได้ยังไง? เนื่องจาก Next.js สามารถแสดงการอัปเดตเนื้อหาฝั่งเซิร์ฟเวอร์แบบไดนามิกจากเซิร์ฟเวอร์ของคุณเอง ทันที เมื่อมีการเปลี่ยนแปลง

เพื่อให้ Gatsby แสดงเนื้อหาใหม่ คุณต้องสร้างและปรับใช้แอปของคุณใหม่ทุกครั้งที่มีการเปลี่ยนแปลงเนื้อหาของคุณ ซึ่งเป็นเรื่องปกติสำหรับบล็อก ไซต์อีคอมเมิร์ซ และเว็บไซต์ประเภทอื่นๆ ส่วนใหญ่ที่ต้องการอัปเดตเพียงวันละครั้งหรือหนึ่งครั้งต่อชั่วโมง

หากไซต์ Gatsby ของคุณดึงข้อมูลจาก API ภายนอกแบบไดนามิกเพื่อแสดงการอัปเดตในไซต์ของคุณ (เช่น ผ่านบริการแสดงความคิดเห็น เช่น Talkard หรือ Disqus) คุณจะได้รับการอัปเดตเนื้อหาแบบเรียลไทม์บนไซต์ Gatsby ของคุณ แต่คุณชนะ ไม่ได้รับประโยชน์จาก SEO เพราะการอัปเดตจะเป็นการแสดงผลฝั่งไคลเอ็นต์ ไม่ใช่การแสดงผลฝั่งเซิร์ฟเวอร์ (ซึ่งเป็นสิ่งที่คุณต้องการสำหรับ SEO)

ข้อสังเกตทั่วไปในโลกแห่งความเป็นจริง

บริษัทขนาดใหญ่ที่มีไซต์ขนาดใหญ่มักใช้ Next.js แทนที่จะเป็น Gatsby แม้ว่าจะไม่ได้เข้าใจผิด แต่หน้าเอกสารทางการของ ReactJS ก็ใช้ Gatsby ฉันแค่พูดถึงสิ่งที่ฉันสังเกตเห็น

เว็บไซต์ขนาดใหญ่ที่ใช้ Next.js:

• Marvel.com
• Netflix
• Uber Marketplace
• Invisionapp
• วัสดุ UI

เว็บไซต์ขนาดใหญ่ที่ใช้ Gatsby

• ReactJS
• MarvelApp.com

ใช่ น่าสนใจ Marvel ใช้ทั้งสองอย่าง พวกเขาใช้ Next.js สำหรับเว็บไซต์หลัก และ Gatsby สำหรับ MarvelApp (แพลตฟอร์มการออกแบบ)

สำหรับการเขียนบล็อก ฉันเคยเห็นตัวอย่างบล็อกของ Next.js ที่ดีเพียงไม่กี่ตัวอย่างเท่านั้น แต่ฉันได้เห็นตัวอย่างบล็อกที่ดีของ Gatsby สองสามตัวอย่างแล้ว อันนี้โดย Tania Rascia เป็นหนึ่งในรายการโปรดของฉัน

แม้ว่า Gatsby จะทำให้เห็นชัดเจนว่าพวกเขาไม่ต้องการถูกมองว่าเป็น “เครื่องสร้างเว็บไซต์แบบสแตติกอีกตัวสำหรับบล็อกเกอร์” (เช่น Jekyll) สิ่งนี้ไม่ได้เปลี่ยนความจริงที่ว่ามันเป็นที่นิยมสำหรับบล็อก และผู้ใช้ WordPress จำนวนมากกำลังย้ายไป แกสบี้ด้วยเหตุนั้น (รวมถึงทาเนียที่ฉันได้กล่าวไว้ข้างต้นด้วย)

Headless CMS ด้วย Gatsby หรือ Next.js

นักพัฒนาซอฟต์แวร์จำนวนมากกำลังพูดถึงเทรนด์ “Headless CMS” หรือ “Decoupled CMS” ที่คุณจะใช้ เช่น WordPress เป็นแบ็กเอนด์จากนั้นใช้ React (หรือ Angular/Vue) เพื่อใช้ข้อมูลผ่าน Rest API/GraphQL ทั้ง Next.js และ Gatsby สามารถใช้เป็นแอปส่วนหน้าสำหรับผลิตภัณฑ์ Headless CMS ฟังดูมีแนวโน้มในทางทฤษฎี แต่จนถึงตอนนี้ ฉันเพิ่งเห็นตัวอย่างที่ดีเพียงไม่กี่ตัวอย่าง:

• Next.js + WordPress โดย Kata.ai
• Gatsby + WordPress โดย Chase McCoy
• Gatsby + WordPress โดย Indigo Tree
• Gatsby + WordPress โดย Adam Rasheed

ของอดัมและเชส ตัวอย่าง Gatsby + WordPress นั้นเร็วมาก ส่วน กะตะ ตัวอย่าง Next.js แม้ว่าเว็บไซต์จะสวยงาม แต่ก็ค่อนข้างช้า เนื่องจากประสิทธิภาพระดับไฮเอนด์เป็นจุดขายหลักของ Next.js กะตะจึงไม่ใช่ตัวอย่างที่น่าเชื่อถือที่สุดว่าทำไมคุณจึงควรใช้ Next.js กับ WordPress

CMS หัวขาดยังคงเป็นแนวคิดที่ค่อนข้างใหม่ ไม่ต้องสงสัยเลยว่า Headless CMS โดยทั่วไป (ไม่ใช่แค่ Headless WordPress) จะเป็นประเด็นร้อนในปี 2020 ต่อไป และเนื่องจากทั้ง Gatsby และ Next.js จัดการ SSR ให้กับคุณ ทั้งคู่จึงเป็นตัวเลือกที่ดีในฐานะส่วนหน้าแบบ Headless

กำลังใช้งาน/โฮสต์ Gatsby และถัดไป

เนื่องจาก Gatsby นั้นสร้างแบบสแตติก (พรีบิลด์) ก่อนนำไปใช้งาน Gatsby จึงทำงานได้ทุกที่โดยไม่ต้องมีเซิร์ฟเวอร์เป็นของตัวเอง โดยทั่วไป Next.js ต้องใช้เซิร์ฟเวอร์ Node.js เพื่อเรียกใช้ เว้นแต่ แอปทั้งหมดของคุณจะถูกส่งออกเป็นไซต์คงที่เช่นเดียวกับ Gatsby (ใช่เป็นไปได้) โซลูชันโฮสติ้งบางตัวได้รับการออกแบบมาโดยเฉพาะสำหรับโซลูชันอื่น

Gatsby + Netlify

Gatsby และ Netlify เป็นคู่ที่เกิดขึ้นในสวรรค์ หากไซต์ของคุณไม่มีเซิร์ฟเวอร์ การปรับใช้ไซต์ Gatsby กับ Netlify นั้นสามารถกำหนดค่าได้อย่างแท้จริงในเวลาน้อยกว่า 30 วินาที

จากนี้ไปในการปรับใช้อย่างต่อเนื่องสามารถสรุปให้เรียกใช้ git push origin master . เดียว คำสั่งในเทอร์มินัลของคุณ — หากคุณใช้ปลั๊กอิน gatsby-plugin-netlify ของ gatsby

Next.js + ตอนนี้

Next.js เข้ากันได้ดีกับบริการโฮสติ้งของ Now และด้วยเหตุผลที่ดี Zeit เป็นบริษัทที่อยู่เบื้องหลังทั้ง Now (บริการโฮสติ้ง) และ Next.js (เฟรมเวิร์ก)

เช่นเดียวกับ Netlify การปรับใช้กับ Now สามารถทำได้ในไม่กี่วินาที แต่ขึ้นอยู่กับประเภทของแอปที่คุณกำลังปรับใช้

หมายเหตุ:แม้ว่า Gatsby และ Next.js จะเข้ากันได้ดีกับบริการโฮสติ้งเฉพาะ แต่คุณสามารถโฮสต์แอป Next.js แบบสแตติก/ฟรอนต์เอนด์บน Netlify ได้ (นี่คือตัวอย่าง) และคุณสามารถโฮสต์ Gatsby ได้ในขณะนี้ (นี่คือตัวอย่าง)

ทั้งสองเฟรมเวิร์กสามารถโฮสต์บน DigitalOcean, Heroku เป็นต้น

หากต้องการโฮสต์เซิร์ฟเวอร์แบ็กเอนด์/API ของคุณเอง (แทนที่จะใช้แบบไร้เซิร์ฟเวอร์) สำหรับแอป Next.js หรือ Gatsby คุณจะต้องพิจารณาบางอย่างเช่น DigitalOcean, Heroku หรือ Now ระวังให้ดี (“ณ ตอนนี้”) ของ Zeit ตอนนี้ v2.0 พวกเขาไม่รองรับ Docker อีกต่อไปซึ่งเป็นตัวทำลายข้อตกลงสำหรับนักพัฒนาจำนวนมาก

Next.js เทียบกับเวลาปรับใช้ Gatsby

มีความล่าช้าระหว่างการอัปเดตเมื่อคุณสร้างและปรับใช้ Gatsby อีกครั้ง ความล่าช้านั้นขึ้นอยู่กับว่าไซต์ของคุณใหญ่แค่ไหน ยิ่งมีขนาดใหญ่ขึ้นก็ยิ่งต้องใช้เวลาในการสร้างและปรับใช้ใหม่มากขึ้นเท่านั้น ฉันเพิ่งสร้างไซต์นี้ด้วย Gatsby และใช้เวลาประมาณ 2 นาทีในการสร้างใหม่จนถึงการติดตั้งใหม่ และเป็นไซต์ที่ค่อนข้างเล็ก

Next.js ไม่มีการสร้างใหม่> ปรับใช้ใหม่> ปัญหาการหยุดทำงาน หากคุณใช้เซิร์ฟเวอร์แบ็กเอนด์ของคุณเอง เนื้อหาใหม่ของคุณจะอัปเดตทันที

นี่อาจไม่ใช่ปัญหาหาก Gatsby ทำให้ง่ายต่อการจัดการกับการอัปเดตที่เพิ่มขึ้นโดยไม่ต้องหยุดทำงาน/ล่าช้า แต่ ณ ตอนนี้ คุณจะต้องหาวิธีแก้ไขด้วยตนเอง (เช่น กับ websocket)

ทรัพยากร

• Postlight.com มีชุดเริ่มต้น WordPress + Next.js ที่น่าสนใจมากบน GitHub
• สำหรับ Headless CMS ทางเลือกที่มั่นคงสำหรับ WordPress ได้แก่ Prismic, Contentful, Sanity, Ghost และ ButterCMS