Memulai Proyek Baru dengan React

Anda dapat menggunakan React tanpa menggunakan framework—begitupun Anda dapat menggunakan React untuk sebagian dari halaman proyek Anda. Namun, jika Anda ingin membuat aplikasi atau situs baru sepenuhnya menggunakan React, kami merekomendasikan Anda untuk menggunakan framework.

Berikut alasannya.

Meskipun Anda tidak membutuhkan fungsi routing maupun pengambilan data di awal pembuatan proyek, suatu waktu Anda perlu menambahkan beberapa library baru untuk proyek tersebut. Semakin bertambahnya ukuran bundel JavaScript karena bertambahnya fitur baru, Anda perlu memikirkan bagaimana cara untuk memecah kode untuk setiap route secara individu. Dengan semakin kompleksnya kebutuhan pengambilan data, Anda mungkin akan menghadapi situasi semakin banyaknya permintaan jaringan antara server dan klien yang akan membuat aplikasi Anda terasa sangat lambat. Semakin banyak pengguna Anda dengan kondisi jaringan yang buruk dan perangkat dengan spesifikasi rendah serta fitur terbatas, Anda mungkin perlu untuk dapat membuat HTML dari komponen aplikasi Anda untuk bisa menampilkan konten aplikasi secara cepat—baik di server, atau saat waktu build. Mengubah susunan sistem untuk menjalankan kode di server atau saat waktu build sangatlah rumit.

Masalah ini tidak hanya terjadi di React. Itulah mengapa Svelte memiliki SvelteKit, Vue memiliki Nuxt, dan lain sebagainya. Untuk menyelesaikan masalah ini, Anda perlu untuk mengintegrasikan bundler Anda dengan router Anda dan dengan library pengambilan data Anda. Membuat pengaturan awal dapat bekerja bukanlah hal yang sulit, namun terdapat banyak seluk-beluk yang terlibat dalam pembuatan suatu aplikasi yang dapat memuat dengan cepat meskipun terus berkembang dari waktu ke waktu. Anda mungkin ingin mengirimkan kode aplikasi dalam jumlah seminimal mungkin namun dapat melakukannya dalam sekali jalan antara klien dan server pulang pergi, yang juga secara paralel dengan data apapun yang dibutuhkan untuk halaman tersebut. Anda mungkin ingin membuat halaman menjadi interaktif bahkan sebelum kode JavaScript dijalankan, untuk dapat mendukung peningkatan progresif. Anda mungkin ingin membuat sebuah folder dengan semua berkas HTML statis untuk halaman marketing Anda yang dapat dipasang dimanapun dan dapat bekerja meskipun tanpa JavaScript. Membangun aplikasi dengan kemampuan seperti ini membutuhkan kerja keras dari Anda untuk mewujudkannya.

Secara umum, framework React pada halaman ini dapat menyelesaikan masalah yang disebutkan sebelumnya, tanpa perlu usaha tambahan dari Anda. React membantu Anda untuk dapat mulai membuat proyek dengan sangat ringkas dan kemudian mengembangkan aplikasi Anda sesuai kebutuhan Anda. Setiap framework React memiliki komunitas yang aktif, sehingga Anda akan dengan mudah untuk menemukan jawaban atas pertanyaan serta informasi terkait peningkatan peralatan Anda. Framework juga membantu Anda dalam menstrukturkan kode, membantu Anda dan orang lain untuk memahami konteks dan keterampilan di antara berbagai proyek. Sebaliknya dengan menggunakan pengaturan sendiri, Anda akan mudah terjebak pada versi dependensi yang sudah tidak didukung, dan pada akhirnya Anda akan membuat framework Anda sendiri tanpa komunitas dan rencana peningkataan untuk membantu framework tersebut terus berkembang (mungkin framework tersebut pun mirip seperti yang pernah kita buat di masa lalu, dengan desain yang lebih asal-asalan).

Jika Anda masih belum yakin, atau aplikasi Anda memiliki kendala tidak umum yang tidak dapat dilayani dengan baik oleh framework ini dan Anda ingin membuat pengaturan sendiri, kami tidak dapat menghentikan Anda—coba saja! Gunakan react dan react-dom dari npm, siapkan bundler proses build kostum Anda seperti Vite atau Parcel, dan peralatan lainnya sesuai kebutuhan Anda untuk routing, pembuatan halaman statis atau server-side rendering, dan lainnya.

Bundler App Router Next.js sepenuhnya mengimplementasi spesifikasi React Server Components. Hal ini memungkinkan Anda untuk dapat menggabungkan waktu build, server-only, dan komponen interaktif ke dalam satu pohon React.

Sebagai contoh, Anda dapat menulis komponen server-only React sebagai sebuah fungsi async yang dapat membaca data dari database atau sebuah berkas. Kemudian Anda dapat mengirimkan data tersebut ke komponen interaktif Anda:

// Komponen ini *hanya* berjalan di server (atau pada saat waktu build).
async function Talks({ confId }) {
  // 1. Anda berada di server, Anda dapat berkomunikasi dengan lapisan data Anda. endpoint API tidak dibutuhkan.
  const talks = await db.Talks.findAll({ confId });

  // 2. Tambahkan beberapa logika rendering. Hal ini tidak akan membuat bundel JavaScript Anda lebih besar.
  const videos = talks.map(talk => talk.video);

  // 3. Kirimkan data ke komponen yang akan berjalan di peramban.
  return <SearchableVideoList videos={videos} />;
}

App Router Next.js juga mengintegrasikan pengambilan data dengan Suspense. Hal ini memungkinkan Anda untuk menentukan status pemuatan (seperti kerangka placeholder) untuk berbagai komponen dari tampilan antar muka Anda langsung dari pohon React Anda:

<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>

Server Components dan Suspense merupakan fitur dari React dan bukan fitur Next.js. Namun, menggunakannya pada tingkatan framework membutuhkan implementasi yang serius dan bukan hal yang mudah (non-trivial). Saat ini, App Router Next.js merupakan implementasi yang paling lengkap dari hal tersebut. Tim React saat ini sedang bekerja sama dengan pengembang bundler untuk membuat fitur ini dapat diimplementasikan pada framework generasi berikutnya.