เทรนด์ React ปี 2025

 (robinwieruch.de)
16 คะแนน โดย xguru 2025-03-24 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • React กำลังพัฒนาเป็นเฟรมเวิร์กแบบฟูลสแตกที่ลบเส้นแบ่งระหว่างไคลเอนต์กับเซิร์ฟเวอร์
  • สถานะความเป็นเจ้าตลาดของ Next.js เริ่มอ่อนลง ขณะที่ TanStack Start และ React Router กำลังก้าวขึ้นมาเป็นคู่แข่ง
  • React เสริมความสามารถด้านฟอร์ม การจัดการสถานะ เซิร์ฟเวอร์คอมโพเนนต์ และการนำ AI มาใช้งาน
  • จากนี้ไปนักพัฒนา React จำเป็นต้องคุ้นเคยกับสภาพแวดล้อมแบบฟูลสแตก

React Server Components (RSC)

  • React Server Components (RSC) เป็นฟีเจอร์ที่ช่วยลดขนาด JavaScript bundle ฝั่งไคลเอนต์และเพิ่มประสิทธิภาพ
    • ประกาศครั้งแรก: 21 ธันวาคม 2020
    • การนำไปใช้ครั้งแรก: Next.js 13 (ปี 2022) พร้อมการเปิดตัว App Router
    • ใน Next.js 15 (ปี 2024) ฟีเจอร์นี้มีความเสถียรมากขึ้น
    • คาดว่า React Router และ TanStack Start จะรองรับ RSC ในเร็ว ๆ นี้
  • วิธีการทำงานของ RSC
    • ทำงานเพียงครั้งเดียวบนเซิร์ฟเวอร์ และส่งเฉพาะผลลัพธ์ที่เรนเดอร์แล้วไปยังไคลเอนต์
    • ลดปริมาณ JavaScript ฝั่งไคลเอนต์
    • เข้าถึงฐานข้อมูลและ API ได้จากฝั่งเซิร์ฟเวอร์ (เพิ่มความปลอดภัย)

React Server Functions (RSF)

  • React Server Actions (RSA) → เป็นรูปแบบที่พัฒนาต่อจาก RSC ซึ่งสามารถแก้ไขและอัปเดตข้อมูลบนเซิร์ฟเวอร์ได้
    • เรียกใช้ฟังก์ชันเซิร์ฟเวอร์แบบ remote procedure call (RPC) ได้โดยไม่ต้องกำหนด API route
    • ใช้ directive use server
  • React Server Functions (RSF)
    • ในเดือนกันยายน 2024 ทีม React ประกาศ RSF เป็นแนวคิดแบบครอบคลุมที่รวม RSA ไว้ด้วย
    • ทำงานได้ทั้งใน RSC และ client component
    • ครอบคลุมทั้งการอ่านและแก้ไขข้อมูล
  • มีแผนจะนำไปใช้ใน Next.js, TanStack Start และ React Router

การปรับปรุง React Forms

  • ใน React 19 ความสามารถด้านฟอร์มได้รับการปรับปรุงครั้งใหญ่
    • สามารถเรียก server action ได้โดยตรงผ่านแอตทริบิวต์ action ของ <form>
    • เพิ่ม hook ใหม่
      • useFormStatus, useOptimistic, useActionState
    • ปรับปรุงการจัดการสถานะฟอร์มที่ซับซ้อน
  • ยังทำงานร่วมกับไลบรารีเดิมได้
    • ยังสามารถใช้ไลบรารีเดิมอย่าง React Hook Form ได้ต่อไป
    • ความสามารถจัดการฟอร์มของ React เองมีพลังและยืดหยุ่นมากขึ้น

Library vs Framework (ไลบรารี vs เฟรมเวิร์ก)

  • ตอนนี้ React มีลักษณะเกินกว่าจะเป็นเพียงไลบรารีธรรมดา และใกล้เคียงความเป็นเฟรมเวิร์กมากขึ้น
    • รองรับ client-side rendering (CSR), server-side rendering (SSR), static site generation (SSG), incremental static regeneration (ISR)
    • ต้องใช้เฟรมเวิร์กเฉพาะ (เช่น Next.js) จึงจะใช้ความสามารถ RSC และ RSF ได้
  • ต้องเลือกตามความต้องการของโปรเจกต์
    • แอปไคลเอนต์แบบเรียบง่าย → ใช้ React โดยตรงได้
    • ต้องการความสามารถฝั่งเซิร์ฟเวอร์ → จำเป็นต้องใช้เฟรมเวิร์กอย่าง Next.js, TanStack Start หรือ React Router

การแข่งขันของ React Frameworks เข้มข้นขึ้น

  • Next.js ยังคงเป็นเฟรมเวิร์กที่ได้รับความนิยมมากที่สุด
  • TanStack Start และ React Router มีแนวโน้มสูงที่จะก้าวขึ้นมาเป็นคู่แข่งในปี 2025
    • TanStack Start → เฟรมเวิร์กใหม่ที่สร้างบน TanStack Router
    • React Router → พัฒนาต่อยอดจาก Remix และมีความเป็นเฟรมเวิร์กชัดเจนขึ้น
  • ทั้งสองเฟรมเวิร์กมีแผนรองรับ RSC และ RSF

Full-Stack React

  • การเพิ่มความสามารถฝั่งเซิร์ฟเวอร์ของ React → กำลังทำให้มันพัฒนาไปสู่แอปพลิเคชันแบบฟูลสแตก
    • เข้าถึงฐานข้อมูลได้ผ่าน RSC และ RSF
    • ต้องมีโครงสร้างพื้นฐานแบ็กเอนด์ เช่น การยืนยันตัวตน สิทธิ์การเข้าถึง และแคช
    • การสื่อสารระหว่างไคลเอนต์กับเซิร์ฟเวอร์ก็ง่ายขึ้นด้วย
  • ความเป็นไปได้ในการสร้างแอปพลิเคชัน AI บน React เพิ่มสูงขึ้น

"Shadcnification" ของ React

  • Shadcn UI → กำลังกลายเป็นไลบรารี UI พื้นฐานของ React คล้ายกับที่ Tailwind CSS เป็นมาตรฐานในงานสไตลิง
    • มีคอมโพเนนต์ที่จัดสไตล์ไว้ล่วงหน้า
    • ปรับแต่งได้
  • อาจมีแนวทางใหม่ด้าน UI เกิดขึ้น
    • ปัจจุบันหลายโปรเจกต์เริ่มมีหน้าตาคล้ายกัน

React และ AI

  • การสร้างโค้ด React ด้วย AI เพิ่มขึ้น
    • เครื่องมือ AI (เช่น v0) สามารถสร้างโค้ด React อัตโนมัติได้
  • การสร้างแอปพลิเคชันที่มี AI ช่วยทำงานเพิ่มขึ้น
    • รองรับโดยเครื่องมืออย่าง AI SDK ของ Vercel, LangChain เป็นต้น

Biome (เดิมชื่อ Rome)

  • แก้ปัญหาการทำงานร่วมกันระหว่าง ESLint และ Prettier
  • เป็นเครื่องมือที่รวดเร็วและสม่ำเสมอซึ่งสร้างบน Rust
    • ได้รับเงินรางวัล $20,000 จาก Prettier (ปี 2023)
  • Biome → มีโอกาสสูงที่จะกลายเป็น toolchain รุ่นถัดไปของ React

React Compiler

  • React Compiler → เครื่องมืออัตโนมัติสำหรับเพิ่มประสิทธิภาพ
    • จัดการ useCallback, useMemo, memo ให้อัตโนมัติ
    • ไม่จำเป็นต้องทำ memoization ด้วยตนเอง
    • มีเวอร์ชันเบต้าใน React 19 แล้ว

บทความที่เกี่ยวข้อง