Apa itu Create React App?
Create React App (CRA) adalah cara membuat React App standar yang disarankan oleh React. Awalnya, saya juga menggunakan CRA untuk melakukan web development.
Apa itu Next.js?
Next.js adalah sebuah framework yang dibuat di atas React, sehingga tetap mendapatkan segala macam fitur yang dimiliki React, serta ditambah banyak fitur yang Next.js bawa. Awalnya, Next.js lebih dikenal sebagai framework yang menggunakan Server Side Rendering. Tetapi, sekarang Next.js memiliki support untuk melakukan Static Site Generation. Next.js juga bisa menggunakan Client Side Rendering seperti CRA.
Kelebihan Create React App
1. Lebih Mudah Di-deploy
CRA adalah website yang tidak membutuhkan node server dan hanya static saja, data fetching yang dilakukan biasanya menggunakan fetch API atau axios.
2. Lebih Familiar
CRA adalah pilihan pertama kali dalam mempelajari React, karena CRA memang simple dan cukup mudah untuk dimengerti jika sudah bisa memahami konsep seperti React Components
Kelebihan Next.js
1. Performance yang Baik
Dengan menggunakan Static Side Generation(SSG), tentunya akan membuat website kita terasa lebih cepat karena data yang diberikan kepada pengguna website berupa static HTML files, berbeda dengan CRA yang memberikan HTML kosong, kemudian baru menarik data" sesaat pengguna website membuka websitenya.
Selain itu, dalam performance development, menggunakan Next.js akan jauh lebih cepat karena kita tidak perlu melakukan konfigurasi untuk React Router, semuanya sudah built-in dan kita hanya perlu lin mengikuti folder structure yang diberikan saja.
2. Built In API
Next.js juga memiliki fitur built-in api yaitu dalam aplikasi yang sama, memiliki fitur untuk membuat api mirip seperti express server pada Node.js. Hal ini sangat membantu karena kita bisa langsung mengakses database (biasanya berupa serverless database) / api tanpa perlu membuat proxy, karena data dan route yang kita gunakan untuk mengambil data tidak akan dibagikan kepada user.
3. Keuntungan SEO
SEO atau Search Engine Optimization adalah proses dalam mengoptimisasi website sehingga lebih mudah untuk dicari di searching platform seperti Google.
Dengan menggunakan Next.js, initial data yang dikirimkan adalah berupa Full HTML yang kemudian akan di hydrate dengan fungsionalitas JavaScript sehingga website menjadi interaktif. Perbandingan dibawah ini akan menunjukkan perbedaan page source dari aplikasi CRA dan Next.js.
Hasil Page Source Create React App
Hasil Page Source Next.js
Bisa kita lihat, Page Source dari Next.js lebih banyak karena berisi teks" dari website yang kita miliki, sedangkan Page Source dari Create React App hanya mengembalikan
<div id='root'></div>Kekurangan Create React App
1. Hanya Bisa Client Side Rendering
CRA hanya bisa melakukan satu tipe rendering yaitu Client Side Rendering, kita kehilangan beberapa fleksibilitas dari Next.js jika menggunakan CRA.
2. Harus Setup React Router
Dengan menggunakan CRA, kita harus setup React Router secara manual sehingga routing bisa bekerja. Hal ini akan sangat repetitif karena harus dilakukan berkali-kali.
3. SEO yang buruk
Sama seperti yang sebelumnya sudah disampaikan di keuntungan menggunakan Next.js, CRA hanya mengembalikan div kosong lalu baru melakukan request
Kekurangan Next.js
1. Opinionated
Framework ini 'work on its own way', maka ada beberapa convention yang harus kita ikuti seperi folder structure, penggunaan api dan lainnya.
2. Komunitas yang tidak terlalu besar
Next.js adalah framework yang masih baru dan penggunanya belum terlalu banyak, sehingga kadang sedikit sulit untuk mencari tutorial yang menjelaskan Next.js secara mendalam
Pilih Create React App atau Next.js?
jawaban ini berdasarkan opini saya
Untuk project" yang menggunakan authentication, dan tidak ada konten yang bisa dilihat jika tidak melakukan login (seperti project Voting Page) saya akan menggunakan CRA, karena tidak dibutuhkan SEO, dan untuk kemudahan dalam mendeploy, biasanya aplikasi yang cukup kompleks dan menggunakan authentication juga akan memiliki API yang sudah dibuat terlebih dahulu, sehingga akses database atau public API tidak dibutuhkan.
Tetapi, untuk project yang selain di atas, saya akan selalu menggunakan Next.js. Next.js memiliki sangat banyak fitur walaupun memang, Next.js adalah framework yang opinionated.
