Cải thiện tốc độ tải trang và SEO với Server-side Rendering trong ReactJS

Server-side Rendering là một kỹ thuật quan trọng để cải thiện hiệu suất và SEO cho ứng dụng web. Các ứng dụng web chỉ sử dụng client-side rendering sẽ gặp phải vấn đề khi trang web được truy cập lần đầu. Trong bài học này, chúng ta sẽ học cách sử dụng Server-side Rendering để cải thiện hiệu suất ứng dụng của chúng ta, đặc biệt là cho lần tải trang web ban đầu.

1. Server-side Rendering là gì?

Server-side Rendering là quá trình rendering HTML trên phía máy chủ thay vì trên trình duyệt của người dùng. Trong client-side rendering, các trang web đọc mã nguồn HTML và biên dịch JavaScript để hiển thị trang web. Nhưng đối với Server-side Rendering, dữ liệu JSON được trả về khi người dùng truy cập trang web đầu tiên, từ đó mã HTML được tạo ra từ phía máy chủ, sau đó được gửi đến trình duyệt của người dùng.

Một trong những lợi ích chính của Server-side Rendering đó là thời gian tải trang web được cải thiện đáng kể, đặc biệt là cho các trang web có nhiều nội dung động và dữ liệu. Thay vì tải toàn bộ ứng dụng trên trình duyệt của người dùng, Server-side Rendering chỉ tải các dữ liệu cần thiết nhất để hiển thị trang web nhanh hơn. Điều này dẫn đến trải nghiệm người dùng tốt hơn và cải thiện khả năng tương tác của người dùng.

2. Cài đặt Server-side Rendering trên ReactJS

Cài đặt Server-side Rendering trên ReactJS không quá phức tạp. Để bắt đầu, chúng ta cần cài đặt hai thư viện: react-dom và react-router-dom. Sau khi đã cài đặt thành công, chúng ta sẽ import các thư viện này vào ứng dụng:

import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';

Khi đã import các thư viện, chúng ta sẽ tạo ra một hàm để xử lý các yêu cầu trang web đến từ phía máy chủ:

function handleRequest(request, response) {
  const html = renderToString();
  response.send(html);
}

Trong đoạn mã trên, chúng ta đã sử dụng hàm renderToString để chuyển đổi ứng dụng ReactJS thành chuỗi HTML. Đồng thời, chúng ta cũng đã sử dụng thư viện StaticRouter để xác định vị trí URL tự động có trong yêu cầu từ máy chủ. Sau đó, chúng ta đã thể hiện ứng dụng của mình bằng cách sử dụng component .

Sau khi đã cài đặt xong, chúng ta có thể thử nghiệm ứng dụng bằng cách sử dụng lệnh sau:

node server.js

Nếu bạn nhận được lỗi “cannot find module ‘react-dom/server'”, hãy chắc chắn rằng bạn đã cài đặt đúng thư viện react-dom bằng cách sử dụng lệnh sau:

npm install react react-dom react-router-dom --save

Sử dụng Server-side Rendering trong ReactJS giúp cho ứng dụng của chúng ta tải nhanh hơn và cải thiện hiệu suất. Bạn có thể sử dụng Server-side Rendering để giải quyết các vấn đề về tốc độ tải trang và SEO cho ứng dụng của mình. Chúc bạn may mắn với kỹ thuật mới này!

Bạn có thể xem các kỹ năng nâng cao khác của reactjs tại đây: ReactJS: các kỹ thuật lập trình nâng cao và thực hành tốt nhất bạn phải biết.