Beyond Next.js: Meneroka Rangka Kerja Komponen Pelayan Reaksi Alternatif

Apakah perjanjian semasa dengan Komponen Pelayan Bertindak balas (RSC)?

Apabila pada penghujung tahun 2020 pasukan React memperkenalkan konsep "Komponen Pelayan Tindak Balas Saiz Sifar Bundle", ramai orang telah dan masih bergelut untuk memahaminya. Tiada rangka kerja sedia ada menyokong konsep baharu dan prototaip tidak menyediakan asas yang boleh digunakan untuk membina aplikasi dunia sebenar.

Kini, lebih 4 tahun kemudian, versi react yang diperlukan masih dalam versi beta dan tidak dikeluarkan untuk pengeluaran dan satu-satunya rangka kerja besar dan terkenal yang menyokongnya dikendalikan oleh bekas ahli pasukan. Ini adalah situasi yang sangat menyedihkan bagi beberapa pembangun yang telah cuba menawarkan rangka kerja alternatif berdasarkan RSC.

Mengapa saya memerlukan RSC?

React biasa ialah perpustakaan yang hanya menumpukan pada penyediaan penyelesaian deklaratif pantas untuk membina aplikasi dalam penyemak imbas. Aplikasi dalam penyemak imbas sentiasa memerlukan pelayan untuk mengambil dan menyimpan keadaannya. Berdasarkan fakta ini, sejumlah besar penyelesaian telah dibangunkan dan wujud dalam sistem eko ​​pelanggan tindak balas. Apabila semakin ramai orang mula membuat bahagian belakang mereka dengan Typescript, arah aliran seterusnya di mana kebangkitan RPC dengan antara muka ditaip yang mencipta titik akhir api di latar belakang.

Melihat RSC dengan keperluan ini, ia menjadi jelas dengan cepat bahawa semua ini berada dalam skop untuk RSC kerana ia menyediakan:

• tindakan pelayan ditaip yang boleh mengembalikan nilai dan janji yang ditaip
• permintaan pelayan tunggal untuk mengubah data pada pelayan dan mengemas kini UI sisi klien
• memaparkan komponen pada pelayan dan hanya menstrim pepohon pemaparan bersiri kepada pelanggan yang menyokong penyajian tertib

Ini membolehkan pembangun aplikasi menggunakan tindak balas untuk mentakrifkan semua komponen menggunakan tindak balas bebas daripadanya yang dipaparkan pada klien atau pada pelayan. Persekitaran bersepadu ini mengurangkan kerumitan apl moden dan menghapuskan lebihan logik perniagaan pendua di bahagian belakang dan bahagian hadapan.

Apakah rangka kerja yang menyokong RSC?

Memandangkan pustaka react adalah rasmi masih beta, tiada satu pun daripada mereka harus dilihat sebagai pengeluaran sedia:

• Next.js v15
• Waku
• pelayan tindak balas
• RedwoodJS v9 - masih dalam Pembangunan

Pada masa ini hanya Next.js agak boleh digunakan untuk pengeluaran. Versi 15 mereka ialah lelaran ke-4 pada RSC yang bermula lewat 2021 dengan Versi 12.

Di luar rangka kerja yang disenaraikan, berikut adalah beberapa lagi repositori dengan cetak biru untuk membina rangka kerja RSC - gunakan rangka kerja tersebut jika anda ingin mengetahui lebih lanjut tentang dalaman:

• Vinxi
• Dua kali ganda
• Kotekan
• r19

Jika anda tahu daripada lebih banyak rangka kerja, sila berikan pautan kepada mereka dalam ulasan.

Apakah yang membuatkan RSC sukar dilaksanakan dalam rangka kerja?

Mentranskripsi dan menghimpun, berdasarkan himpunan hebat sedia ada apl klien reaksi adalah mudah. Terdapat pelbagai pilihan untuk melakukan ini dan salah satu yang paling banyak digunakan ialah dengan menggunakan ViteJs sebagai pelayan pembangunan dan pengikat. Rangka kerja yang menyediakan timbunan bahagian hadapan dan hujung belakang JavaScript masih perlu menyediakan penyelesaian mereka sendiri untuk mengendalikan skrip taip dan penggabungan dalam pembangunan dan untuk pengeluaran.

Dengan RSC, pengikat perlu mengendalikan sekurang-kurangnya tiga saluran paip transkripsi dan berkas:

1. Pelanggan Penyemak Imbas
2. Pelayan SSR
3. Penyaji Komponen RSC dan api pensterilan
4. perisian tengah pilihan

Sehingga keluaran Vite versi 6 ini memerlukan banyak kod khas untuk menyediakan penyelesaian yang berkesan. Next.js hanya bertukar kepada Turbopack dalam versi 15 untuk membetulkan ketinggalan yang mereka perolehi berdasarkan kerumitan dan penggunaan webpack yang tidak pernah dibina untuk menangani masalah seperti ini.
Ciri baharu Vite 6 ialah banyak pengarang rangka kerja penyasaran dan menyediakan penyelesaian hebat dengan api persekitaran baharu mereka.

Berdasarkan fakta bahawa kini komponen dipaparkan dalam persekitaran yang sama sekali berbeza, setiap perpustakaan tindak balas perlu dibina untuk mengendalikan sekatan setiap persekitaran ini dengan menyediakan kandungan alternatif. Pada masa ini kebanyakan pustaka boleh mengendalikan pemaparan pada pelayan untuk mencipta kandungan SSR, di mana banyak API khusus pelayar tiada. Memaparkan komponen RSC membawa had tambahan dengan perpustakaan pelayan tindak balas yang berbeza yang contohnya tidak menyokong konteks tindak balas dan menyatakan dan memecahkan perpustakaan yang memerlukan ini untuk menyediakan tema kepada semua komponen kanak-kanak. Dan perpustakaan memerlukan pilihan eksport yang betul dalam packages.json dan ESM-Modules untuk perpustakaan dan semua sub perpustakaan yang berkaitan.

Bahagian kedua yang tidak disediakan oleh perpustakaan reaksi untuk RSC ialah penghala. Tanpa penghala yang mengendalikan penghalaan klien dan pelayan, komponen pelayan bertindak balas tidak tahu keadaan mana yang hendak diberikan pada pelayan. Inilah sebab mengapa setiap rangka kerja datang dengan pelaksanaan penghala mereka sendiri dan sehingga api untuk ini menjadi piawai, komponen pelayan dan pelanggan yang dibangunkan untuk satu rangka kerja perlu ditukar untuk berfungsi dengan rangka kerja lain.

Semua keperluan untuk rangka kerja RSC sebenar

• Komponen Pelayan Bertindak Balas
  • Komponen Pelayan tanpa Pelayan
  • Komponen Pelayan dengan Pelayan
  • Komponen Async dengan Komponen Pelayan
• Tindakan Pelayan
  • Mencipta Tindakan Pelayan daripada Komponen Pelayan
  • Mengimport Tindakan Pelayan daripada Komponen Pelanggan
  • Mengarang Tindakan Pelayan dengan Tindakan
  • Bentuk Tindakan dengan Tindakan Pelayan
  • Tindakan Pelayan dengan useActionState
  • Peningkatan progresif dengan useActionState
  • Permintaan Tunggal kepada Pelayan dengan data yang dikemas kini untuk UI dalam respons
• Arahan
  • 'gunakan klien' membolehkan anda menandakan kod yang dijalankan pada klien.
  • 'use server' menandakan fungsi bahagian pelayan yang boleh dipanggil daripada kod sisi klien.
• himpunan untuk ketiga-tiga sasaran dalam DEV dan PROD
• api penghalaan sisi pelanggan
• api penghalaan sisi pelayan

butiran lanjut tentang Komponen Pelayan React boleh didapati dalam dokumentasi React rasmi.

Keperluan Pilihan untuk rangka kerja meta:

• Rendering Bahagian Pelayan (SSR)
• Penjanaan Tapak Statik (SSG)
• Reka Letak Bersarang
• Penstriman
• Penghala sistem fail
• titik akhir API tiada-React
• Perisian Tengah
• Sasaran penggunaan berbilang
• Sokongan untuk Edge-Runtimes (AWS Lambda@Edge, Cloudflare)

Next.js - mengapa mencari pilihan alternatif?

Berdasarkan fakta, Next.js 15 ialah rangka kerja RSC yang paling utama, kenapa saya perlu melihat rangka kerja alternatif?

Sebab untuk melakukan ini sentiasa berdasarkan matlamat untuk dicapai, tetapi saya akan cuba menyenaraikan beberapa sebab mengapa ia masuk akal untuk melihat pilihan lain:

1. Next.js ialah rangka kerja kompleks yang cuba merangkumi banyak kes penggunaan berbeza yang mungkin tidak berkaitan untuk projek yang diberikan
2. berdasarkan kerumitan dan penggunaan semua ciri yang disediakan, penggunaan ke persekitaran awan lain di sebelah Vercel tidak disokong secara rasmi dan memerlukan beberapa usaha besar untuk terus selaras dengan perubahan yang berlaku pada keperluan pengehosan ini dengan setiap versi kecil dan utama.
3. sehingga Versi 15, yang menukar pengikat kepada Turbopack, pengalaman pembangunan adalah perlahan dan lembap

Sila ingat bahawa artikel ini hanya menumpukan pada alternatif yang menyediakan RSC, tetapi terdapat banyak lagi rangka kerja yang menyediakan ciri yang hampir serupa dengan RSC dan boleh menjadi alternatif yang jauh lebih baik daripada rangka kerja RSC yang disenaraikan dalam artikel ini.

Waku - Rangka Kerja Reaksi yang minimum

Dibangunkan oleh Daishi Kato:

Waku (wah-ku) atau わく bermaksud “rangka kerja” dalam bahasa Jepun. Sebagai rangka kerja React yang minimum, ia direka untuk mempercepatkan kerja pembangun di syarikat permulaan dan agensi yang membina projek React bersaiz kecil hingga sederhana. Ini termasuk tapak web pemasaran, e-dagang ringan dan aplikasi web.

Kami mengesyorkan rangka kerja lain untuk aplikasi e-dagang atau perusahaan yang berat. Waku ialah alternatif ringan yang membawa pengalaman pembangun yang menyeronokkan ke era komponen pelayan. Ya, mari jadikan pembangunan React menyeronokkan semula!

Memulakan projek baharu dengan Waku adalah mudah dan anda akan mendapat templat permulaan yang disediakan dengan tailwind:
npm create waku@latest

Semua keperluan asas dilindungi kecuali mengembalikan kemas kini kepada komponen sisi klien dalam satu permintaan apabila menggunakan tindakan pelayan yang bermutasi. Pada masa ini, sebarang mutasi pelayan memerlukan penyegaran semula penghala klien dengan router.reload() dalam komponen klien yang membawa kepada permintaan kedua kepada pelayan untuk memuatkan data yang dikemas kini sebagai strim RSC.

Keperluan pilihan berikut masih dalam pembangunan:

• Laluan Sistem Fail Bersarang
• titik akhir API tiada-React

Menyokong banyak sasaran penggunaan: Vercel, Netlify, Cloudflare, PartyKit, Deno, AWS Lambda, NodeJS

Berdasarkan kerumitan penggabungan, bersedialah untuk menghadapi masalah dengan banyak perpustakaan pihak ketiga:
https://github.com/dai-shi/waku/issues/423

@lazarv/react-server - Cara paling mudah untuk membina apl React dengan pemaparan sebelah pelayan

Dibangunkan oleh Viktor Lázár:

Saya mencipta @lazarv/react-server kerana saya ingin menggunakan Komponen Pelayan React dan Tindakan Pelayan menggunakan Vite ❤️. Untuk kebanyakan apl kecil Next.js adalah terlalu banyak, terlalu berat dan perlahan. Saya ingin mempunyai pengalaman yang sama seperti anda menjalankan fail JavaScript mudah menggunakan node.js. Rangka kerja ini cuba untuk tidak mempunyai pendapat sebanyak mungkin. Anda boleh mencapai apa sahaja yang anda mahukan. Satu-satunya sekatan ialah ia akan menggunakan versi Reactnya sendiri. Anda tidak perlu memasang React dalam projek anda. Semuanya termasuk dalam rangka kerja. Saya harap anda akan seronok menggunakan rangka kerja ini sama seperti saya gemar menciptanya dan menggunakannya untuk membuat dokumentasi ini juga. - lazav

Mempelajari komponen pelayan tindak balas adalah mudah dengan rangka kerja ini! Satu fail dengan komponen pelayan tindak balas yang sah dan menjalankan arahan adalah semua yang anda perlukan:

./App.jsx

export default function App() {
  return <h1>Hello, World!</h1>
}

npx @lazarv/react-server ./App.jsx

Terdapat dokumentasi yang baik tentang cara untuk memulakan dan beberapa contoh projek dalam bahagian tutorial.

Semua keperluan asas dilindungi kecuali mengembalikan kemas kini kepada komponen sisi klien dalam satu permintaan apabila menggunakan tindakan pelayan yang bermutasi.

Memandangkan masa jalan bergantung pada API NodeJS, masa jalan lain cth. (AWS Lambda@Edge, Cloudflare) pada masa ini tidak disokong.

Selain itu ciri berikut wujud:

• Akses konteks HTTP dalam komponen dan tindakan pelayan
• Menyimpan sebarang data pelayan dan respons pelayan dengan pengesahan semula berdasarkan teg ord utama
• Ralat pengendalian
• Prapemarahan separa - tentukan bahagian halaman JSX sebagai cangkerang statik
• Mod Kluster NodeJS
• Micro-frontend - bahagikan aplikasi anda kepada bahagian yang lebih kecil dan lebih mudah diurus. Gunakan komponen RemoteComponent untuk memuatkan bahagian hadapan mikro daripada URL jauh dan memaparkannya dalam aplikasi anda menggunakan pemaparan sebelah pelayan

Sasaran penggunaan: NodeJS, Vercel - Penyesuai dalam Pembangunan: Netlify, Cloudflare, sst

Menyokong di luar kotak Tailwind CSS, TanStack Query, Mantine UI, Material UI.

RedwoodJS - Rangka Kerja Pembangun Tunggal yang Hanya Berfungsi

Disediakan oleh Tom Preston-Werner:

Redwood ialah rangka kerja aplikasi JavaScript tindanan penuh.
Bateri, bahagian belakang, React, konvensyen dan pendapat disertakan.

Masih dalam pembangunan dan hanya berfungsi dengan Node v20 dan Benang 4:

export default function App() {
  return <h1>Hello, World!</h1>
}

Anda kemudiannya perlu mendayakan beberapa ciri percubaan:

npx @lazarv/react-server ./App.jsx

Akhir sekali, bina dan hidangkan:

npx -y create-redwood-app@canary -y ~/rsc_app
cd ~/rsc_app

Sebagai sebahagian daripada arahan setup-rsc, apl RSC barebones dicipta untuk anda, menunjukkan pemaparan komponen klien di dalam komponen pelayan

Sasaran penggunaan: Vercel, Netlify, Render, GCP atau AWS melalui Coherence, AWS melalui Flightcontrol, NodeJS

Perbandingan: Next.js lwn. Alternatif

Kesimpulan

Rekap Ambilan Utama:

• RSC menyediakan paradigma yang kuat untuk pembangunan web moden.
• Next.js sangat baik tetapi bukan satu-satunya pilihan.
• Alternatif menawarkan pelbagai keupayaan untuk keperluan yang berbeza tetapi terlepas satu permintaan mutasi kemas kini UI.
• Perpustakaan dalam Ekosistem React masih belum bersedia untuk menerima RSC

Cuba rangka kerja untuk mencari yang paling sesuai untuk projek anda.

Atas ialah kandungan terperinci Beyond Next.js: Meneroka Rangka Kerja Komponen Pelayan Reaksi Alternatif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!