Hướng dẫn cách xử lý SSR cho ReactJS

SSR (Server-Side Rendering) là một kỹ thuật render nội dung của ứng dụng trên server thay vì client. Điều này giúp tăng tốc độ tải trang, cải thiện SEO và nâng cao trải nghiệm người dùng. Trong ReactJS, có một số kỹ thuật mà bạn có thể sử dụng để xử lý SSR cho trang, bài viết hôm nay chúng ta cùng tìm hiểu nhé.

SSR và CSR

SSR (Server-Side Rendering) và CSR (Client-Side Rendering) là hai phương pháp phổ biến để render nội dung trong ứng dụng web. Với SSR, server render HTML trước khi gửi về client; ngược lại với CSR, trình duyệt nhận HTML rỗng, sau đó render bằng JavaScript.

SSR phù hợp với các ứng dụng như blog, website tin tức, landing page (cần SEO tốt) hay những ứng dụng cần tải nhanh trang đầu tiên. Trong ReactJS, có 2 giải pháp phổ biến để xử lý SSR là sử dụng Next.js hoặc tự triển khai với Express.js. Chúng ta cùng đi chi tiết vào từng giải pháp nhé.

Sử dụng Next.js

Next.js là framework hỗ trợ SSR tốt nhất cho React, giúp render nội dung trên server một cách tối ưu. Next.js cung cấp phương thức getServerSideProps dùng để fetch dữ liệu trên server mỗi lần có request. Hàm này giúp trang web có dữ liệu được cập nhật theo thời gian thực, đồng thời vẫn đảm bảo SSR (Server-Side Rendering).

export async function getServerSideProps() {
  // Gọi API để lấy dữ liệu
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts }, // Trả dữ liệu về component dưới dạng props
  };
}

export default function BlogPage({ posts }) {
  return (
    <div>
      <h1>Danh sách bài viết</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Sử dụng Express.js

Nếu không muốn dùng Next.js, bạn có thể tự triển khai SSR bằng Express.js kết hợp với React và ReactDOMServer.

const express = require('express');
const path = require('path');
const fs = require('fs');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./src/App').default;

const app = express();

app.use(express.static(path.resolve(__dirname, 'build')));

app.get('*', (req, res) => {
  const html = ReactDOMServer.renderToString(React.createElement(App));

  fs.readFile(path.resolve(__dirname, 'build', 'index.html'), 'utf8', (err, data) => {
    if (err) {
      return res.status(500).send('Error loading index.html');
    }
    return res.send(data.replace('<div id="root"></div>', `<div id="root">${html}</div>`));
  });
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

Nên lựa chọn cách nào

Chúng ta cùng so sánh 2 cách sử dụng trên theo từng tiêu chí như dưới đây:

Tiêu chí	Next.js	Express SSR
Cấu hình	Dễ, có sẵn SSR	Phải tự cấu hình SSR
SEO	Rất tốt	Tốt nhưng cần tối ưu thêm
Hiệu suất	Cao nhờ tối ưu sẵn	Cần tối ưu thủ công
Tính linh hoạt	Hỗ trợ API, ISR, SSG	Linh hoạt nhưng cần tự xây dựng

Tóm lại, nếu muốn xử lý SSR một cách nhanh chóng, bạn nên dùng Next.js. Còn nếu cần tùy chỉnh sâu, có thể dùng Express.js với React.