Gatsby.js VS Create-React-App

Published in

20Scoops CNX

4 min readJun 30, 2021

บทความนี้เราจะพามารู้จักกับเทคโนโลยีในการพัฒนา Website ระหว่าง Gatsby.js และ Create-React-App เพื่อให้เห็นถึงข้อดีและข้อเสียของทั้งสอง Framework กัน

Gatsby.js

Gatsby นั้นเป็น Open-Source สำหรับการพัฒนาเว็บไซต์ที่เป็น Content เพราะเราต้องการไต่อันดับ Ranking ด้วย SEO โดยเจ้าตัวนี้จะเป็นการทำแบบ SSR (Server-Side-Rendering) ซึ่งจะเหมาะมากกับ Blog Content หรือ Landing Page 👍

อย่างที่กล่าวไว้ข้างต้นส่วนเจ้า Gatsby นั้นเป็นแบบ SSR ไม่ใช่ Single Page โดยจะทำการคลาย HTML ออกมาในขึ้นตอนการ Build ทำให้การอ่าน Tag Meta ของ Bot Search Engine ทำได้ดี

Pros. (ข้อดี) 😀

ประสิทธิภาพ (Performance) กับ SEO
Routing สามารถทำได้ง่าย
ความเร็วใน Implementation Layer

ซึ่งเมื่อผู้ใช้งานเข้าเว็บไซต์จะไม่ต้องรอการโหลดข้อมูลนาน เนื่องจาก Gatsby จะ build ส่วนที่ต้องการจะแสดงผลออกมาเป็น HTML แล้วเมื่อมีการเปลี่ยนหน้าก็จะโหลดข้อมูลใหม่ซึ่งจะต่างจาก create-react-app เพราะว่า create-react-app จะ build ทั้ง App ออกมาเลย ตอนเข้าเว็บไชต์ครั้งแรกจะใช้เวลานานมากกว่าแต่ก็จะมีผลดีที่เวลาเปลี่ยนหน้าก็ไม่ต้องโหลดข้อมูลมาใหม่

Cons. (ข้อเสีย) 😂

Build Time ขึ้นอยู่กับจำนวน Contents
ระวังการใช้ตัวแปรของ Browser ตอน Build Time

และมีอีกอย่างหนึ่งที่อาจจะทำให้ทุกคนหันมาลองใช้ Gatsby คือมันมี plug-in ที่หลากหลายเพื่อเข้าช่วยในเรื่องเวลาของการพัฒนาของเรา ตัวอย่างการจัดการกับพวก Assets ต่าง ๆ เช่น Images ก็จะเป็น gatsby-image, การทำพวก Sitemap และ Content Mangement เป็นต้น สามารถทำได้ง่ายกว่า ถ้าพูดกันง่าย ๆ เราอาจจะไม่ต้องรบกวนทีม Backend เลยก็ได้

มาดูในส่วน Structure Folder ของ Gatsby กันสักหน่อยหน้าตาก็จะมีประมาณนี้ 😎

├── src
     ├── pages
           ├── index.js
           ├── // เพิ่มหน้าอื่น ๆ ในนี้ได้เลย เช่น jobs.js หรือ blogs.js
     ├── templates
           ├── Detail.js
           ├── // ตรงนี้ก็สามารถเพิ่มหน้าได้เหมือนกันสำหรับการ dymamic path

ซึ่งในขั้นตอนการสร้าง Page สำหรับ Gatsby นั้นจะสร้างได้ง่ายกว่า create-react-app โดยถ้าเราสร้างไฟล์ที่อยู่ใน folder pages เช่น ถ้าเราต้องการสร้างหน้าสำหรับแสดง list ของ video เราก็แค่ทำการสร้างไฟล์ที่มีชื่อว่า video.js ก็จะได้ Path ขึ้นมาทันทีเลย url/video ง่ายไหม 😆 ซึ่งก็จะมีความต่างจาก create-react-app เพราะว่าเราจำเป็นต้องทำการประกาศ Path ใหม่ทุกครั้งที่จะทำหน้าใหม่ผ่าน React-Router

Example Gatsby Route

สำหรับส่วนของการสร้าง Path แบบ Dynamic เราจะต้องทำภายใต้ Folder ที่มีชื่อว่า templatesโดยจะมีการ เขียน Code ขึ้นมาเพื่อทำการ Generate นิดหน่อยในไฟล์ gatsby-node.js หน้าตา Config ก็จะมีดังนี้ 👇

Example Config

exports.createPages = async ({ graphql, actions }) => {
 const { createPage } = actions; 
//ตัวอย่างจากการใช้ prismic: https://prismic.io/
 const queryData = await graphql(`
   { 
     prismic {  
       allBlogs {
         edges {
           node {
             _meta { 
               uid 
             }
             title 
             image
           }
         }
       }
     }
   }`);
 };const detailPage = result.data.prismic.allBlogs.edges;
const detailTemplate = require.resolve('./src/templates/Detail.js');detail.forEach(({ node }) => { 
  createPage({ 
    type: 'ExampleBlogs', //จะขึ้นอยู่กับที่เราตั้งใน prismic
    path: `/blog/detail/${node._meta.uid}`, // เป็นการกำหนดชื่อของ path
    component: detailTemplate,// กำหนดให้ใช้ template ไหน render
    context: {
      uid: node._meta.uid // ส่งข้อมูลต่าง ๆ ไปให้กับ component ที่ rander
    }
  });
};

แล้วส่วนที่ต้องระวังอีกเรื่องของเจ้า Gatsby นั่นก็คือ Server-Side-Rendering (SSR) คือเมื่อมีการ Build ของ Gatsby ไม่ว่าจะเป็นใน Local หรือบน Server CI แล้วถ้าหากมีการเรียกใช้ตัวแปรของ Browser จะทำให้เกิดการ Error ได้ เดี๋ยวจะหาว่าไม่เตือน

สาเหตุก็คือ Gatsby มีการ Generate ไฟล์ HTML ผ่านการ Build เลยไม่สามารถเข้าถึงตัวแปร Global ของ Browser ได้นั่นเอง เช่น

const App = () => { 
  window.addEventListner('click') // ไม่สามารถทำงานได้ 🤯  useEffect(() => {
    window.addEventListner('click') // ทำงานได้ 👍
  }, []) 
}

ทำไมใช้ในฟังก์ชัน useEffect ถึงทำได้ล่ะ? เพราะเราทำผ่าน Life Cycle ซึ่งของทุกอย่างในนั้นจะถูกใช้งานก็ต่อเมื่อผู้ใช้งานเห็นหน้า Website ของเราแล้วนั่นเอง (Rendered) แต่ถ้าหากเราต้องการมีเงื่อนไขในการตรวจสอบว่าต้อง Rendered แล้วค่อยทำก็สามารถใช้วิธีนี้ได้เหมือนกัน

// utilities
const isSSR = (): boolean => {  
   const [isClient, setClient] = React.useState(true);   React.useEffect(() => {
     setClient(false);
   }, []);
   return isClient;
};export default isSSR;// how to use
const App = () => {
  if (isSSR()) window.addEventListner('click') // ก็ได้เช่นกัน
}

Create-React-App

Create-React-App เป็น Open-Source JavaScript library ที่ใช้สร้างส่วนของ User Interfaces Specifically โดยเฉพาะ Single Page สำหรับการทำ Web Application เพราะโลกของ Website มีด้วยกันหลากหลาย Categories อย่างที่เรา ๆ รู้กันอยู่ทำให้การเลือกใช้ Tools หรือ Framework ให้เหมาะสมกับงานก็เป็นสิ่งที่เราต้องใส่ใจ

Pros. (ข้อดี) 😀

create-react-app มีการ setup ให้แบบ general จึงสามารถเลือกใช้ tools ต่าง ๆได้เยอะ เช่น ในเรื่องของ Router โดยเราอาจจะไม่ต้องใช้ react-router ก็ได้อาจจะไปใช้ reach-router แทนได้เหมือนกันหรือไม่ว่าจะเป็นการดึงข้อมูลต่าง ๆ ที่เราสามารถเลือกใช้ tools ได้หลากหลาย
create-react-app เป็นการ Build ทั้ง App เลยทำให้เวลาเปลี่ยนหน้าจึงไม่ต้องมีการโหลดข้อมูลใหม่

Cons. (ข้อเสีย) 😂

First Impression ของผู้ใช้งานถ้าหากไม่มีการจัดการเรื่อง State ดี ๆ ก็อาจจะเกิดเหตุการณ์ที่หน้าขาวได้ เพราะตอนเข้าเว็บไซต์ครั้งแรกจะใช้เวลานานเนื่องจากมีการโหลด Content ทั้ง Application
SEO แบบ Natural อาจจะมี Performance ที่ไม่เป็นที่น่าพอใจมากเท่าที่ควร สายเปย์ต้องมาทางนี้ สิเนอะ ยิง Ads เข้าไปปปปป 🤑

Create React App เหมาะกับงานประเภทไหน? ซึ่งในมุมมองของผมผมคิดว่า create-react-app นั้นเหมาะกับการพัฒนาได้หลากหลายรูปแบบตัวอย่าง เช่น Social media website หรือไม่ว่าจะเป็นจำพวกเว็บไซต์ E-commerce เพราะเจ้าตัว create-react-app นั้นสามารถเลือกใช้ tools ได้หลากหลายมีทั้งลูกเล่น พ่อเล่น หรือแม่เล่น เห้ยยย ไม่ใช่แล้วววว 🤣 เยอะและซัพพอร์ตหลาย ๆ อย่างเช่นกัน

มาถึงตรงนี้หลายคนคงจะหงุดหงิดว่าการเปรียบเทียบ Gatsby กับ Create-React-App นั้นมันไม่แฟร์เลย มันมวยคนละรุ่นโว้ยยย ใช่ครับถูกต้องหากจะพูดถึง SSR ต้องเอามาวัดกับ Next.js มากกว่า ผมแค่อยากจะสื่อให้เห็นถึงความแตกต่างระหว่าง Single Page กับ SSR นะครับ อย่าด่าผม 😂

หากเราจะพูดถึง Gatsby vs. Next.js ทั้งคู่มีวัตถุประสงค์ที่เหมือนกันก็คือชูโรงในเรื่องของการทำ SSR เพื่อทำให้ SEO มีประสิทธิภาพแบบ Natural ซึ่งในส่วนตัวของผมจะเลือกที่ใช้ Gatsby เพราะมี Plugin ที่ช่วยในการทำงานมากกว่า เช่นการทำ CMS หลังบ้าน ได้แก่ Prismic เป็นต้น ทำให้ตกหลุมรักเจ้า Gatsby ไปแล้ว ไม่ใช่แค่เท่านั้นยังมี Plug-in อีกเยอะที่เราสามารถนำมาใช้งานเพื่อ Reduce Time สำหรับการพัฒนาได้อีกด้วยสามารถเข้าไปดูได้จาก Link ด้านล่างได้เลย

Plugins

The library for searching and exploring Gatsby's vast plugin ecosystem to implement Node.js packages using Gatsby APIs

www.gatsbyjs.com

Conclusion

ข้อเปรียบเทียบทุกอย่างมาจากประสบการณ์ส่วนตัวของผมซึ่งอาจจะเอามาวัดไม่ได้ว่าอะไรดีกว่ากัน เพราะไม่ว่าจะเป็น Gatsby หรือ Create-React-App ก็มีทั้งข้อดีและข้อเสียภายในตัวอยู่แล้ว นั่นหมายความว่าไม่มี Framework ไหนที่จะตอบโจทย์ความต้องการได้ 100%

มันขึ้นอยู่กับสิ่งที่เรากำลังพัฒนาอยู่นั้นเหมาะสมกับเครื่องมือตัวไหนต่างหาก ถ้าจะให้วัดกันมัดต่อมัดก็ต้องเจาะไปทีละประเด็นไป เช่น การทำ SSR มี Framework อะไรบ้างตัวไหนมีดียังไง หรือไม่ก็เป็นการทำ Web Application มีตัวไหนทำได้บ้างล่ะ? ซึ่งเราค่อยไปว่ากันในบทความต่อ ๆ ไป บทความนี้ผมแค่อยากนำเสนอว่าเราต้องแยกให้ออกว่าเราควรใช้เครื่องมือที่เหมาะสมกับงานแต่ละประเภทมากกว่า ไว้เจอกันใหม่

สุดท้ายนี้ถ้ามีอะไรผิดพลาด ผมก็ต้องขออภัยด้วยครับ 🙏