Rendering Sisi Server dengan React

Diterbitkan: 2021-05-27

Sedikit Tentang React

React adalah pustaka JavaScript frontend open source, yang dibuat dan dikelola oleh Komunitas Pengembang Facebook. Ini digunakan untuk membangun Antarmuka Pengguna atau Komponen UI.

Namun, definisi ini mungkin tidak sepenuhnya dapat dipahami oleh pemula. Kami memiliki posting blog yang sempurna yang memandu Anda melalui penjelasan singkat tentang React, hingga deskripsi teknis yang sangat rinci, yang dapat Anda temukan di sini.

Perjalanan Halaman Web | Dari Server ke Browser Anda

Untuk memahami apa itu Server Side Rendering, pertama-tama penting untuk mendapatkan gambaran umum tentang bagaimana halaman web muncul di layar Anda, yang dijelaskan oleh diagram di bawah ini:

ssr-dengan-bereaksi-halaman web-server-ke-browser
  1. Setiap kali Anda mengetik URL situs web atau mengklik tautan ke situs web, browser Anda mengirimkan permintaan untuk beberapa file ke server yang sesuai, yang diidentifikasi oleh URL.
  2. Server mengirimkan beberapa file seperti file HTML dan JavaScript antara lain, ke browser Anda.
  3. Browser Anda mengunduh dan 'merender' atau memproses file-file ini dan Anda dapat melihat dan berinteraksi dengan halaman web yang Anda minta.

Ini adalah penyederhanaan yang sangat besar dari perjalanan halaman web, tetapi merupakan kata pengantar yang cukup baik untuk menjelaskan berbagai sub-langkah dan berbagai cara (termasuk Rendering Sisi Server) untuk menyelesaikan tugas ini.

Perjalanan Halaman Web Rendering Sisi Klien 'Normal'

Menyelami lebih dalam proses yang disebutkan di bagian sebelumnya, kami memiliki teknik yang dikenal sebagai Rendering Sisi Klien atau CSR, yang telah digunakan sejak lama, untuk menampilkan situs web di layar pengguna. Hal ini dijelaskan dalam diagram berikut:

ssr-with-react-csr-webpage-rendering
  1. Saat mengetik URL situs web atau mengklik tautan ke situs web, browser Anda mengirimkan permintaan untuk beberapa file ke server yang sesuai, yang diidentifikasi oleh URL.
  2. Server mengirimkan file HTML yang berisi referensi ke aset lain seperti file gambar, file CSS, dan file JavaScript.
  3. Browser mengirimkan permintaan lagi ke server dan mengunduh semua file, termasuk file CSS dan JavaScript yang dirujuk dalam file HTML.
    1. Ini dapat menjadi faktor yang berkontribusi dalam meningkatkan waktu pemuatan situs web jika pengguna memiliki koneksi yang buruk dan file JavaScript berukuran besar.
  4. Setelah file-file ini diunduh oleh browser, browser kemudian mengeksekusi framework atau library (misalnya React) dan mem-parsing file JavaScript, yang bertanggung jawab untuk membuat halaman web menjadi interaktif.
    1. Dari perspektif pengoptimalan kecepatan, titik ini bergantung pada mesin klien dan jika klien adalah perangkat keras berdaya rendah, ini dapat memakan waktu yang signifikan.
    2. Pengguna masih melihat layar pemuatan saat langkah-langkah ini sedang berlangsung
  5. Halaman web akhirnya dimuat sepenuhnya dan pengguna dapat melihat dan berinteraksi dengan halaman web.

Seperti yang jelas dengan langkah-langkah yang disebutkan di atas, dari sudut pandang pengguna, mereka hanya dapat melihat dan berinteraksi dengan situs web pada langkah terakhir, setelah semua file yang diperlukan telah diunduh dan dirender oleh mesin klien.

Ini bisa memakan banyak waktu karena bergantung pada kinerja mesin klien dalam menjalankan kerangka kerja dan menguraikan file JavaScript.

Perjalanan Halaman Web Rendering Sisi Server

Menjelaskannya dalam satu baris, Server Side Rendering atau SSR adalah proses mengambil situs web kerangka JavaScript sisi klien dan merendernya ke HTML dan CSS statis di server alih-alih klien, seperti yang terjadi di CSR.

Disebutkan di bawah ini adalah representasi bergambar dari perjalanan yang dilakukan halaman web dengan Server Side Rendering, dengan React:

ssr-dengan-bereaksi-ssr-halaman web-rendering-dengan-reaksi
  1. Saat mengetik URL situs web atau mengklik tautan ke situs web, browser Anda mengirimkan permintaan untuk beberapa file ke server yang sesuai, yang diidentifikasi oleh URL.
  2. Server, alih-alih hanya mengirim file HTML vanilla seperti di CSR, membuat aplikasi menjadi string menggunakan fungsi renderToString yang diimpor dari react-dom/server
    1. Ini kemudian disuntikkan ke file index.html dan dikirim ke browser.
    2. Di sinilah letak inti SSR, secara fungsional, karena di sinilah server merender halaman, dan bukan mesin klien.
  3. Browser merender file HTML ini sehingga tampilan diisi di browser.
    1. Namun, ini belum interaktif, tetapi pengguna dapat melihat tampilan akhir halaman web.
  4. Browser mengirimkan permintaan lagi ke server dan mengunduh semua file yang dirujuk dalam file HTML, termasuk file JavaScript.
  5. Setelah semua skrip diunduh, komponen React kembali dirender pada klien. Namun, kali ini, itu menghidrasi tampilan yang ada alih-alih menimpanya.
    1. 'Menghidrasi' tampilan berarti bahwa ia melampirkan setiap event handler ke elemen DOM (Document Object Model) yang dirender tetapi menjaga elemen DOM yang dirender tetap utuh. Dengan cara ini, status elemen DOM dipertahankan dan tidak ada pengaturan ulang tampilan yang terjadi.
  6. Halaman web akhirnya dimuat sepenuhnya dan pengguna sekarang dapat berinteraksi dengan halaman yang dapat mereka lihat dari langkah 3 itu sendiri.

Jadi, salah satu perubahan visual terbesar dari sudut pandang pengguna adalah bahwa halaman web menjadi 'terlihat' cukup cepat, karena rendering HTML bukanlah sumber daya yang intensif, berbicara dari perspektif browser.

Ini tidak secara inheren membuat halaman dimuat lebih cepat daripada aplikasi non SSR, tetapi itu memberi pengguna tampilan halaman web saat file JavaScript diunduh dan diurai di latar belakang, setelah itu halaman web menjadi interaktif. Ini berarti TTI, yaitu Time To Interactive (ini adalah waktu yang dibutuhkan halaman web untuk benar-benar interaktif sejak pengguna meminta halaman web) sedikit lebih lama daripada waktu yang dibutuhkan halaman web untuk terlihat. di peramban.

Jadi, dalam skenario SSR, untuk waktu render pertama yang lebih cepat, HTML dan CSS Anda harus bermakna bagi pengguna, dan JavaScript dapat menjadi peningkatan untuk HTML dan CSS, karena pemuatannya ditangguhkan.

Kesalahpahaman umum tentang cara kerja SSR dengan React adalah bahwa setelah setiap perubahan, seperti pengguna meminta data baru, server kembali menyelesaikan semua langkah dan mengirimkan file HTML dengan UI baru ke browser, tetapi ini tidak terjadi. . Hanya pembaruan sebagian ke halaman yang dilakukan. Meskipun rendering dilakukan oleh server, hasil akhir dimasukkan ke dalam DOM dengan 'menghidrasi', seperti yang dijelaskan sebelumnya.

ssr-dengan-reaksi-pro-kontra-dari-ssr

Rendering Sisi Server | Kapan dan Kapan Tidak Digunakan

  • Jika Anda membutuhkan SEO yang kuat, gunakan SSR karena lebih mudah dirayapi oleh mesin telusur.
  • Untuk situs web yang berfokus pada konten dan tidak berfokus pada interaksi, seperti blog, situs web berita, situs web statis, dan situs web berat teks, SSR dapat menjadi keuntungan karena akan memuat inti dari situs web Anda, yaitu konten yang sangat cepat.
  • Dibutuhkan waktu dan upaya di sisi server untuk merender dan menghasilkan file yang akan dikirim ke browser. Jadi, jika Anda menggunakan server dan anggaran operasi yang rendah, sebaiknya Anda tidak menerapkan SSR karena akan ada banyak permintaan yang dikirim ke server Anda.
    • Namun, dengan penyedia seperti Firebase, kami dapat menghasilkan konten secara dinamis dengan fungsi cloud dan server dapat menyimpannya dalam cache CDN
    • Apa yang akan dilakukan adalah bahwa saat pengguna meminta, pembuatan file tidak dilakukan lagi oleh server. Sebaliknya, itu hanya disajikan dari tepi CDN lokal, meningkatkan waktu muat dari sudut pandang pengguna sementara juga menggunakan lebih sedikit sumber daya server.

Bagaimana React Baik untuk SSR?

React adalah pilihan yang sangat baik untuk mengimplementasikan SSR karena menggabungkan konsep virtual DOM (Document Object Model).

Ini memungkinkan pengembang untuk membuat versi virtual dari aplikasi React, dan memilikinya di server itu sendiri.

Ini membuatnya lebih mudah untuk merendernya ke HTML menggunakan fungsi renderToString seperti yang dibahas sebelumnya, mengirimkannya ke browser sehingga browser dapat merendernya dengan cukup cepat dan membuat versi virtual di mesin klien.

Jadi, melihat fakta bahwa versi virtual ini cocok dengan HTML yang kami kirim dari server, React tidak akan merender ulang, sehingga mengurangi Time To Interactive (TTI), menghasilkan halaman web yang 'lebih cepat' memuat.

SSR, Sepanjang Hari, Setiap Hari!

Kami berharap ada satu ukuran cocok untuk semua solusi untuk semuanya, tetapi itu jauh dari kasus, terutama dengan teknologi baru. Meskipun RSK memiliki banyak manfaat, ada beberapa kasus seperti yang telah dibahas sebelumnya, dimana RSK mungkin bukan pilihan yang baik; situs yang sangat interaktif berada di garda depan.

Di situlah Creole Studios masuk. Kami memiliki sederet pakar teknologi, yang selalu mengikuti hampir setiap teknologi baru yang muncul di dunia teknologi. Kami akan memahami kebutuhan bisnis Anda dan memberi Anda solusi khusus, baik itu aplikasi SSR atau CSR, dan yakinlah, Anda tidak perlu khawatir tentang apa pun saat kami melakukan pekerjaan berat untuk Anda. Hubungi kami dan dapatkan ide-ide Anda dari kepala Anda ke dalam sebuah aplikasi!