Dasar-Dasar React Server-Side Rendering dengan Express.js: Panduan Lengkap

Dalam dunia pengembangan web modern, Server-Side Rendering (SSR) telah menjadi teknik yang sangat penting untuk meningkatkan kinerja, SEO, dan pengalaman pengguna secara keseluruhan. React, sebagai salah satu pustaka JavaScript paling populer untuk membangun antarmuka pengguna, juga mendapatkan manfaat besar dari SSR. Artikel ini akan membahas secara mendalam dasar-dasar SSR dengan React menggunakan Express.js, sebuah kerangka kerja Node.js yang fleksibel dan mudah digunakan. Kita akan menjelajahi manfaat SSR, bagaimana cara mengimplementasikannya, dan beberapa praktik terbaik untuk memastikan aplikasi Anda berjalan dengan optimal.

Mengapa Server-Side Rendering (SSR)?

Sebelum kita menyelami implementasi, mari kita pahami mengapa SSR begitu penting:

1. Peningkatan SEO (Search Engine Optimization):

   Bot mesin pencari seperti Google seringkali kesulitan dalam mengindeks aplikasi JavaScript yang berat yang mengandalkan Client-Side Rendering (CSR). SSR memberikan HTML yang telah dirender sebelumnya ke bot, sehingga memudahkan mereka untuk memahami konten halaman dan meningkatkan peringkat pencarian Anda.

2. Peningkatan Kinerja (First Contentful Paint – FCP):

   Dengan SSR, pengguna melihat konten lebih cepat karena browser menerima HTML yang telah dirender dari server, bukan hanya kerangka kosong. Ini meningkatkan persepsi kinerja dan mengurangi waktu tunggu awal.

3. Pengalaman Pengguna yang Lebih Baik:

   Waktu pemuatan awal yang lebih cepat dan rendering konten yang konsisten memberikan pengalaman pengguna yang lebih baik. Ini sangat penting untuk aplikasi yang berfokus pada seluler atau yang memiliki pengguna dengan koneksi internet yang lambat.

4. Pratinjau Media Sosial yang Lebih Baik:

   SSR memastikan bahwa pratinjau media sosial (misalnya, saat Anda membagikan tautan di Facebook atau Twitter) menampilkan konten yang akurat dan relevan. CSR sering kali gagal memberikan informasi ini dengan benar.

Kerangka Dasar: React dan Express.js

Kita akan menggunakan React untuk membangun antarmuka pengguna kita dan Express.js sebagai server kita. Berikut adalah beberapa persyaratan dasar yang perlu Anda siapkan:

• Node.js dan npm (atau yarn): Pastikan Anda telah menginstal Node.js dan npm (Node Package Manager) atau yarn di sistem Anda.
• Text Editor atau IDE: Gunakan text editor atau IDE pilihan Anda (misalnya, VS Code, Sublime Text, atau WebStorm).
• Pengetahuan Dasar React: Pemahaman dasar tentang komponen React, JSX, dan state manajemen akan sangat membantu.
• Pengetahuan Dasar Express.js: Pemahaman tentang rute, middleware, dan bagaimana cara menangani permintaan HTTP dengan Express.js.

Langkah-langkah Implementasi React SSR dengan Express.js

Berikut adalah langkah-langkah rinci untuk mengimplementasikan SSR dengan React dan Express.js:

Langkah 1: Membuat Proyek Node.js Baru

Pertama, buat direktori proyek baru dan inisialisasi proyek Node.js:

mkdir react-ssr-express
cd react-ssr-express
npm init -y

Langkah 2: Menginstal Dependensi yang Diperlukan

Selanjutnya, instal dependensi yang diperlukan:

npm install express react react-dom @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli webpack-node-externals --save

Berikut adalah penjelasan singkat tentang setiap dependensi:

• express: Kerangka kerja web Node.js untuk membuat server.
• react: Pustaka JavaScript untuk membangun antarmuka pengguna.
• react-dom: Menyediakan metode khusus DOM yang digunakan di tingkat atas untuk mengaktifkan Anda untuk menggunakan React di dalam DOM browser.
• @babel/core: Compiler JavaScript.
• @babel/preset-env: Preset Babel untuk menggunakan JavaScript terbaru.
• @babel/preset-react: Preset Babel untuk mengkompilasi kode React JSX.
• babel-loader: Loader Webpack untuk menggunakan Babel untuk mengkompilasi JavaScript.
• webpack: Bundler modul JavaScript.
• webpack-cli: Command Line Interface untuk Webpack.
• webpack-node-externals: Mengeluarkan dependensi node_modules Anda dari bundel sisi server. Ini penting untuk performa di sisi server.

Langkah 3: Konfigurasi Babel

Buat file `.babelrc` di direktori root proyek Anda dan tambahkan konfigurasi berikut:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

File ini memberi tahu Babel bagaimana cara mengkompilasi kode JavaScript Anda.

Langkah 4: Konfigurasi Webpack

Buat dua file konfigurasi Webpack: `webpack.client.js` untuk bundel sisi klien dan `webpack.server.js` untuk bundel sisi server.

webpack.client.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/client.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

webpack.server.js

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  mode: 'development',
  entry: './src/server.js',
  target: 'node',
  externals: [nodeExternals()],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'server.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

Perhatikan penggunaan `webpack-node-externals` di konfigurasi sisi server. Ini mencegah Webpack dari membundel dependensi node_modules Anda ke dalam bundel sisi server, yang dapat secara signifikan mengurangi ukuran bundel dan meningkatkan kinerja.

Langkah 5: Membuat Struktur Direktori

Buat struktur direktori berikut di proyek Anda:

react-ssr-express/
├── build/
├── public/
├── src/
│   ├── App.js
│   ├── client.js
│   ├── server.js
│   └── components/
│       └── MyComponent.js
├── .babelrc
├── package.json
├── webpack.client.js
└── webpack.server.js

Langkah 6: Membuat Komponen React

Buat komponen React sederhana di `src/components/MyComponent.js`:

import React from 'react';

const MyComponent = () => {
  return (
    

      
Hello from React SSR!
      
This component is rendered on the server.
    
  );
};

export default MyComponent;

Buat juga file `src/App.js` yang akan merender komponen ini:

import React from 'react';
import MyComponent from './components/MyComponent';

const App = () => {
  return (
    

      
    
  );
};

export default App;

Langkah 7: Membuat Entry Point Sisi Klien

Buat file `src/client.js` sebagai entry point sisi klien:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

File ini bertanggung jawab untuk memasang aplikasi React Anda ke DOM setelah HTML awal dimuat oleh browser.

Langkah 8: Membuat Server Express.js dengan SSR

Buat file `src/server.js` untuk server Express.js Anda:

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';
import path from 'path';
import fs from 'fs';

const app = express();
const port = 3000;

app.use(express.static('public'));

app.get('/', (req, res) => {
  const appString = renderToString();

  const indexFile = path.resolve('./public/index.html');
  fs.readFile(indexFile, 'utf8', (err, data) => {
    if (err) {
      console.error('Something went wrong:', err);
      return res.status(500).send('Oops, better luck next time!');
    }

    return res.send(
      data.replace('
', `
${appString}
`)
    );
  });
});

app.listen(port, () => {
  console.log(`Server is listening on port ${port}`);
});

Berikut adalah penjelasan tentang kode di atas:

• `express()`: Membuat instance aplikasi Express.
• `express.static(‘public’)`: Menyajikan file statis dari direktori `public`.
• `app.get(‘/’, …)`: Menangani permintaan GET ke rute root (`/`).
• `renderToString()`: Merender komponen React `App` ke string HTML menggunakan `renderToString` dari `react-dom/server`.
• `fs.readFile(indexFile, ‘utf8’, …)`: Membaca file `index.html`.
• `data.replace(‘

  ‘, `

  ${appString}

  `)`: Mengganti placeholder `

  ` di `index.html` dengan string HTML yang dirender oleh React.

• `app.listen(port, …)`: Memulai server dan mendengarkan pada port yang ditentukan.

Langkah 9: Membuat File index.html

Buat file `public/index.html` dengan konten berikut:

Perhatikan elemen `

`, yang merupakan tempat aplikasi React Anda akan dipasang, dan tag ``, yang memuat bundel sisi klien.

Langkah 10: Menambahkan Skrip ke package.json

Tambahkan skrip berikut ke file `package.json` Anda:

"scripts": {
  "build:client": "webpack --config webpack.client.js",
  "build:server": "webpack --config webpack.server.js",
  "build": "npm run build:client && npm run build:server",
  "start": "node build/server.js"
}

Skrip ini memungkinkan Anda untuk membangun bundel sisi klien dan sisi server menggunakan Webpack, dan untuk memulai server Express.js.

Langkah 11: Membangun dan Menjalankan Aplikasi

Jalankan perintah berikut di terminal Anda:

npm run build
npm start

Ini akan membangun aplikasi Anda dan memulai server. Buka browser Anda dan navigasikan ke `http://localhost:3000`. Anda akan melihat aplikasi React Anda dirender di server!

Praktik Terbaik untuk React SSR dengan Express.js

Berikut adalah beberapa praktik terbaik untuk memastikan implementasi SSR Anda efisien dan efektif:

1. Gunakan Caching:

   Caching dapat secara signifikan meningkatkan kinerja aplikasi SSR Anda. Pertimbangkan untuk menggunakan caching sisi server (misalnya, dengan Redis atau Memcached) untuk menyimpan halaman yang sering diakses.

2. Code Splitting:

   Gunakan code splitting untuk memecah bundel JavaScript Anda menjadi potongan-potongan yang lebih kecil. Ini dapat mengurangi ukuran bundel awal dan meningkatkan waktu pemuatan halaman.

3. Optimalkan Aset:

   Optimalkan aset Anda, seperti gambar dan font, untuk mengurangi ukuran file dan meningkatkan waktu pemuatan halaman. Gunakan alat seperti ImageOptim atau TinyPNG untuk mengompresi gambar.

4. Gunakan CDN (Content Delivery Network):

   Gunakan CDN untuk menyajikan aset statis Anda. CDN dapat mengirimkan konten Anda dari server yang lebih dekat dengan pengguna Anda, yang dapat meningkatkan waktu pemuatan halaman.

5. Pantau dan Ukur:

   Pantau kinerja aplikasi Anda secara teratur dan ukur dampak SSR. Gunakan alat seperti Google Analytics atau New Relic untuk melacak metrik seperti waktu pemuatan halaman dan waktu respons server.

6. Hindari Manipulasi DOM Langsung di Sisi Server:

   Sisi server tidak memiliki akses ke DOM browser. Hindari mencoba memanipulasi DOM secara langsung di sisi server, karena ini dapat menyebabkan kesalahan.

7. Tangani Kesalahan dengan Benar:

   Tangani kesalahan dengan benar di sisi server. Jika terjadi kesalahan selama proses rendering, pastikan untuk mencatat kesalahan dan mengembalikan respons kesalahan yang sesuai ke klien.

8. Pertimbangkan Hidrasi (Hydration):

   Hidrasi adalah proses “menghidupkan” HTML statis yang dirender oleh server dengan JavaScript sisi klien. Pastikan bahwa proses hidrasi berjalan lancar dan efisien.

9. Gunakan Data Fetching yang Efisien:

   Jika aplikasi Anda memerlukan pengambilan data dari API, lakukan pengambilan data di sisi server untuk meningkatkan kinerja. Gunakan metode seperti `getServerSideProps` (di Next.js) atau `getStaticProps` (di Next.js) untuk mengambil data sebelum halaman dirender.

10. Ukur dan Pantau Kinerja SSR Anda:

    Setelah Anda mengimplementasikan SSR, sangat penting untuk mengukur dan memantau kinerjanya untuk memastikan bahwa Anda benar-benar mencapai manfaat yang diharapkan. Gunakan alat seperti Google PageSpeed Insights, WebPageTest, atau Lighthouse untuk mengukur metrik kinerja seperti First Contentful Paint (FCP), Largest Contentful Paint (LCP), dan Time to Interactive (TTI). Pantau metrik ini secara teratur dan buat penyesuaian yang diperlukan untuk mengoptimalkan kinerja SSR Anda.

Framework dan Library SSR yang Lebih Maju

Selain mengimplementasikan SSR secara manual dengan React dan Express.js, ada beberapa kerangka kerja dan pustaka yang dapat menyederhanakan prosesnya secara signifikan:

• Next.js:

  Next.js adalah kerangka kerja React yang populer untuk membangun aplikasi web dengan SSR, routing, dan fitur-fitur lainnya yang siap pakai. Next.js membuat SSR sangat mudah diimplementasikan dan dikonfigurasi.

• Gatsby:

  Gatsby adalah generator situs statis yang menggunakan React. Gatsby sangat cocok untuk membangun situs web berbasis konten yang berkinerja tinggi.

• Remix:

  Remix adalah kerangka kerja web tumpukan penuh yang berfokus pada pengalaman pengguna. Remix menawarkan pendekatan unik untuk SSR yang berfokus pada peningkatan kinerja dan daya tahan.

Kesimpulan

Server-Side Rendering (SSR) adalah teknik yang ampuh untuk meningkatkan kinerja, SEO, dan pengalaman pengguna aplikasi React Anda. Dengan menggunakan Express.js sebagai server Anda, Anda dapat mengimplementasikan SSR secara efektif dan memberikan pengalaman web yang lebih baik kepada pengguna Anda. Ingatlah untuk mengikuti praktik terbaik, seperti caching, code splitting, dan optimasi aset, untuk memastikan aplikasi Anda berjalan dengan optimal. Dengan pemahaman yang kuat tentang dasar-dasar SSR dan kerangka kerja dan pustaka yang tersedia, Anda dapat membangun aplikasi web React yang berkinerja tinggi dan ramah SEO.