Tren React pada 2025

 (robinwieruch.de)
16 poin oleh xguru 2025-03-24 | 1 komentar | Bagikan ke WhatsApp
  • React sedang berevolusi menjadi framework full-stack yang meruntuhkan batas klien-server
  • Posisi dominan Next.js melemah, sementara TanStack Start dan React Router muncul sebagai pesaing
  • Fitur React seperti form, manajemen state, server component, dan adopsi AI semakin diperkuat
  • Developer React ke depan perlu terbiasa dengan lingkungan full-stack

React Server Components (RSC)

  • React Server Components (RSC) adalah fitur yang mengurangi ukuran bundel JavaScript sisi klien dan mengoptimalkan performa
    • Pertama diumumkan: 21 Desember 2020
    • Implementasi pertama: pengenalan App Router di Next.js 13 (2022)
    • Mencapai kondisi yang lebih stabil di Next.js 15 (2024)
    • React Router dan TanStack Start juga diperkirakan segera mengadopsi RSC
  • Cara kerja RSC
    • Dieksekusi sekali di server, lalu hanya hasil render yang dikirim ke klien
    • Mengurangi jumlah JavaScript di sisi klien
    • Dapat mengakses database dan API dari server (keamanan lebih kuat)

React Server Functions (RSF)

  • React Server Actions (RSA) → bentuk yang berkembang dari RSC, memungkinkan modifikasi dan pembaruan data di server
    • Menjalankan fungsi server dengan pendekatan remote procedure call (RPC) tanpa mendefinisikan API route
    • Menggunakan directive use server
  • React Server Functions (RSF)
    • Pada September 2024, tim React memperkenalkan RSF sebagai konsep yang lebih luas yang mencakup RSA
    • Dapat berjalan baik di RSC maupun client component
    • Mencakup operasi membaca dan memodifikasi data
  • Akan diimplementasikan di Next.js, TanStack Start, dan React Router

Peningkatan React Forms

  • Di React 19, fitur terkait form mengalami peningkatan besar
    • Dapat langsung memanggil server action melalui atribut action pada <form>
    • Penambahan hook baru
      • useFormStatus, useOptimistic, useActionState
    • Memperbaiki pengelolaan state form yang kompleks
  • Tetap kompatibel dengan library yang sudah ada
    • Library yang sudah ada seperti React Hook Form tetap bisa digunakan
    • Fitur pemrosesan form bawaan React menjadi lebih kuat dan fleksibel

Library vs Framework (Library vs Framework)

  • React kini melampaui sekadar library dan mulai berkarakter sebagai framework
    • Mendukung client-side rendering (CSR), server-side rendering (SSR), static site generation (SSG), dan incremental static regeneration (ISR)
    • Fitur RSC dan RSF hanya dapat digunakan jika memakai framework tertentu (misalnya Next.js)
  • Perlu memilih sesuai kebutuhan proyek
    • Aplikasi klien sederhana → bisa menggunakan React saja
    • Butuh fitur sisi server → perlu framework seperti Next.js, TanStack Start, atau React Router

Persaingan Framework React Makin Ketat

  • Next.js masih menjadi framework paling populer
  • TanStack Start dan React Router berpotensi besar muncul sebagai pesaing pada 2025
    • TanStack Start → framework baru berbasis TanStack Router
    • React Router → berkembang dari Remix dan semakin kuat sebagai framework
  • Kedua framework itu juga dijadwalkan mendukung RSC dan RSF

Full-Stack React

  • Pengenalan fitur React yang berpusat pada server → berkembang menjadi aplikasi full-stack
    • Memungkinkan akses database melalui RSC dan RSF
    • Membutuhkan infrastruktur backend seperti autentikasi, otorisasi, dan caching
    • Komunikasi antara klien dan server juga menjadi lebih sederhana
  • Kemungkinan membangun aplikasi AI berbasis React semakin besar

"Shadcnification" pada React

  • Shadcn UI → mulai menjadi library UI default untuk React seperti halnya Tailwind CSS
    • Menyediakan komponen yang sudah diberi styling sebelumnya
    • Dapat dikustomisasi
  • Ada kemungkinan muncul pendekatan UI baru
    • Saat ini muncul fenomena banyak proyek terlihat mirip

React dan AI

  • Peningkatan pembuatan kode React berbasis AI
    • Tool AI (seperti v0) secara otomatis menghasilkan kode React
  • Peningkatan pembangunan aplikasi dengan dukungan AI
    • Didukung oleh Vercel AI SDK, LangChain, dan lainnya

Biome (sebelumnya Rome)

  • Menyelesaikan masalah integrasi ESLint dan Prettier
  • Tool berbasis Rust yang cepat dan konsisten
    • Memenangkan hadiah $20,000 dari Prettier (2023)
  • Biome → berpotensi besar menjadi toolchain React generasi berikutnya

React Compiler

  • React Compiler → alat otomatisasi optimasi performa
    • Menangani useCallback, useMemo, dan memo secara otomatis
    • Tidak perlu memoization manual
    • Versi beta tersedia di React 19

Bacaan terkait