Kami menerbitkan terjemahan baru untuk calon pengembang React. Kami harap artikel ini akan membantu Anda dalam memilih alat yang tepat untuk proyek Anda selanjutnya.
Ketika datang untuk membuat proyek baru di React, kami memiliki pilihan yang jelas: NextJS atau Create-React-App. Gatsby sebagian besar tidak digunakan karena build yang lambat saat penskalaan. Selain itu, NextJS menjadi generator situs statis yang semakin nyaman.
Foto oleh Artyom Sapegin di Unsplash
Pada artikel ini, kita akan melihat kelebihan dan kekurangan NextJS dan Create-React-App, serta membahas kasus penggunaan mana yang cocok untuk masing-masing.
Buat-React-App
Create-React-App adalah seperangkat alat yang memungkinkan Anda membuat aplikasi React baru. CRA menyimpan dependensi seperti webpack dan babel di dalam skrip react. Create-React-App memudahkan untuk bekerja dengan transpiler dan bundler.
Ini berarti bahwa memperbarui dependensi "tersembunyi" ini tidak sulit sama sekali. Anda perlu menunggu rilis baru dari skrip react dan pembaruan. Kami tidak perlu dipusingkan dengan memperbaiki perubahan konfigurasi webpack yang melanggar.
Manfaat menggunakan Create-React-App
Unopinionated
Pustaka apa pun dapat digunakan, tidak ada aturan atau pedoman. Pilihan pustaka untuk perutean juga sesuai kebijaksanaan Anda.
Create-React-Apps di-render di sisi klien
Karena kami merender Create-React-Apps di sisi klien, penerapannya mudah. Kami dapat menghosting aplikasi di hosting file apa pun, misalnya, di S3. Aplikasi CSR jauh lebih mudah untuk digunakan!
Kekurangan dari Create-React-App
Sulit untuk menyesuaikan
Tidak ada cara bawaan untuk menyesuaikan aplikasi. Jika Anda perlu mengubah konfigurasi webpack Anda, satu-satunya pilihan Anda adalah menggunakan alat pihak ketiga seperti craco atau eject. Namun, setelah menjalankan perintah keluarkan, Anda akan kehilangan hampir semua manfaat menggunakan Create-React-App.
Ini mengabstraksi kompleksitas
Create-React-App bekerja dengan baik sampai Anda harus melakukan sesuatu yang tidak didukungnya. Ini akan sulit! Dengan menyembunyikan konfigurasi babel dan webpack, Create-React-App mempermudah memulai. Namun, ini mencegah pengembang mempelajari lebih lanjut tentang cara kerja alat vital ini.
Secara negatif mempengaruhi SEO
Karena kita merender sisi klien Create-React-Apps, alat ini rumit untuk menerapkan SEO. Create-React-Apps tidak boleh digunakan untuk tujuan e-commerce atau pemasaran.
NextJS
Tidak sepenuhnya benar untuk membandingkan NextJS dan Create-React-App, karena NextJS jauh lebih banyak. Meskipun CRA adalah alat untuk perancah aplikasi React, NextJS adalah kerangka kerja untuk membangunnya. Di luar kotak, NextJS menyediakan rendering sisi server, pembuatan situs statis, fungsionalitas tanpa server, dan banyak lagi. Ini adalah seperangkat alat yang memberi kita semua yang kita butuhkan untuk membuat aplikasi web yang efektif.
Ingin melangkah lebih jauh dengan NextJS? Coba HappyKit .
HappyKit menyediakan aplikasi NextJS dengan tugas berulang (tugas CRON), analitik yang sangat sederhana, dan tanda fitur. Anda dapat mendaftar untuk beta di sini !
Manfaat menggunakan NextJS
NextJS secepat kilat!
Berkat rendering sisi server dan pembuatan situs statis, aplikasi NextJS berjalan jauh lebih cepat. Selanjutnya menangani pengoptimalan kinerja default.
Easy Deployment
Vercel (perusahaan di belakang NextJS) memudahkan penerapan aplikasi React full-stack . Beberapa klik mouse dan Anda memiliki pipeline penerapan profesional. Prosesnya mencakup pra-penerapan dan penerapan produksi.
NextJS menyediakan perutean
NextJS menyediakan cara cepat dan mudah untuk membuat API dalam aplikasi. Jika aplikasi Anda menggunakan API pihak ketiga, Anda sering kali membutuhkan API Anda sendiri untuk permintaan proxy dan penyimpanan token. Perutean NextJS sangat cocok untuk ini.
Mudah untuk menyesuaikan
NextJS memungkinkan Anda menyesuaikan konfigurasi babel atau webpack Anda. Menambahkan pemuat webpack atau plugin babel itu mudah!
Kerugian menggunakan NextJS
NextJS adalah kerangka kerja beropini
Hanya ada satu cara untuk bekerja dengan rute di NextJS, dan Anda tidak dapat menyesuaikannya. NextJS terbatas pada rute berbasis file dan rute dinamis hanya mungkin saat menggunakan server NodeJS.
Kapan Anda Harus Menggunakan NextJS?
Saat membuat halaman arahan,
NextJS sangat bagus untuk membuat halaman arahan dan menerapkan tugas pemasaran lainnya.
Saat SEO Penting
Saat membangun situs e-commerce, pengoptimalan mesin telusur menjadi lebih penting dari sebelumnya. Berkat rendering sisi server, NextJS juga menonjol dalam hal ini.
Saat membuat situs web,
perenderan sisi server aplikasi menghilangkan kebutuhan klien untuk merender di perangkat mereka. Untuk pengguna perangkat yang lebih lambat, ini dapat menghasilkan waktu boot yang lebih cepat.
Kapan Anda harus menggunakan Create-React-App?
Saat membuat aplikasi yang terjaga keamanannya
Jika aplikasi Anda hanya dapat diakses oleh pengguna yang diautentikasi, sebagian besar manfaat rendering sisi server akan hilang. Dalam hal ini, aplikasi CSR berfungsi dengan baik, lebih mudah dan lebih murah untuk dihosting.
Saat membuat aplikasi web, aplikasi
web umumnya kurang mendapat manfaat dari rendering sisi server. Biasanya, aplikasi ini digunakan kembali oleh pengguna, dan kami dapat menerapkan caching untuk menyediakan pemuatan secepat kilat tanpa biaya dan kerumitan SSR.
Kami harap artikel ini membantu Anda memutuskan apakah NextJS dan Create-React-App tepat untuk proyek Anda berikutnya. Kedua alat ini sangat keren untuk membuat aplikasi React. Anda tidak akan dapat memilih pemenang: untuk beberapa kasus lebih baik menggunakan NextJS, dan untuk yang lain - Buat-React-App.