ระบบนิเวศ JavaScript กำลังพัฒนาอย่างต่อเนื่อง โดยมีเฟรมเวิร์กใหม่ๆ ที่สัญญาว่าจะให้ประสิทธิภาพและประสบการณ์การพัฒนาที่ดีกว่า Next.js เป็นตัวเลือกยอดนิยมมายาวนานสำหรับแอปพลิเคชัน React แต่สถาปัตยกรรม App Router และ Server Components ล่าสุดของมันได้จุดประเด็นการถกเถียงอย่างมีนัยสำคัญ เมื่อทีมต่างๆ ได้รับประสบการณ์จริงกับฟีเจอร์เหล่านี้ จำนวนนักพัฒนาที่เพิ่มมากขึ้นกำลังแสดงความไม่พอใจกับการตัดสินใจออกแบบขั้นพื้นฐานที่ทำให้การพัฒนาเว็บมีความซับซ้อนแทนที่จะทำให้ง่ายขึ้น
Server Components สร้างความสับสนแทนความชัดเจน
การนำเสนอ Server Components ใน Next.js มีจุดประสงค์เพื่อปฏิวัติวิธีที่นักพัฒนาจัดการกับการดึงข้อมูลและการเรนเดอร์คอมโพเนนต์ คอมโพเนนต์เหล่านี้ทำงานเฉพาะบนเซิร์ฟเวอร์ โดยไม่สามารถเข้าถึงฟีเจอร์ฝั่งไคลเอ็นต์เช่น useState หรือ useEffect ประโยชน์ทางทฤษฎีรวมถึงการโหลดหน้าเริ่มต้นที่เร็วขึ้นและขนาดชุด JavaScript ที่ลดลง อย่างไรก็ตาม การนำไปใช้จริงได้สร้างปัญหามากกว่าวิธีแก้ไขสำหรับทีมพัฒนาจำนวนมาก
ปัญหาหลักอยู่ที่คำศัพท์และโมเดลการทำงานที่คลุมเครือ เมื่อทั้งคอมโพเนนต์เซิร์ฟเวอร์และไคลเอ็นต์สามารถทำงานบนแบ็กเอนด์ได้ทางเทคนิค ความแตกต่างจึงกลายเป็นเรื่อง模糊และน่าสับสน นักพัฒนาพบว่าตนเองกำลังนำทางผ่านระบบทึบแสงที่การจัดการข้อมูลกลายเป็นเรื่องซับซ้อนโดยไม่จำเป็น ซึ่งต้องใช้วิธีการแก้ไขที่ขัดกับวัตถุประสงค์ของสถาปัตยกรรมใหม่ เส้นการเรียนรู้มีความชัน และเอกสารประกอบมักทำให้ทีมต่างๆ ต้องดิ้นรนเพื่อทำความเข้าใจแนวคิดพื้นฐาน
ปัญหาที่มีการรายงานเกี่ยวกับ Next.js App Router:
- Server Components สร้างขอบเขตการทำงานที่สับสน
- การ re-mount หน้าเว็บทั้งหมดระหว่างการนำทางทำให้สูญเสีย state
- Layout components มีการ re-render โดยไม่จำเป็น
- การจัดการ Metadata ต้องใช้วิธีแก้ปัญหาที่ซับซ้อน
- เส้นโค้งการเรียนรู้ที่สูงชันพร้อมเอกสารประกอบที่ไม่เพียงพอ
ปัญหาประสิทธิภาพในโลกจริงปรากฏขึ้น
บางทีแง่มุมที่น่าหงุดหงิดที่สุดที่นัก dilaporta รายงานคือประสบการณ์การนำทางภายในแอปพลิเคชัน App Router ไม่เหมือนกับแอปพลิเคชันหน้าเดียวแบบดั้งเดิมที่การนำทางรู้สึกได้ทันที Next.js App Router ทำให้เกิดการติดตั้งหน้าใหม่ทั้งหมดระหว่างการเปลี่ยนเส้นทาง สิ่งนี้ทำลายสถานะคอมโ�เนนต์ที่มีอยู่และสร้างการกะพริบที่มองเห็นได้ซึ่งลดทอนประสบการณ์ผู้ใช้
ฉันพบว่าพฤติกรรมนี้น่าหงุดหงิดอย่างไม่น่าเชื่อ มันยากสำหรับฉันที่จะเข้าใจว่าทำไมพวกเขาถึงเปิดตัว RSC โดยไม่แก้ไขเรื่องนี้
ผลกระทบด้านประสิทธิภาพขยายไปไกลกว่าการนำทาง คอมโพเนนต์เลย์เอาต์ ซึ่งควรคงความเสถียรระหว่างการเปลี่ยนหน้า กลับเรนเดอร์ใหม่โดยไม่จำเป็น การเรนเดอร์เทียมนี้บังคับให้นักพัฒนาต้องใช้วิธีการแก้ไขที่ซับซ้อนเพื่อรักษาสถานะและป้องกันข้อบกพร่องทางภาพ สิ่งที่ถูกนำเสนอว่าเป็นการเพิ่มประสิทธิภาพ มักส่งผลให้แอปพลิเคชันทำงานช้าลงและตอบสนองน้อยลงในทางปฏิบัติ
ความซับซ้อนของเวิร์กโฟลว์การพัฒนา
การแยกอย่างเข้มงวดระหว่างคอมโพเนนต์เซิร์ฟเวอร์และไคลเอ็นต์ของ App Router นำมาซึ่งแรงเสียดทานในการพัฒนาอย่างมีนัยสำคัญ การจัดการเมตาดาต้ากลายเป็นเรื่องท้าทายเป็นพิเศษ เนื่องจากเมตาดาต้าที่อัปเดตแบบไดนามิกต้องการโซลูชันแบบหลีกเลี่ยงที่ขัดแย้งกับรูปแบบการออกแบบที่ตั้งใจของเฟรมเวิร์ก ข้อกำหนดที่ต้องทำเครื่องหมายคอมโพเนนต์ไคลเอ็นต์ด้วยคำสั่ง use client สร้างขอบเขตเทียมที่ทำให้การประกอบคอมโพเนนต์ซับซ้อน
ทีมจำนวนมากรายงานว่าใช้เวลามากเกินไปในการเขียนโค้ดที่มีอยู่ใหม่ให้สอดคล้องกับสถาปัตยกรรมใหม่ แทนที่จะสร้างฟีเจอร์ใหม่ ภาระทางจิตใจในการตัดสินใจอย่างต่อเนื่องว่าคอมโพเนนต์ใดควรเป็นเซิร์ฟเวอร์เทียบกับไคลเอ็นต์ ร่วมกับข้อจำกัดของแต่ละประเภท ทำให้ความเร็วในการพัฒนาช้าลง ผู้แสดงความคิดเห็นหลายคนตั้งข้อสังเกตว่าการละทิ้ง Next.js ทั้งหมดนำไปสู่แอปพลิเคชันที่เรียบง่ายกว่า เร็วกว่า และมีพฤติกรรมที่คาดเดาได้มากกว่า
ทางเลือกอื่นที่ถูกกล่าวถึง:
- Vite + React Router สำหรับแอปพลิเคชันฝั่งไคลเอนต์
- รูปแบบแบบดั้งเดิมที่ไม่ใช้ Server Components
- Nuxt.js สำหรับนักพัฒนา Vue.js
- โซลูชันการจัดการเส้นทางแบบกำหนดเองที่เรียบง่าย
การตอบสนองของชุมชนและทางเลือกอื่นๆ
ปฏิกิริยาของชุมชนพัฒนาต่อปัญหาเหล่านี้บอกได้ชัดเจน ทีมจำนวนมากกำลังพิจารณาเลือกใช้เฟรมเวิร์กของพวกเขาใหม่ โดยบางทีมเลือกใช้โซลูชันที่เรียบง่ายกว่าเช่น Vite กับ React Router สำหรับแอปพลิเคชันฝั่งไคลเอ็นต์ ทีมอื่นๆ กำลังสำรวจเมตาเฟรมเวิร์กทางเลือกที่เสนอวิธีการต่างๆ ในการเรนเดอร์ฝั่งเซิร์ฟเวอร์และสถาปัตยกรรมคอมโพเนนต์
ฉันทามติในหมู่นักพัฒนาที่หงุดหงิดคือความซับซ้อนควรได้รับการพิสูจน์ด้วยประโยชน์ที่ชัดเจน เมื่อเฟรมเวิร์กแนะนำแนวคิดใหม่ที่สำคัญโดยไม่มีการปรับปรุงที่สอดคล้องกันในประสบการณ์นักพัฒนาหรือประสิทธิภาพของแอปพลิเคชัน มันก็ยากที่จะพิสูจน์ความพยายายามในการโยกย้าย ทีมบางส่วนประสบความสำเร็จโดยเพียงแค่หลีกเลี่ยง Server Components ทั้งหมด และยึดติดกับรูปแบบดั้งเดิมที่เข้าใจและดีบักได้ง่ายกว่า
สถานะปัจจุบันของ Next.js App Router ทำหน้าที่เป็นเครื่องเตือนใจว่าเทคโนโลยีใหม่ๆ ต้องพิสูจน์คุณค่าในสถานการณ์จริง แม้ว่าข้อได้เปรียบทางทฤษฎีของ Server Components จะน่าสนใจ ความท้าทายในการนำไปใช้จริงได้นำพาทีมจำนวนมากไปหาโซลูชันที่เรียบง่ายกว่า ในขณะที่ระบบนิเวศ JavaScript ยังคงพัฒนาต่อไป ความสมดุลระหว่างนวัตกรรมและความเสถียรยังคงเป็นความกังวลหลักสำหรับทีมพัฒนาทั่วโลก
อ้างอิง: One Year with Next.js App Router — Why We're Moving On