React SSR with Java and Spring Boot
SSR (Server Side Rendering) merupakan istilah untuk proses “render” yang dijalankan di sisi server.
Pada aplikasi web yang dibangun dengan ReactJS, umumnya merupakan Single Page Application dan isi dari<body> hanya berupa:
<div id="root"></div>Isi dari “root” tersebut hanya akan tampil apabila file JavaScript sudah selesai diunduh dan dieksekusi oleh browser. Selama belum selesai, maka tampilan akan kosong. Proses ini dinamakan CSR (Client Side Rendering).
SSR dapat mengatasi kekurangan dari proses CSR, diantaranya:
- User tidak dapat melihat tampilan aplikasi apabila JavaScript belum selesai diunduh dan dieksekusi oleh browser. Tampilan akan kosong selama proses berjalan.
- Performa SEO (Search Engine Optimization) yang buruk dikarenakan pencarian tidak dapat melakukan indexing terhadap konten aplikasi.
Membangun Aplikasi SSR
Berikut sedikit panduan React Server Side Rendering yang dibangun dengan Java dan Spring Boot. Sampel projek dapat diakses dari repositori github saya.
React Application
Pada file “index.html”, tambahkan sebuah kata unik misalkan “SERVER_RENDERED_HTML”. Kata tersebut akan digantikan dengan hasil render di sisi server.
Buat file baru, misalkan “server.js”. Kita akan menggunakan fitur ReactDOMServer dari React. Sementara untuk React Router, kita tidak dapat menggunakan BrowserRouter yang hanya bisa berjalan di Browser. Untuk sisi server, kita dapat menggunakan Static Router.
Lalu, ubah sedikit pengaturan di Webpack. Pada bagian entry, tambahkan “server.js” di atas. Sementara pada bagian HtmlWebpackPlugin, tambahkan excludeChunks: [‘server’]. Hasil keluaran dari “server.js” nantinya akan digunakan pada sisi server dan tidak diperlukan di sisi client.
Java + Spring Boot Application
Pasang konfigurasi sebagai berikut:
- ViewResolver dipasang agar aplikasi dapat bekerja dengan view (menampilkan html)
- ScriptTemplateConfigurer digunakan untuk menyalakan Nashorn. Nashorn merupakan JavaScript Engine yang berjalan di JVM. Nashorn akan mengeksekusi hasil keluaran “server.js”.
- JavaScript di sisi server tidak memiliki properti seperti window, console, dan lain-lain. Oleh karena itu, agar tidak terjadi “error” pada saat pengeksekusian, kita menggunakan “nashorn-polyfill.js”. Kita bisa mengganti nilai “console.log” menjadi fungsi “print” di server. Berikut contoh isinya:
var window = this;
var console = {
error: print,
debug: print,
warn: print,
log: print
}- AddResourceHandlers dipasang agar kita dapat mengakses file “.js”, “.css”, dan lain-lain.
- AddViewController dipasang agar ketika user mengakses alamat “/”, konten web akan otomatis diarahkan sesuai konten “index.html”.
- Fungsi index di atas bertujuan untuk membaca url yang dimasukkan oleh user, kemudian ditambahkan ke attribute model. Isi model akan dibaca kembali oleh “server.js”.
Hasil
Untuk mengetahui apakah SSR bekerja dengan baik atau tidak, matikan JavaScript pada browser atau menggunakan slow connection pada development tools.
Catatan
Apabila anda menggunakan Redux pada aplikasi React, maka anda perlu melakukan konfigurasi tambahan untuk default state yang disimpan di redux store. Silahkan membaca : Redux-Server Rendering.
