เทรนด์ React ปี 2024

Astro (ใช้ร่วมกับ React)

• ปีที่แล้ว Astro ปรากฏตัวขึ้นในฐานะผู้สืบทอดของ Gatsby
• Astro เป็นที่รู้จักหลัก ๆ ว่าเหมาะกับเว็บไซต์แบบสแตติก แต่ก็กำลังได้รับความนิยมสำหรับเว็บแอปพลิเคชันและ API endpoint ด้วย
• เว็บไซต์ที่สร้างด้วย Astro เรนเดอร์บนเซิร์ฟเวอร์ ทำให้มีประสิทธิภาพที่ดีมากโดยพื้นฐาน
• Astro สามารถใช้งานได้แม้ไม่มี React หรือ UI framework และสามารถสร้าง UI component ผ่านไฟล์ .astro ได้
• เมื่อใช้ร่วมกับ React จะส่งเพียง HTML และ CSS ไปยังเบราว์เซอร์ และส่ง JavaScript เฉพาะเมื่อจำเป็นเท่านั้น
  • "fast-by-default"

การยืนยันตัวตน (ใน React)

• การยืนยันตัวตนใน React กลับมาน่าสนใจอีกครั้งด้วยแรงผลักดันจากหลายสตาร์ตอัปและโปรเจกต์โอเพนซอร์ส
• นอกเหนือจาก Firebase Authentication, Auth0, Passport.js และ NextAuth แล้ว ยังมีทางเลือกใหม่ ๆ ด้านการยืนยันตัวตนเกิดขึ้นอีกด้วย
• Supabase เป็นทางเลือกโอเพนซอร์สของ Firebase ที่มีฟีเจอร์หลากหลาย
• Clerk โฟกัสเฉพาะเรื่องการยืนยันตัวตน และทำให้การสมัครสมาชิกและการล็อกอินใน React ทำได้ง่าย
• Lucia ได้รับความนิยมร่วมกับ Astro และมอบทั้งความเป็นโอเพนซอร์สรวมถึงชั้น abstraction ที่ชัดเจนสำหรับฐานข้อมูล

ฟูลสแตก React แอปพลิเคชันด้วย tRPC

• tRPC กลายเป็นตัวเลือกโปรดของฉันสำหรับแอปพลิเคชันฟูลสแตกแบบ type-safe
• ขณะที่ Prisma สร้าง type จากโมเดลฐานข้อมูลของแบ็กเอนด์แอปพลิเคชัน tRPC จะคงความปลอดภัยของ type ตั้งแต่แบ็กเอนด์ไปจนถึงชั้น API ของฟรอนต์เอนด์
• ด้วยคุณสมบัติพื้นฐานของ tRPC ที่เป็น remote procedure call ฝั่งไคลเอนต์จึงสามารถเรียก API ของแบ็กเอนด์ได้ด้วยการเรียกฟังก์ชันปกติ
• tRPC ใช้สเปก JSON-RPC และชั้นการขนส่งแบบ HTTP และเมื่อใช้ร่วมกับ react-query จะรองรับการแคชที่มีประสิทธิภาพและการ batch request

React Server Components และ Next.js

• React Server Components(RSC) ถูกนำไปใช้งานและยอมรับโดยชุมชนเมื่อปีที่แล้วผ่าน Next 13.4
• RSC กำลังนำมาซึ่งการเปลี่ยนกระบวนทัศน์ครั้งใหญ่ในงานพัฒนาเว็บ
• RSC อาจเป็นการเปลี่ยนแปลงที่ใหญ่กว่า React Hook เพราะมันทำให้เราต้องคิดใหม่เกี่ยวกับวิธีใช้ React component ในแอปพลิเคชันขนาดใหญ่
• การใช้ RSC ช่วยให้สามารถดึงข้อมูลในระดับ component บนเซิร์ฟเวอร์ได้ก่อนที่ component จะถูกส่งหรือสตรีมไปยังเบราว์เซอร์ จึงช่วยเพิ่มประสิทธิภาพ
• ในสถานการณ์ที่ tRPC และ react-query ถูกใช้สำหรับการสื่อสารระหว่างไคลเอนต์กับเซิร์ฟเวอร์ ก็ชวนให้สงสัยว่า RSC จะมีบทบาทอย่างไรเมื่อต้องดึงข้อมูลจากฝั่งเซิร์ฟเวอร์ รอดูผลลัพธ์ในปีนี้อย่างน่าสนใจ

TanStack Router สำหรับ SPA React

• Tanner Linsley ยืนยันว่า SPA(Single Page Applications) ยังไม่ตาย
• เขาเป็นผู้มีส่วนร่วมในการสร้าง react-query และ react-table และได้เปิดตัวไลบรารีใหม่ชื่อ TanStack Router
• แม้นักพัฒนาจำนวนมากจะหันไปใช้เมตาเฟรมเวิร์กอย่าง Next.js และ Remix ซึ่งมาพร้อม router ในตัวและให้ความสำคัญกับการใช้งาน RSC แต่ก็ยังไม่มีใครสร้าง router แบบ type-safe สำหรับ React ขึ้นมาตั้งแต่ต้นจริง ๆ
• TanStack Router เข้ามาเติมช่องว่างสำคัญใน ecosystem ของ React และเป็น router แบบใหม่ที่รองรับ TypeScript
• router นี้ช่วยให้นักพัฒนาสามารถอ่านและเขียน URL state ได้อย่าง type-safe

Vercel ผลักดัน React ไปสู่ Edge

• Vercel คือบริษัทที่ผลักดัน Next.js ซึ่งมีส่วนเกี่ยวข้องอย่างลึกซึ้งกับกระแส RSC
• เนื่องจากนักพัฒนาหลักหลายคนถูกจ้างโดย Vercel นักพัฒนาจำนวนมากจึงมองว่า Vercel คือแรงขับเคลื่อนของ React
• Vercel ไม่ได้เพียงขยายขอบเขตของ React ด้วย RSC เท่านั้น แต่ยังขยายวิธีการ deploy และส่งมอบ React แอปพลิเคชันให้ผู้ใช้ได้อย่างมีประสิทธิภาพผ่าน Next.js ด้วย
• เมื่อใช้แอปพลิเคชัน Next บน Vercel จะสามารถสตรีม React component ผ่าน edge runtime ได้
• การสตรีม React component จาก edge แบบนี้ส่งผลอย่างมากต่อประสิทธิภาพ
• เมื่อผสานกับ serverless DB อย่าง PlanetScale ที่มี replica อยู่ทั่วโลก สิ่งนี้อาจกลายเป็นเทรนด์ที่น่าสนใจสำหรับวิธีโฮสต์แอปพลิเคชันในอนาคตหรือการเลือกตำแหน่งที่เหมาะสมยิ่งขึ้น

Bundler สำหรับ React: Turbopack ปะทะ Vite

• Turbopack คือผู้สืบทอดของ Webpack ซึ่งแม้จะยังไม่พร้อมสำหรับการใช้งานในโปรดักชัน แต่สามารถใช้ในการพัฒนาแบบโลคัลสำหรับแอปพลิเคชัน Next.js ได้แล้ว
• ในอดีต bundler ก็มีหน้าที่รับผิดชอบมากอยู่แล้ว แต่จากแนวโน้มที่ต้องผสาน client component และ server component เข้าด้วยกันทั้งในสภาพแวดล้อมการพัฒนาและโปรดักชัน จึงจำเป็นต้องมี bundler รูปแบบใหม่
• โดยส่วนตัวฉันอยากเห็น Vite และความสามารถฝั่งเซิร์ฟเวอร์ของมันถูกนำมาใช้ใน Next.js แต่ในขณะที่ Remix รวมถึงเมตาเฟรมเวิร์กและ SPA อื่น ๆ เลือกใช้ Vite ทาง Vercel/Next กลับเริ่มพัฒนา Turbopack

React Compiler (รู้จักกันในชื่อ React Forget)

• นักพัฒนา React มีความไม่พอใจกับการต้องใช้ useCallback, useMemo, memo
• ทีม React กำลังพัฒนาคอมไพเลอร์ชื่อ React Compiler แบบค่อนข้างเงียบ ๆ เพื่อทำให้การทำ memoization ทั้งหมดใน React แอปพลิเคชันเป็นอัตโนมัติ
• คาดว่ากระบวนการทำ memo ให้กับฟังก์ชัน (useCallback), ค่า (useMemo) และ component (memo) แบบแมนนวลจะหายไปในอนาคต
• React จะจัดการ memoization ทั้งหมดนี้เอง เพื่อไม่ให้ต้องคำนวณทุกอย่างใหม่ในการเรนเดอร์ครั้งถัดไป
• React Compiler จะทำให้ memoization แบบแมนนวลเหล่านี้เป็นอัตโนมัติ และช่วยปรับปรุงประสิทธิภาพของ React แอปพลิเคชัน
• มีแนวโน้มว่าจะถูกประกาศใน React 19 หรือ React Conf 2024

Biome

• หลายคนไม่พอใจกับการตั้งค่าและการทำงานร่วมกันระหว่าง ESLint กับ Prettier แต่ Biome (เดิมคือ Rome) ต้องการนำเสนอเครื่องมือแบบรวดเร็วและครบวงจรเพื่อมาแทนที่
• อีกทางเลือกหนึ่งคือ oxc(JavaScript Oxidation Compiler) ซึ่งดูมีอนาคตมากในฐานะ all-in-one toolchain

ไลบรารี Headless UI สำหรับ React

• นักพัฒนา React มักมีแนวโน้มเปลี่ยนไลบรารี UI ตัวโปรดกันทุกปี
• เมื่อไม่กี่ปีก่อนยังใช้ Material UI จากนั้นย้ายไป Semantic UI/Ant Design ต่อด้วย Chakra UI แล้วก็ Mantine UI และในปีที่แล้วก็มาหยุดที่ shadcn/UI
• ตัวเลือกก่อนหน้านี้ทั้งหมดส่วนใหญ่เกิดจากความต้องการด้านดีไซน์และการใช้งาน แต่ใน shadcn/UI มีบางอย่างเปลี่ยนไป
• shadcn/UI เป็นไลบรารี UI ยอดนิยมตัวแรกที่เปิดรับ Tailwind อย่างเต็มที่ และให้ปรับแต่งดีไซน์ของ component ได้
• แนวโน้มของไลบรารี Headless UI คือการมอบฟังก์ชันการทำงานและการเข้าถึงโดยไม่มีดีไซน์ตายตัว
• โซลูชัน CSS-in-JS อย่าง Styled Components หรือ Emotion สร้างภาระให้กับไคลเอนต์/เบราว์เซอร์ ดังนั้นโซลูชัน CSS-In-JS รุ่นใหม่อย่าง StyleX จึงช่วยบรรเทาปัญหานี้ด้วยการคอมไพล์ไปเป็น utility-first CSS

[firea32]

https://github.com/facebook/react-strict-dom
ผมก็กำลังรอ react-strict-dom อยู่เหมือนกัน
ถ้าออกมาได้สมบูรณ์จริง ก็น่าจะมาแทน react-native-web ได้

[greenhead]

ตั้งตารอ React Forget มากเลย