Dunia pengembangan web terus berkembang, dan React, framework JavaScript yang populer, ikut mengalami evolusi menarik. Artikel ini akan membahas bagaimana React, dengan fitur Server Components dan Server Actions yang baru, bertransformasi menjadi framework full-stack.

Kilas Balik Era Framework Frontend

Masih ingat tahun 2010? Saat itu, perang framework frontend sedang sengit dengan kehadiran Backbone, Knockout, dan Ember. Disusul kemudian oleh Angular dan React, belum ada yang bisa memprediksi siapa yang akan menjadi pemenang. Selama bertahun-tahun, aplikasi JavaScript client-side rendered (CSR) mendominasi, yang kita kenal sebagai single-page application (SPA). Biasanya, SPA hanya terdiri dari file HTML kecil yang terhubung ke file JavaScript besar, hingga teknik code splitting hadir.

Selama era ini, pengembangan frontend didominasi oleh berbagai framework dan library JavaScript. Sementara itu, backend umumnya tidak terikat pada bahasa pemrograman tertentu, karena REST menjadi standar untuk komunikasi API. Sebagai developer web freelance, pengalaman saya banyak menggunakan backend .NET, Java, Python, dan PHP. Penggunaan TypeScript/JavaScript di backend baru saya lihat pada proyek greenfield atau proyek kecil yang kontrol backend-nya saya pegang. Namun, tren ini mungkin berubah dengan kebangkitan React full-stack!

Melihat ke belakang, menarik untuk mengamati bagaimana persepsi developer terhadap periode 2010-2020 bervariasi tergantung kapan mereka memulai karier. Developer yang memulai sebelum 2010 terbiasa dengan lingkungan server-side rendered (SSR) dan umumnya lebih nyaman dengan pergeseran kembali ke teknik server-side belakangan ini. Sebaliknya, banyak developer lain yang menghabiskan hampir satu dekade hanya bekerja dengan REST API pada aplikasi client-side rendered (CSR). Mereka mungkin bingung dengan dunia React full-stack yang baru ini.

TypeScript dan Dampaknya pada REST

Munculnya TypeScript sebagai standar industri dalam beberapa tahun terakhir memberi developer frontend bahasa pemrograman yang lebih kuat dan diketik (typed). Setelah developer terbiasa dengan TypeScript, sulit untuk kembali. Menarik bagaimana perubahan kode yang relatif kecil ini memiliki dampak signifikan pada level personal dan industri secara keseluruhan.

Namun, dampak TypeScript pada REST melibatkan banyak solusi darurat. Meskipun OpenAPI (sebelumnya Swagger) sudah ada sebelumnya dan memungkinkan tim mendokumentasikan API REST, tujuan utamanya sekarang adalah menghasilkan interface API yang diketik. Meskipun ada kemungkinan untuk membuat interface yang diketik sempurna dalam arsitektur client-server, banyak proyek, berdasarkan pengalaman saya sebagai developer web freelance selama bertahun-tahun, gagal menerapkannya dengan benar sejak awal.

RPC: Teman Lama di Era Baru

Remote procedure call (RPC) bukanlah hal baru, tetapi mereka kembali populer di ekosistem React berkat tRPC. Dari pengalaman saya sebagai developer solo pada aplikasi 80.000 baris kode selama setengah tahun (pada 2023), memanggil fungsi pada backend untuk membaca dan menulis data adalah sebuah terobosan. Saya tidak pernah merasa lebih produktif dalam lingkungan di mana kedua sisi stack menggunakan TypeScript.

Sebelumnya, saya merasakan produktivitas serupa hanya dalam arsitektur GraphQL (generated) yang diketik beberapa tahun sebelumnya.

Memanggil backend hanya dengan fungsi untuk membaca dan menulis data terasa revolusioner. Tapi apakah itu semua yang dibutuhkan? Tidak. Terobosan nyata bagi saya datang dengan Server Components dan Server Actions pada tahun 2024, yang menjembatani kesenjangan ke server dengan tidak hanya memanggilnya, tetapi juga dengan kemampuan untuk mengimplementasikan dan menjalankan kode di sisi lain.

Server Components dan Server Actions: Menuju Full-Stack React

Server Components memungkinkan kita untuk mengeksekusi komponen React di server, memungkinkan akses langsung dari sumber data (misalnya database) sebelum mengembalikan UI dengan JSX.

JavaScript

import { getMessages } from '@/messages/queries/';

const MessageList = async () => {
  const messages = await getMessages();

  return (
    <ul>
      {messages.map((message) => (
        <li key={message.id}>{message.id}</li>
      ))}
    </ul>
  );
};

export { MessageList };

Server Actions, di sisi lain, membuat endpoint API HTTP di balik layar yang dapat dipanggil seperti remote procedure call dengan menjalankan fungsi. Server Components dan Server Actions mengubah React menjadi framework full-stack. Ini adalah waktu yang tepat untuk mengubah frontend menjadi lingkungan full-stack!

React sendiri hanya menyediakan primitif dan spesifikasi untuk Server Components dan Server Actions. Meta framework yang dibangun di atas React dapat menjembatani kesenjangan dengan bundler mereka yang menginterpretasikan arahan (misalnya ‘use client’ dan ‘use server’) antara client dan server.

Next.js: Pionir Server Components dan Server Actions

Next.js, sebagai salah satu meta framework React yang paling populer, telah menjadi pelopor dalam implementasi Server Components dan Server Actions. Meskipun Next.js sudah mendukung server-side rendering (SSR) sebelumnya, fitur-fitur baru ini memberdayakan developer untuk mengakses sumber daya server-side seperti database dan message queue secara langsung.

Masa Depan Full-Stack React

Ini baru permulaan dari pengembangan full-stack dengan React. Seiring dengan semakin banyaknya developer yang mulai mengakses database secara langsung melalui Server Components dan Server Actions, akan ada kurva pembelajaran yang harus dilalui untuk mengelola kompleksitas di luar aplikasi CRUD sederhana.

Dengan edukasi yang tepat, developer frontend akan segera menguasai implementasi arsitektur backend dengan layer, design pattern, dan best practice. Karena jujur saja, tidak ada yang ingin melihat panggilan fungsi ORM langsung di dalam komponen React.

Kesimpulan

Transformasi React menjadi framework full-stack adalah langkah yang sangat menarik. Dengan kemampuan untuk mengelola seluruh tumpukan teknologi dari frontend hingga backend, developer React dapat membangun aplikasi yang lebih cepat, lebih efisien, dan lebih terintegrasi. Ini adalah era baru dalam pengembangan web, dan saya sangat antusias untuk melihat apa yang akan terjadi selanjutnya.

Apa yang dapat Anda lakukan sekarang?

• Mulai belajar tentang Server Components dan Server Actions: Pelajari dokumentasi resmi React dan Next.js untuk memahami konsep dasar dan implementasinya.
• Eksperimen dengan proyek kecil: Cobalah membangun aplikasi sederhana dengan menggunakan Server Components dan Server Actions untuk merasakan langsung manfaatnya.
• Ikuti perkembangan komunitas: Bergabunglah dengan komunitas React dan Next.js untuk berdiskusi dengan developer lain dan mendapatkan informasi terbaru.