Aplikasi SPA Dawn of Single Page
Model Single Page Application (SPA) semakin populer selama beberapa tahun terakhir. Bisa dimaklumi, pendekatan ini memberikan keuntungan tertentu dalam hal kecepatan, kualitas layanan dan menjadi dasar pola baru pengembangan web klien.
Seperti semua orang, saya pikir, sangat menyadari, SPA bekerja di dalam browser dan tidak memerlukan pemuatan ulang halaman selama penggunaan.
Ide yang hebat! Tapi, tentu saja, ada jebakan.
Di antara kasus yang paling umum (jika Anda mengikuti tutorial apa pun tentang react atau vue), halaman index.html utama berisi file HTML yang hampir kosong dengan sejumlah kecil tautan, global untuk keseluruhan proyek, CSS, JavaScript, font, dll.
Dan inilah masalahnya:
- Selama rendering awal, pengguna harus menunggu seluruh basis kode dan semua sumber daya dimuat (tentu saja, ada pengecualian, dan Anda dapat menerapkan pemuatan dinamis dari apa yang disebut potongan js / css, tapi itu cerita lain)
- Beberapa crawler atau parser yang tidak sabar menunggu pemuatan permintaan asinkron hanya akan melihat semua halaman kosong
Nah, Anda mengerti:
<!DOCTYPE html>
<html>
<head>
<title>My first SPA app</title>
<script src="https://cdn__"></script>
</head>
<body>
<div id="app"></div>
<script>
...
,
...
</script>
</body>
</html>
Sisi server merender SSR
Tidak seperti Client Side Rendering (CSR), yang menggunakan browser untuk merender semua konten aplikasi dan mengambil data dari API dan sejenisnya, SSR menggunakan ... server. Artinya, semua rendering dan pengambilan data yang sama diproses oleh server (NodeJS menggunakan Express, Next, Vue SSR, Nuxt atau apa pun ...), dan kemudian respons dengan markup HTML, gaya, skrip, dan data yang diterima dari API, dikirim ke browser.
Dengan demikian, Anda dapat memanfaatkan dua pendekatan: kecepatan / SEO dan interaktivitas / UX.
Jadi, apa itu hidrasi / rehidrasi?
Rehidrasi adalah semacam jembatan antara RSK dan CSR.
Ada indikator performa halaman web seperti First Contentful Paint (FCP) - diterjemahkan secara kasar, akan terdengar seperti 'rendering signifikan pertama' - saat browser mulai menampilkan teks, gambar (termasuk latar belakang). Ini adalah elemen pertama yang akan dilihat pengguna di halaman. Saat Anda membuat laporan dengan Lighthouse di Chrome, di bawah tab kinerja, Anda akan langsung melihat metrik ini.
Waktu yang dihabiskan untuk membuat konten di server akan menjadi waktu First Contentful Paint.
Segera setelah itu, JavaScript sisi klien mulai dieksekusi untuk membuat aplikasi klien yang lengkap (dalam banyak kasus, framework populer adalah virtual dom dan antarmuka yang mengikat untuk mengelolanya).
Pada titik ini, tidak perlu merender ulang seluruh DOM pada klien, tetapi perlu menambahkan peristiwa, metode, dan dalam beberapa kasus, elemen yang tidak dirender di server.
Proses inilah yang disebut hidrasi / re-hidrasi. Penjelasan yang sedikit lebih rinci dapat ditemukan di Vue SSR Guide (yang juga dalam bahasa Rusia), tetapi, dengan demikian, dengan beberapa fitur dari framework khusus ini.
Performa
Namun pada bagian ini muncul beberapa masalah. Rehidrasi memiliki kelemahan tertentu - ini adalah waktu sebelum interaksi atau Time to Interactive, yang dapat dilihat di Lighthouse Chrome yang sama, kita kenal. Meskipun Anda telah mengatur semuanya dengan sempurna di sisi server dan halaman memiliki render pertama yang cepat dari konten, pengguna hanya akan dapat berinteraksi dengannya setelah rehidrasi CSR, yang terkadang cukup lambat. Ini adalah kerugian besar dalam hal UX.
Indikator lain dari Max Potential First Input Delay adalah first input delay (FID) - salah satu metrik kinerja halaman web yang menggambarkan waktu yang telah berlalu sejak pengguna pertama kali mulai berinteraksi dengan halaman web, yaitu. e. mengklik link, tombol, atau menggunakan kontrol berbasis JavaScript hingga browser web dapat merespons interaksi (seperti yang didefinisikan oleh mozilla).
Dan waktu rehidrasi secara langsung mempengaruhi indikator ini. Dan semakin banyak komponen dan logika di halaman Anda, semakin cepat indikator ini meningkat.
Salah satu solusinya adalah beban malas untuk hidrasi.
Contoh penerapan pendekatan serupa di Vue SSR / NuxtJS adalah paket vue-lazy-hydration(dalam repositori npm), yang menerapkan hidrasi hanya di bagian yang terlihat dari viewport browser dan "menghidrasi" sisanya hanya jika halaman di-scroll. Rekomendasi untuk menggunakan paket ini juga ditemukan di habr di tutorial Kami membuat toko online di Nuxt.js , untuk itu penulisAntonMoskalchenkoSaya ingin mengucapkan terima kasih yang khusus. Dalam artikelnya, Lighthouse Chrome mencapai 100% Performance.