by Bloger Lumoshive Ara

Jan 25, 2022

React Secret Server Side and Client Side

by Rio Jurezky March 25, 2021021

 

React Understanding About Client-Side and Server-Side

Server-side vs Client-side

Yang perlu diperhatikan saat ini ada 2 tempat dimana URL di interpretasikan, beberapa pengguna mengirim request ke ‘http://example.com/test’ ke server, yang melihat ke bagian path dari url tersebut yang mengindikasikan bahwa pengguna me-request untuk masuk ke halaman about yang akhirnya akan dikirim oleh server.

Namun pada Client-Side, yang dimana memang dipakai oleh React-Router, prosesnya menjadi tidak semudah itu, yang awalnya pengguna belum memuat kode JS apapun, jadi permintaan pertama selalu ke server terlebih dahulu, yang akan memuat script tag React dan React Router, dll. Namun setelah pengguna sudah mendapat load script tag tersebut dari server, ketika pengguna mengklik tautan untuk pindah page, url diubah hanya secara local, tidak ada request ke server yang terjadi, React-Router melakukan tugasnya di client-side untuk menentukan tampilan mana yang akan dimuat dengan asumsi tidak ada panggilan atau request kepada server.

Jadi pada dasarnya, react akan mengubah tampilan halaman tanpa menyebabkan refresh atau request kepada server pada halaman tersebut.

 

Kombinasi server- dan client-side routing

Untuk membuat routing bekerja di server dan client side, anda perlu setup di keduanya, server dan client side. Untuk melakukan itu, ada beberapa pilihan yang dapat digunakan untuk membuat routing bekerja pada kedua tempat.

  • Bypassing the problem altogether: Hash History.

  • Catch-All.

  • Hybrid.

  • Isomorphic.

 

Bypassing the problem altogether: Hash History

Menggunakan Hash History daripada Browser History. Struktur url akan berubah menjadi seperti ‘http://example.com/#/about’ bagian setelah hash (#) tidak dikirim ke server untuk melakukan request, jadi server hanya akan membaca ‘http://example.com/’ dan mengirim feedback index page namun react-router pada client-side akan membaca ‘#/about’ dan memberikan halaman yang diinginkan.

 

Kekurangannya:

  • Struktur url akan terlihat jelek.

  • Server-side rendering tidak akan bekerja, dan buruk untuk SEO karena hanya akan terdeteksi satu page saja.

 

Catch-all

Untuk cara ini akan menggunakan browser history, namun kita akan membuat server menerima apapun path dari url ‘/*’ setelah slash, akan mengirim ‘index.html’, kurang lebih tidak jauh berbeda dari Hash History, tapi dengan clean url yang baik

 

Kekurangan:

  • Pembuatan lumayan kompleks.

  • Tetap tidak bagus untuk SEO, karena semua dianggap satu page oleh SEO.

 

Hybrid

Untuk cara ini akan mengimprove cara dari Catch-All dengan menambahkan script untuk spesifik routes. Kita perlu membuat simple routing PHP scripts untuk me-return halaman-halaman yang akan ditampilkan dari pengambilan path di url.

 

Kekurangan:

  • Lebih kompleks dari catch-all.

  • SEO baik untuk halaman-halaman yang sudah di setting pada PHP script.

  • Duplicate rendering code di server dan client side.

 

Isomorphic

Untuk cara ini, jika menggunakan Node.JS di kedua tempat, server dan client-side, dapat me-running JS, jadi react-router dapat bekerja sesuai config, dan kita tidak perlu duplicate rendering.

 

Kekurangan:

  • Server harus dapat menggunakan Node.JS.

  • Ada beberapa tricky environment seperti (‘window’ di server-side, dll).

  • Perlu mempelajari pemahaman server dan Node.JS itu sendiri.




Cara mana yang harus saya gunakan?

Untuk pemilihan caranya, dapat menyesuaikan diri sendiri, pilihlah yang memang menurut anda dapat kuasai, kalau menurut saya, saya akan memilih Catch-All yang jika memang diperlukan dapat saya improve menjadi Hybrid, namun jika memang server dapat menggunakan Node.JS, saya akan memilih untuk menggunakan Isomorphic.

 

Sumber



 Membungkus

Terima kasih sudah menyisihkan sedikit waktu untuk membaca artikel diatas. Jika Anda tertarik untuk bekerja sama dengan Lumoshive Anda dapat menghubungi kami melalui :

Email : [email protected]

Instagram : @lumoshive.official

Sampai jumpa dilain hari dengan artikel selanjutnya!!

 

Related Post

Mengetahui Jenis-jenis Fungsi Manfaat Server dan Cara Kerjanya

by Bloger Lumoshive Ara

Mar 08, 2022

0

    Server adalah suatu sistem komputer yang memiliki layanan yang berupa  penyim...