Developer Must Read

React Secret Server Side and Client Side

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 di kirim 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 di muat 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 ‘htttp://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 NodeJS 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 NodeJS
  • Ada beberapa tricky environment seperti (‘window’ di server-side, dll)
  • Perlu mempelajari pemahaman server dan NodeJS itu sendiri

Cara mana yang harus saya gunakan?

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

 

 

Sumber

https://vision-secrets.com/what-is-reactjs-and-why-it-is-so-popular/
Stjin de Witt, dkk., 2016 -stackoverflow.com

 

Related posts

Tips Debugging Aplikasi Laravel di Production

Ramdhan Rizki

React Native 101 – #2 Cara Kerja

Rochman Ramadhani

Integrasi ReactJS dengan Golang menggunakan GIN

Setia Budi

Leave a Comment