React Streaming: Kết xuất phía máy chủ lũy tiến để tối ưu hóa trải nghiệm người dùng

Trong thế giới phát triển web, việc mang lại trải nghiệm người dùng nhanh chóng và nhạy bén là tối quan trọng. Người dùng mong đợi các trang web tải nhanh và có tính tương tác mà không bị chậm trễ. React, một thư viện JavaScript phổ biến để xây dựng giao diện người dùng, cung cấp một kỹ thuật mạnh mẽ gọi là Kết xuất phía máy chủ (SSR) phát trực tuyến để giải quyết thách thức này. Bài viết này đi sâu vào khái niệm React Streaming SSR, khám phá những lợi ích, cách triển khai và tác động của nó đối với hiệu suất trang web và trải nghiệm người dùng.

Kết xuất phía máy chủ (SSR) là gì?

Kết xuất phía máy khách (CSR) truyền thống bao gồm trình duyệt tải xuống các tệp HTML, JavaScript và CSS, sau đó kết xuất nội dung ở phía máy khách. Mặc dù linh hoạt, cách tiếp cận này có thể dẫn đến kết xuất ban đầu bị trì hoãn, vì người dùng phải đợi tất cả các tài nguyên tải xuống và JavaScript thực thi trước khi thấy bất kỳ nội dung nào. Mặt khác, SSR kết xuất các thành phần React trên máy chủ và gửi HTML đã kết xuất đầy đủ đến máy khách. Điều này dẫn đến thời gian tải ban đầu nhanh hơn, vì trình duyệt nhận được HTML được hình thành đầy đủ có thể hiển thị ngay lập tức.

Những hạn chế của SSR truyền thống

Mặc dù SSR truyền thống mang lại sự cải thiện đáng kể so với CSR, nhưng nó có những hạn chế riêng. Trong SSR truyền thống, toàn bộ ứng dụng cần được kết xuất trên máy chủ trước khi bất kỳ HTML nào được gửi đến máy khách. Đây có thể là một nút thắt cổ chai, đặc biệt đối với các ứng dụng phức tạp có nhiều thành phần và phụ thuộc dữ liệu. Thời gian đến byte đầu tiên (TTFB) có thể cao, dẫn đến cảm giác chậm chạp cho người dùng.

Nhập React Streaming SSR: Một phương pháp lũy tiến

React Streaming SSR khắc phục những hạn chế của SSR truyền thống bằng cách áp dụng một phương pháp lũy tiến. Thay vì chờ toàn bộ ứng dụng kết xuất trên máy chủ, Streaming SSR chia nhỏ quy trình kết xuất thành các phần nhỏ hơn và truyền các phần này đến máy khách khi chúng có sẵn. Điều này cho phép trình duyệt bắt đầu hiển thị nội dung sớm hơn nhiều, cải thiện hiệu suất cảm nhận và giảm TTFB. Hãy nghĩ về nó như một nhà hàng chuẩn bị bữa ăn của bạn theo từng giai đoạn: món khai vị được phục vụ trước, sau đó là món chính và cuối cùng là món tráng miệng, thay vì chờ toàn bộ bữa ăn sẵn sàng cùng một lúc.

Lợi ích của React Streaming SSR

React Streaming SSR mang lại nhiều lợi ích cho hiệu suất trang web và trải nghiệm người dùng:

• Thời gian tải ban đầu nhanh hơn: Bằng cách truyền các khối HTML đến máy khách, trình duyệt có thể bắt đầu hiển thị nội dung sớm hơn nhiều, dẫn đến thời gian tải cảm nhận nhanh hơn và cải thiện mức độ tương tác của người dùng.
• Thời gian đến byte đầu tiên (TTFB) được cải thiện: Streaming SSR giảm TTFB bằng cách gửi khối HTML ban đầu ngay khi nó sẵn sàng, thay vì chờ toàn bộ ứng dụng kết xuất.
• Trải nghiệm người dùng nâng cao: Thời gian tải ban đầu nhanh hơn dẫn đến trải nghiệm người dùng tốt hơn, vì người dùng không phải chờ nội dung xuất hiện.
• SEO tốt hơn: Các công cụ tìm kiếm có thể thu thập thông tin và lập chỉ mục nội dung hiệu quả hơn, vì HTML có sẵn trên máy chủ.
• Hydrat hóa lũy tiến: Streaming SSR cho phép hydrat hóa lũy tiến, trong đó mã React phía máy khách dần dần gắn các trình xử lý sự kiện và làm cho ứng dụng có tính tương tác khi các khối HTML được truyền.
• Cải thiện việc sử dụng tài nguyên: Bằng cách chia nhỏ quy trình kết xuất thành các phần nhỏ hơn, Streaming SSR có thể cải thiện việc sử dụng tài nguyên trên máy chủ.

Cách React Streaming SSR hoạt động

React Streaming SSR tận dụng API ReactDOMServer.renderToPipeableStream() để truyền các khối HTML đến máy khách. API này trả về một luồng có thể đọc được có thể được chuyển đến đối tượng phản hồi của máy chủ. Dưới đây là một minh họa đơn giản về cách nó hoạt động:

1. Máy chủ nhận được yêu cầu cho một trang.
2. Máy chủ gọi ReactDOMServer.renderToPipeableStream() để kết xuất ứng dụng React thành một luồng.
3. Luồng bắt đầu phát ra các khối HTML khi các thành phần React được kết xuất.
4. Máy chủ chuyển luồng đến đối tượng phản hồi, gửi các khối HTML đến máy khách.
5. Trình duyệt nhận các khối HTML và bắt đầu hiển thị chúng một cách lũy tiến.
6. Sau khi tất cả các khối HTML đã được nhận, trình duyệt hydrat hóa ứng dụng React, làm cho nó có tính tương tác.

Triển khai React Streaming SSR

Để triển khai React Streaming SSR, bạn sẽ cần một máy chủ Node.js và một ứng dụng React. Dưới đây là hướng dẫn từng bước:

1. Thiết lập máy chủ Node.js: Tạo máy chủ Node.js bằng một framework như Express hoặc Koa.
2. Cài đặt React và ReactDOMServer: Cài đặt các gói react và react-dom.
3. Tạo một ứng dụng React: Tạo một ứng dụng React với các thành phần bạn muốn kết xuất trên máy chủ.
4. Sử dụng ReactDOMServer.renderToPipeableStream(): Trong mã máy chủ của bạn, hãy sử dụng API ReactDOMServer.renderToPipeableStream() để kết xuất ứng dụng React của bạn thành một luồng.
5. Chuyển luồng đến đối tượng phản hồi: Chuyển luồng đến đối tượng phản hồi của máy chủ để gửi các khối HTML đến máy khách.
6. Xử lý lỗi: Triển khai xử lý lỗi để bắt bất kỳ lỗi nào có thể xảy ra trong quá trình kết xuất.
7. Thêm thẻ script để hydrat hóa: Bao gồm một thẻ script trong HTML để hydrat hóa ứng dụng React ở phía máy khách.

Đoạn mã ví dụ (Phía máy chủ):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // Thành phần React của bạn

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

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // Điểm vào phía máy khách
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
Xin lỗi, đã xảy ra sự cố
');
    }
  });

  setTimeout(abort, 10000); // Tùy chọn: Thời gian chờ để ngăn chặn treo vô thời hạn
});

app.use(express.static('public')); // Phục vụ các tài sản tĩnh

app.listen(port, () => {
  console.log(`Máy chủ đang lắng nghe tại http://localhost:${port}`);
});

Đoạn mã ví dụ (Phía máy khách - `client.js`):

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

const root = ReactDOM.hydrateRoot(document,
    
);

Ví dụ thành phần ứng dụng React (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Dữ liệu đã được tải thành công!");
    }, 2000);
  });
}

function SlowComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // Mô phỏng độ trễ tải
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
Chào mừng đến với Streaming SSR!
      
Đây là một bản trình diễn về React Streaming SSR.
      Đang tải...
}>