reactjs - ความแตกต่างระหว่าง Next.js และ Create React App คืออะไร?
ฉันกำลังพยายามเข้าใจความแตกต่างระหว่าง Next.js กับ Create React App (CRA) ฉันรู้ว่าทั้งสองถูกสร้างขึ้นมาเพื่อทำให้ชีวิตของเราง่ายขึ้นในการพัฒนาแอปหน้าสำหรับผู้ใช้โดยใช้ React
หลังจากสำรวจบทความบางส่วนบน Google ฉันพบว่าความแตกต่างหลักคือ
Next.js ให้การเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR) ขณะที่ Create React App ให้การเรนเดอร์ฝั่งลูกค้า (CSR) และ SSR ช่วยปรับปรุงประสิทธิภาพการโหลดแอปพลิเคชัน
แต่แล้วพารามิเตอร์อื่น ๆ จากมุมมองการพัฒนาล่ะ อย่างเช่นต่อไปนี้?
การบำรุงรักษาและการปรับขยายของเว็บแอปพลิเคชันที่พัฒนาด้วย Next.js หรือ CRA
การสนับสนุน TypeScript และ React hooks/Redux
นี่เป็นการเปรียบเทียบที่ผิดหรือไม่?
คำตอบ #1
ผมได้ใช้ทั้ง NextJs และ CRA ทั้งสองเฟรมเวิร์กนี้สามารถใช้เริ่มต้นได้อย่างรวดเร็วและให้ประสบการณ์การพัฒนาที่ดี อย่างไรก็ตาม ทั้งสองนี้มีกรณีการใช้งานที่แต่ละอย่างเด่นกว่าอีกอย่าง ผมจะลองเปรียบเทียบพวกมันตามปัจจัยบางอย่างเหล่านี้ สามารถแนะนำการแก้ไขเพิ่มเติมหรือความคิดเห็นเพิ่มเติมได้ตามสะดวก
การเรนเดอร์ฝั่งเซิร์ฟเวอร์
| CRA | Next.js |
|---|---|
| CRA ไม่รองรับ SSR โดยตรง อย่างไรก็ตาม คุณยังสามารถตั้งค่าได้ เพียงแต่มันต้องใช้ความพยายามมากขึ้นในการตั้งค่า SSR กับเซิร์ฟเวอร์และการกำหนดค่าที่คุณต้องการ ทีมพัฒนาซอฟต์แวร์ไม่มีแผนที่จะรองรับสิ่งนี้ในอนาคตอันใกล้ พวกเขาแนะนำเครื่องมืออื่นสำหรับกรณีการใช้งานนี้ | NextJs มีประเภทต่าง ๆ สำหรับ SSR รองรับ SSR โดยตรง * การสร้างแบบคงที่: ดึงข้อมูลในขณะสร้าง นี่เหมาะที่สุดสำหรับกรณีการใช้งานเช่นบล็อกหรือเว็บไซต์แบบคงที่ * การเรนเดอร์ฝั่งเซิร์ฟเวอร์: ดึงข้อมูลและเรนเดอร์สำหรับแต่ละคำร้องขอ คุณต้องทำสิ่งนี้เมื่อคุณต้องการให้บริการมุมมองที่ต่างกันสำหรับผู้ใช้ที่ต่างกัน |
ความสามารถในการปรับแต่ง
ฉันคิดว่านี่คือจุดที่เครื่องมือเหล่านี้แตกต่างกันอย่างมากและการตัดสินใจของคุณสามารถขึ้นอยู่กับปัจจัยนี้
| CRA | Next.js |
|---|---|
| Create React App ไม่ให้คุณมีพื้นที่มากนักในการปรับแต่งการตั้งค่า การตั้งค่าเช่น webpack config จะไม่สามารถเปลี่ยนแปลงได้ เว้นแต่ คุณจะเบี่ยงออกจากวิธีปกติของ CRA (eject, rescripts, rewired, craco) โดยพื้นฐานแล้ว คุณต้องใช้สิ่งที่ถูกตั้งค่าใน react-scripts ซึ่งเป็นแกนกลางของ CRA | เกือบทุกอย่างสามารถกำหนดค่าได้ หากคุณตรวจสอบตัวอย่างเทมเพลต NextJs คุณจะเห็นไฟล์เช่น babelrc, jest.config, eslintrc เป็นต้น ที่คุณสามารถกำหนดค่าได้ |
ความสามารถในการบำรุงรักษา
| สำนักงานด้านรายได้ของแคนาดา | Next.js |
|---|---|
| CRA มีความเห็นเป็นของตัวเองมาก ถ้าคุณติดตามการอัปเดตของการปล่อยเวอร์ชัน CRA อยู่เสมอ มันก็ไม่ยากที่จะบำรุงรักษา | NextJs ก็ได้รับการดูแลอย่างดีเช่นกัน พวกเขาปล่อยอัปเดตอย่างสม่ำเสมอ |
ไทป์สคริปต์
| CRA | Next.js |
|---|---|
รองรับทันทีโดยไม่ต้องปรับแต่งอะไรเพิ่มเติม คุณสามารถเริ่มต้นแอป CRA ด้วย TypeScript ได้ด้วย npx create-react-app my-app --template typescript | รองรับ TypeScript โดยตรง เริ่มต้นด้วยการตั้งค่าสำหรับ TypeScript โดยใช้ touch tsconfig.json |
รองรับ Hooks
เวอร์ชันล่าสุดของทั้ง CRA และ NextJs จะติดตั้งเวอร์ชันของ React ที่รองรับ hooks คุณยังสามารถอัปเกรดเป็นเวอร์ชันล่าสุดได้อย่างง่ายดาย
รองรับ Redux
Redux เป็นไลบรารีที่คุณสามารถใช้กับเครื่องมือทั้งสองนี้ได้
คำตอบ #2
Create React App เป็นเพียงเครื่องมือสร้างโปรเจกต์ React เพื่อช่วยให้คุณตั้งค่าโปรเจกต์ React ได้อย่างรวดเร็ว หลังจากเรียกใช้สคริปต์ CRA npx create-react-app <appname> คุณจะได้แอปพลิเคชันแบบหน้าเดียวที่สวยงามและสะอาดที่สามารถรันได้ หลังฉากคุณยังได้สิ่งต่างๆ เช่น babel, eslint, jest, webpack ที่ตั้งค่าไว้แล้ว จึงเป็นวิธีที่สะดวกจริงๆ ในการเริ่มพัฒนา React และในกรณีที่คุณต้องการการควบคุมนโยบายของเครื่องมือเหล่านั้นมากขึ้น คุณยังสามารถใช้ npm run eject ได้
Next.js ในทางกลับกัน เป็นเฟรมเวิร์กที่สร้างบน React สำหรับการสร้างแอปเซิร์ฟเวอร์ Node.js ซึ่งหมายความว่าคุณจะใช้ตรรกะแบบองค์ประกอบเหมือนกันในการสร้างหน้าเว็บและใช้ประโยชน์จากเอนจินการนำทางของ Next.js สำหรับการนำทางระหว่างหน้า การเรนเดอร์ฝั่งเซิร์ฟเวอร์จะช่วยให้เวลาการโหลดกระจายไปในช่วงเวลามากขึ้น ดังนั้นประสิทธิภาพที่รับรู้จะน่าจะดีกว่า Redux ก็สามารถใช้ได้เช่นกัน แต่จะมีขั้นตอนเพิ่มเติมบางอย่างเพื่อให้ทำงานได้อย่างถูกต้อง (ดูที่ https://github.com/kirill-konshin/next-redux-wrapper)
คำตอบ #3
สรุปย่อ
ความแตกต่างที่ใหญ่ที่สุดคือวัตถุประสงค์ของทั้งสองโปรเจกต์ NextJS : JAM Stack หรือ Static Site Generator Create React App : เป็นวิธีที่ได้รับการสนับสนุนอย่างเป็นทางการในการสร้างแอปพลิเคชัน React แบบหน้าเดียว
คำอธิบาย:
ปัญหานี้เป็นเรื่องจริงสำหรับหลายโครงการโอเพนซอร์ส ดูเหมือนจะเป็นทางเลือกของกันและกัน แต่พวกเขามีความแตกต่างที่สำคัญ ตัวอย่างเช่น ในกรณีนี้ แม้ว่าโครงการทั้งสองจะใช้ ReactJS เป็นส่วนหน้าและสร้างเว็บแอป แต่ปัญหาที่พวกเขาแก้นั้นแตกต่างกันมาก มีฟีเจอร์ ธีม/เทมเพลต ใน js ที่ซ้อนทับกันอยู่บ้าง แต่การพัฒนาและงานในอนาคตจะมุ่งไปที่การปรับปรุงโครงการเพื่อช่วยแก้ปัญหาเหล่านั้นให้ดียิ่งขึ้น
เช่น NextJS จะพยายามรวมหากมีคุณสมบัติใหม่ของ Markdown ที่พัฒนาขึ้น ซึ่งจะไม่เกิดขึ้นใน CreateReactApps
ข้อเสนอแนะ
จากคำถามของคุณ ดูเหมือนว่าคุณกำลังมองหาโครงการเหล่านี้เพื่อพัฒนาแอป React Native ดังนั้นฉันจะแนะนำให้ใช้ Create React App
การเปรียบเทียบของคุณควรเน้นหลัก ๆ ว่าโครงการนี้สอดคล้องกับปัญหาที่ฉันกำลังแก้ไขหรือไม่ จากนั้นเปรียบเทียบความสามารถในการบำรุงรักษา ความสามารถในการขยาย การรองรับ Typescript และ React Hooks/Redux
ในกรณีที่ต้องการข้อมูลเพิ่มเติม โปรดคอมเมนต์