Written with AI assistance from the source video. The video is the authority.
Log in to leave a comment
No posts yet
Dengan rilis resmi Solid 2.0, paket meta-framework lama solid-start telah sepenuhnya dipensiunkan. Jika tim frontend Anda mengoperasikan aplikasi komersial berskala besar, Anda harus segera mencopot struktur dependensi tersebut. Hapus sepenuhnya solid-start dan adaptor platform dari proyek Anda, lalu ubah titik masuk server untuk mengekspor fungsi kontrak tunggal handleRequest(request: Request) berdasarkan Fetch API standar web. Hook onMount yang lama telah diintegrasikan ke dalam hook onSettled yang mengembalikan fungsi pembersihan pada saat pohon reaktivitas asinkron telah sepenuhnya diselesaikan.
Untuk melakukan migrasi dengan aman, Anda perlu mengisolasi dependensi paket dan mengganti titik masuk secara manual. Pertama, hapus solid-start dari package.json dan perbarui versi @solidjs/vite-plugin ke 2.0.0-rc.1 atau lebih tinggi. Kedua, buat file vite.config.ts untuk mengonfigurasi pengaturan plugins: [solid({ start: true, ssr: true, router: { type: 'filesystem', dir: 'src/routes' } })]. Ketiga, ubah penanganan render di file titik masuk server entry-server.tsx ke antarmuka standar web handleRequest(request: Request). Melalui proses ini, Anda dapat mengurangi tingkat kegagalan build awal hingga lebih dari 80 persen dan menyelesaikan masalah kompatibilitas toolchain.
Mesin reaktif Solid 2.0 telah meningkatkan tugas asinkron (Promise) menjadi nilai sinyal kelas satu dari grafik reaktif, serta sepenuhnya menghapus primitif pengambilan data lama createResource. Pengembang dapat mendeklarasikan createMemo biasa di dalam komponen dan langsung mengembalikan fungsi asinkron untuk menangani nilai yang diselesaikan tanpa logika pertahanan manual yang terpisah. Untuk mencegah fenomena Cumulative Layout Shift (CLS), ketika pencarian asinkron baru dipicu oleh perubahan props induk, batas <Loading> mempertahankan status UI sebelumnya dan mengatur transparansi dengan fungsi isPending(user).
Untuk merefaktor logika pengambilan data asinkron, Anda perlu menggabungkan struktur memo biasa dengan batas (boundary). Pertama, tulis createMemo(() => fetchUser(props.userId)) biasa yang berisi logika pengambilan data. Kedua, tempatkan batas <Errored> di bagian atas templat JSX untuk menangkap kesalahan jaringan 5xx atau Promise yang ditolak, serta menyediakan tombol pemulihan lokal. Ketiga, bungkus konten internal dengan <Loading fallback=""{<ProfileSkeleton"/>}> dan terapkan tata gaya kondisional class={{ 'opacity-50': isPending(user) }}. Melalui prosedur ini, Anda dapat memastikan integritas data dalam situasi latensi jaringan dan mencegah penurunan pengalaman pengguna.
Toolchain Solid 2.0 telah menyingkirkan transpile berbasis JavaScript dan Babel yang lama, serta mengadopsi integrasi mesin kompilator Oxc dan Rolldown berbasis Rust, yang menawarkan peningkatan kecepatan kompilasi dari 20 hingga maksimum 355 kali lipat. Namun, jika plugin warisan berbasis runtime Node.js V8 disertakan di tengah jalur pipa build, overhead serialisasi NAPI akan terjadi, yang meniadakan keunggulan performa kompilator Rust dan menyebabkan kesalahan penguraian (parsing). Oleh karena itu, menjalankan skrip otomatisasi untuk menyempurnakan plugin build warisan yang tidak kompatibel adalah hal yang wajib.
Untuk mengatasi konflik plugin warisan, Anda harus melalui prosedur pemeriksaan dan penyempurnaan. Pertama, buat file scripts/check-legacy-plugins.js di root proyek dan tentukan daftar plugin yang mengalami konflik seperti babel-plugin-transform-async-to-generator dan @babel/plugin-proposal-decorators. Kedua, gunakan modul sistem file untuk membaca isi vite.config.ts secara dinamis dan menjalankan fungsi diagnostik untuk memeriksa apakah string plugin yang tidak kompatibel disertakan. Ketiga, jalankan perintah node scripts/check-legacy-plugins.js di terminal untuk menyempurnakan masalah yang terdeteksi, dan bersihkan cache dengan perintah rm -rf node_modules/.vite .oxc_cache di lingkungan pengembangan lokal. Melalui proses ini, Anda dapat memblokir kesalahan build awal migrasi dan memulihkan kecepatan HMR server pengembangan.
Core Solid 2.0 dilengkapi secara default dengan aksi (actions) dan primitif store optimis untuk menyederhanakan pemrosesan mutasi status asinkron. Berbeda dari paradigma store lama, pembaruan optimis beroperasi sebagai mekanisme overlay reaktif yang melapisi perubahan sementara di atas data store latar belakang yang telah dikonfirmasi. Mengelola sekuens transaksi atau menserialisasikan permintaan di dalam aksi dapat memblokir kondisi balapan (race conditions) yang terjadi ketika beberapa komponen berlangganan ke store yang sama.
Untuk membangun transaksi optimis dan middleware rollback manual, Anda perlu mengubah struktur manajemen data. Pertama, panggil fungsi snapshot(store) untuk menangkap data point-in-time tepat sebelum permintaan asinkron. Kedua, manfaatkan callback setStore untuk segera mencatat status optimis ke objek draft agar tercermin secara proaktif pada UI. Ketiga, jika terjadi pengecualian saat menjalankan fungsi asinkron server, jalankan pernyataan setStore(() => previousSnapshot) di dalam blok catch untuk memulihkan secara paksa ke status sebelumnya. Melalui cara ini, Anda dapat mencapai manajemen status yang stabil tanpa kehilangan data formulir bahkan dalam situasi penundaan respons jaringan atau waktu habis (timeout).
Di lingkungan build Solid 2.0 dan Vite 8, artefak Rust dan cache build kompilator Oxc harus dikelola secara efisien untuk mempersingkat waktu build CI/CD dan mengurangi biaya pemeliharaan server. Untuk mencegah build terhenti karena kesalahan kekurangan memori di lingkungan CI selama pemrosesan paralel data kompilator Oxc, batas memori heap dan jumlah thread pekerja Rayon harus ditentukan secara eksplisit sebagai variabel lingkungan. Selain itu, pada runtime server SSR, Anda harus melacak apakah konteks pohon reaktivitas asinkron yang dialokasikan untuk setiap permintaan HTTP dilepaskan secara normal.
Untuk menerapkan optimisasi jalur pipa dan pemantauan memori, Anda perlu mengubah file konfigurasi. Pertama, konfigurasikan aksi cache di dalam file YAML alur kerja GitHub Actions yang menyertakan jalur path: ~/.cargo/registry, path: .oxc_cache, dan path: node_modules/.vite. Kedua, deklarasikan NODE_OPTIONS="--max-old-space-size=8192", RAYON_NUM_THREADS="4", dan UV_THREADPOOL_SIZE="8" pada variabel lingkungan eksekusi perintah build untuk memperluas memori heap ke 8GB dan melepaskan hambatan thread. Ketiga, tulis fungsi pembungkus pemantauan berbasis process.memoryUsage().heapUsed di titik masuk server untuk mengatur pencetakan log peringatan jika peningkatan memori melebihi 10MB. Setelah menyelesaikan prosedur ini, Anda dapat mempersingkat waktu yang diperlukan untuk build di lingkungan produksi dan mencegah kebocoran memori runtime secara stabil.
