Dalam React, aplikasi isomorfik mengacu pada aplikasi yang berbagi kode lengkap atau sebagian antara klien dan server, dan juga dapat disebut aplikasi JavaScript universal; aplikasi isomorfik tidak memerlukan rendering konten di sisi browser, tetapi Mencapai keseimbangan antara sisi server dan rendering sisi browser, menghasilkan konten rendering di server, dan memungkinkan pengguna melihat halaman dengan informasi sedini mungkin.
Lingkungan operasi tutorial ini: Sistem Windows 10, reaksi versi 17.0.1, komputer Dell G3.
Aplikasi isomorfik, juga dikenal sebagai aplikasi JavaScript universal, mengacu pada aplikasi yang sepenuhnya (atau sebagian) berbagi kode antara klien dan server. Dengan menjalankan kode JavaScript aplikasi di sisi server, halaman dapat diisi terlebih dahulu dengan konten sebelum dikirim ke browser, sehingga pengguna dapat melihat konten sebelum JavaScript browser dijalankan. Saat JavaScript lokal berjalan, JavaScript akan mengambil alih operasi interaksi dan navigasi selanjutnya, memungkinkan pengguna mendapatkan pengalaman interaktif yang lancar dalam aplikasi satu halaman melalui pemuatan awal yang cepat dan rendering halaman sisi server.
Apa itu isomorfisme
Dengan munculnya Node.js secara tiba-tiba, pengembangan front-end dan back-end memiliki dasar bahasa pemrograman standar. Templat halaman, mekanisme ketergantungan pihak ketiga, dll. semuanya memiliki peluang untuk mewujudkan penyatuan front-end dan back -akhir. React adalah yang pertama memimpin tren ini, dan konsep isomorfisme telah menyebar lebih luas.
Yang perlu dipahami pembaca adalah bahwa aplikasi isomorfik tidak memerlukan rendering konten di sisi browser, melainkan mencapai keseimbangan antara rendering sisi server dan sisi browser. Jadi, bagaimana memahami keseimbangan ini?
Menghasilkan konten rendering di server sehingga pengguna dapat melihat halaman informatif sedini mungkin. Selain konten statis murni, aplikasi lengkap juga mencakup berbagai respons peristiwa, interaksi pengguna, dll. Ini berarti skrip JavaScript harus dijalankan di sisi browser untuk menyelesaikan pekerjaan seperti peristiwa yang mengikat dan menangani interaksi asinkron.
Dari perspektif kinerja dan pengalaman pengguna, rendering sisi server harus mengungkapkan informasi halaman yang paling penting, inti, dan dasar, sementara sisi browser perlu menyelesaikan rendering halaman lebih lanjut, pengikatan peristiwa, dan fungsi interaksi lainnya yang ditingkatkan; Yang disebut isomorfisme berarti bahwa ujung depan dan belakang berbagi kumpulan kode atau logika ini. Dalam kumpulan kode atau logika ini, situasi yang ideal adalah menilai struktur DOM yang ada dan struktur yang akan dirender selama proses rendering selanjutnya. sisi browser. Apakah sama? Jika demikian, struktur DOM tidak akan dirender ulang, hanya diperlukan pengikatan peristiwa.
Dari dimensi ini, isomorfisme berbeda dengan rendering sisi server. Isomorfisme lebih seperti perpotongan antara rendering sisi server dan rendering sisi browser kumpulan kode atau Logikanya dapat disatukan. Inti dari isomorfisme adalah "kumpulan kode yang sama", yaitu dimensi lain yang dipisahkan dari sudut di kedua ujungnya.
Keuntungan dan Kerugian Isomorfisme
Keuntungan isomorfisme adalah sebagai berikut:
Performa lebih baik. Kinerja di sini terutama mengacu pada rendering yang lebih cepat, waktu tampilan layar pertama yang lebih cepat, file yang lebih sedikit, dan ukuran file yang lebih kecil.
Dukungan optimasi SEO. Setelah menerima permintaan, server akan mengembalikan dokumen HTML yang relatif lengkap berisi konten awal, yang lebih kondusif bagi crawler mesin pencari untuk memperoleh informasi dan meningkatkan peringkat tampilan hasil pencarian. Pada saat yang sama, waktu pemuatan halaman yang lebih cepat juga akan membantu meningkatkan peringkat tampilan hasil pencarian.
Implementasinya lebih fleksibel. Render sisi server hanya menampilkan konten awal halaman, dan browser masih perlu melakukan pekerjaan lanjutan untuk menyelesaikan presentasi akhir halaman. Dengan cara ini, rendering sisi server dan rendering sisi browser masih dapat seimbang, dan penggunaan kembali kode dapat dicapai secara luas.
Lebih mudah dipelihara. Karena dengan bantuan perpustakaan seperti React, kita dapat mencapai penggunaan kembali kode secara luas, menghindari kebutuhan server dan browser untuk memelihara dua set kode atau logika pada saat yang bersamaan. Hasilnya, volume kode secara keseluruhan menjadi lebih kecil dan biaya pemeliharaan menjadi lebih rendah.
Lebih bersahabat dengan model kelas bawah. Karena rendering awal konten diselesaikan di sisi server, ini lebih ramah terhadap model kelas bawah dan tidak akan menyebabkan layar putih saat halaman dimuat.
Lebih ramah terhadap lingkungan jaringan yang keras. Dalam metode pemisahan front-end dan back-end tradisional, konten halaman hanya akan ditampilkan setelah semua skrip JavaScript diunduh dan dijalankan. Sejumlah besar permintaan jaringan telah dialami dalam proses tersebut tidak diragukan lagi meningkatkan kesulitan dalam merender konten dasar halaman. Dalam hal ini, aplikasi isomorfik jelas mempunyai kelebihan.
Pengalaman pengguna yang lebih baik. Untuk lebih menyeimbangkan konten rendering sisi server dan sisi browser, kami dapat merancang bagian inti halaman yang penting untuk diselesaikan di sisi server, sedangkan bagian interaktif yang kurang penting dapat dirender oleh browser atau setelahnya. konten yang lebih penting diberikan. Implementasi akan sangat meningkatkan pengalaman pengguna.
Kerugian dari isomorfisme adalah sebagai berikut:
Logika pemrosesan sisi server meningkat, meningkatkan kompleksitas.
Server tidak dapat sepenuhnya menggunakan kembali kode sisi browser.
Menambahkan waktu TTFB (Time To First Byte) di sisi server. Waktu TTFB mengacu pada waktu sejak browser memulai permintaan jaringan awal hingga byte pertama diterima dari server. Ini berisi waktu koneksi TCP, waktu untuk mengirim permintaan HTTP dan waktu untuk mendapatkan byte pertama dari pesan respons. Karena perolehan data dan rendering konten awal halaman pasti akan mengurangi kecepatan pengembalian server.
Perluas pengetahuan Anda:
Desain arsitektur front-end dan back-end serta konsep rendering sisi server
Konsep rendering sisi server atau drop-in menjadi semakin populer. Sebelum memahami cara mengimplementasikan rendering sisi server berdasarkan React, penting bagi kita untuk memiliki pemahaman menyeluruh tentang "masa lalu dan masa kini" rendering sisi server pada tingkat arsitektur: mengapa konsep seperti itu muncul, apa masalahnya? diselesaikan setelah konsep ini diterapkan; rendering sisi server dan Apa kelebihan dan kekurangan metode lain?
Evolusi teknologi kerjasama front-end dan back-end
Pada masa awal pengembangan Web, desain arsitekturnya sederhana dan langsung. Khususnya, halaman dibuat di sisi server oleh JSP, PHP, dan insinyur lainnya, dan browser hanya bertanggung jawab untuk menampilkannya. Pada saat itu, teknisi front-end hanya perlu menambahkan beberapa efek interaktif dinamis ke halaman statis, dan jarang melibatkan logika data, dll., sedangkan teknisi back-end bertanggung jawab atas konten halaman, yaitu saat pengguna meminta halaman tersebut, back-end memprosesnya dan mengembalikan halaman statis lengkap. Proses ini umumnya bergantung pada mesin template untuk diselesaikan. Jadi pada saat itu, bahkan belum ada posisi front-end engineer yang terpisah. Sekalipun ada, kelemahan dari pendekatan ini jelas terlihat, seperti pembagian tanggung jawab yang tidak jelas antara bagian depan dan belakang.
Jika personel front-end mengembangkan templat, front-end akan sangat bergantung pada lingkungan back-end, sehingga sulit untuk memaksimalkan efisiensi pengembangan. Pada saat yang sama, biaya komunikasi mengenai format data akan relatif tinggi. Selain itu, model arsitektur seperti ini memiliki ruang yang sangat terbatas untuk pengembangan teknologi front-end dan penggunaan kemampuan browser.
Dengan pesatnya perkembangan teknologi front-end, terutama munculnya teknologi seperti AJAX dan Node.js, telah muncul model arsitektur yang memisahkan front-end dan back end. Dalam mode ini, pembagian kerja antara ujung depan dan belakang menjadi sangat jelas, dan titik kolaborasi utama di kedua ujung adalah antarmuka AJAX. Mari kita ambil halaman akses pengguna sebagai contoh untuk memahami model ini langkah demi langkah, seperti yang ditunjukkan pada gambar di bawah.
