Hướng Dẫn Sử Dụng Jopi Rewrite với React SSR

Mục tiêu bài viết

Trong bài viết này, chúng ta sẽ khám phá cách chạy React.js trên máy chủ (React SSR) bằng cách sử dụng Jopi Rewrite, một framework máy chủ cho Node.js và Bun.js, mang lại nhiều tính năng mạnh mẽ liên quan đến React.js.

Chúng ta sẽ tập trung vào tính năng "page router" giúp ánh xạ cấu trúc website của chúng ta tới một hệ thống thư mục tương ứng với các URL.

Như bạn sẽ thấy, để thêm một trang mới vào website của mình và kết nối nó với một URL, bạn chỉ cần tạo một thư mục con có tên trùng với URL và một tệp index.page.tsx.

Chúng ta sẽ xây dựng gì?

Cuối cùng của bài hướng dẫn ngắn này (khoảng 5 phút), chúng ta sẽ có một website hoàn chỉnh với trang xác thực và tài khoản người dùng. Toàn bộ website sẽ được viết bằng React.js, đồng thời vẫn hoàn toàn tương thích với việc lập chỉ mục của Google — đó là mục đích của React SSR.

React SSR là gì?

React SSR là khả năng chạy React.js trên máy chủ để tạo ra các trang HTML có thể được lập chỉ mục bởi các công cụ tìm kiếm như Google. Nó hoạt động qua hai bước: máy chủ tạo ra các trang HTML, và khi được tải trong trình duyệt, HTML sẽ được thay thế bằng các component React.js thực tế, cho phép người dùng tương tác. Nó giống như một bộ phim bỗng chốc biến thành một nơi thực sự!

Lợi ích chính của React SSR

Cho phép Google lập chỉ mục: Điều này giúp website của bạn dễ dàng được tìm thấy hơn trên các công cụ tìm kiếm.
Tăng tốc độ tải trang: Người dùng sẽ không nhận thấy sự chuyển đổi giữa trang được tạo trên máy chủ và trang được tái tạo với các component React hoàn chỉnh.

Jopi Rewrite là gì?

Jopi Rewrite là một framework máy chủ dễ sử dụng cho Node.js và Bun.js. Nó cung cấp một API cấp thấp cho các tính năng mạnh mẽ và một API cấp cao, gọi là "by intent", giúp dễ dàng tạo một website và kích hoạt các tính năng.

Điều kiện tiên quyết

Những gì chúng ta thực hiện sẽ hoạt động với cả Node.js và Bun.js. Trong bài viết này, chúng ta sẽ sử dụng Node.js. Cần cài đặt phiên bản mới nhất (tối thiểu v22.19) vì framework Jopi Rewrite sử dụng các tính năng mới của nền tảng.

Tạo dự án

Bước đầu tiên là tạo dự án. Chúng ta sẽ sử dụng một mẫu dự án được cài đặt tự động thông qua một công cụ dòng lệnh có tên là jopi.

Lệnh để chạy trong terminal:

Copy

npx jopi create react-ssr-router

Sau khi chạy lệnh này, các tệp sẽ được tạo trong thư mục hiện tại tương ứng với dự án mới.

Nội dung thư mục dự án:

Copy

|- package.json     <- tệp dự án của chúng ta
|- tsconfig.json    <- cho TypeScript
|- src/
   |- index.tsx     <- điểm vào ứng dụng của chúng ta
   |- myUsers.json  <- chứa thông tin đăng nhập/người dùng
   |- reactPages    <- các trang website của chúng ta

Thư mục reactPages

Thư mục reactPages là thư mục quan trọng nhất, vì nó chứa các trang của website của chúng ta. Cấu trúc thư mục ánh xạ tới các URL, nơi mỗi thư mục tương ứng với một phần của URL.

Đoạn trích từ thư mục reactPages:

Copy

|- index.page.tsx       <- cho url http://127.0.0.1:3000
|- products/            
    |- index.page.tsx   <- cho url http://127.0.0.1:3000/products/
|- login/ 
    |- index.page.tsx   <- cho url http://127.0.0.1:3000/login

Thêm trang người dùng

Để thêm một trang — ví dụ http://127.0.0.1:3000/user — chỉ cần tạo tệp index.page.tsx trong thư mục reactPages/user.

Nội dung là một component React.js đơn giản:

Copy

export default function() {
    return <div>
        <div>Tôi là một trang React.js!</div>
        <input type="button" value="Nhấn vào tôi!"
               className="text-red-500"
               onClick={()=>alert("Đã nhấn!")} />
    </div>
}

Nếu bạn khởi động máy chủ và truy cập http://127.0.0.1:3000/user, bạn sẽ thấy component này.

Nếu bạn tắt JavaScript trong trình duyệt, hiển thị trực quan sẽ không thay đổi.
Tuy nhiên, nút sẽ không hoạt động và không có thông báo alert nào xuất hiện.

Lệnh để chạy:

Copy

npm install
npm run build
npm run start

Bạn cũng có thể kích hoạt tái biên dịch tự động để chuyển đổi TypeScript thành JavaScript tự động với npm run watch.

Thiết lập tiêu đề trang

Bây giờ hãy sửa đổi trang này để thêm một tiêu đề và hiển thị tên người dùng hiện đang đăng nhập (xem trang /login). Tiêu đề này là tiêu đề hiển thị trên thanh tiêu đề của trình duyệt.

Copy

import {usePageTitle, useUserInfos} from "jopi-rewrite-ui";
import {Link} from "react-router";

export default function() {
    const infos = useUserInfos();
    usePageTitle("Tiêu đề trang của tôi");

    return <div>
        <div>Người dùng đang kết nối là: {infos?.fullName}</div>
        <Link to="/login">Đi tới trang đăng nhập</Link>
    </div>
}

React Router được kích hoạt nội bộ trên cả trình duyệt và máy chủ, vì vậy bạn có thể sử dụng component Link.
Thêm thông tin: tài liệu cho Link.

Kết thúc bài viết!

Mục tiêu ở đây là để có cái nhìn tổng quan về page router và cách thêm các trang, điều mà chúng ta đã thực hiện. Bài hướng dẫn này không đi sâu hơn, nhưng nếu bạn nhìn vào dự án mẫu mà chúng ta đã cài đặt ở đây, bạn sẽ thấy một số điều rất thú vị như khả năng phản hồi với một yêu cầu POST.

Những điểm thú vị

Tailwind CSS

Jopi Rewrite tự động kích hoạt và cấu hình Tailwind CSS. Đây là những gì đã được sử dụng trong ví dụ này với lớp text-red-500.

Liên kết hữu ích: Trang web Tailwind CSS

React Router

Jopi Rewrite sử dụng React Router nội bộ cho phía trình duyệt, trong khi phía máy chủ được cấu hình cho phép sử dụng component Link trên máy chủ.

Liên kết hữu ích: Trang web React Router

Kích hoạt làm mới tự động

Jopi Rewrite có tính năng tự động làm mới trình duyệt khi bạn chỉnh sửa một trong các trang. Điều này đặc biệt thuận tiện khi bạn đang kiểm tra các thay đổi về mặt hình ảnh.

Để kích hoạt tính năng này, chạy npx run start-dev.

Với Bun.js, việc làm mới diễn ra rất nhanh chóng vì không có bước biên dịch TypeScript.
Những gì mất khoảng 2 giây với Node.js sẽ diễn ra ngay lập tức với Bun.js, đây là lựa chọn tốt hơn cho việc xây dựng các phần hình ảnh của một trang trong quá trình phát triển.

npx run start-bun-dev

Trang web công cụ Jopin

Liên kết hữu ích

Các mẹo và lưu ý

Mẹo tốt nhất: Hãy luôn nhớ kiểm tra tính tương thích với Google trước khi triển khai website của bạn.
Cảnh báo: Đảm bảo bạn đã cài đặt phiên bản Node.js mới nhất để tránh các lỗi không mong muốn khi sử dụng Jopi Rewrite.
Lưu ý quan trọng: Nếu bạn gặp phải sự cố trong quá trình phát triển, hãy kiểm tra lại cấu trúc thư mục và tên tệp của bạn để đảm bảo rằng chúng khớp với các URL mà bạn muốn sử dụng.

Câu hỏi thường gặp (FAQ)

Câu hỏi 1: Jopi Rewrite có tương thích với các phiên bản Node.js cũ hơn không?

Trả lời: Không, bạn cần sử dụng phiên bản Node.js tối thiểu là v22.19.

Câu hỏi 2: Tôi có thể sử dụng Jopi Rewrite cho các dự án lớn không?

Trả lời: Có, Jopi Rewrite được thiết kế để mở rộng và có thể được sử dụng cho các dự án lớn với nhiều trang và tính năng phức tạp.

Câu hỏi 3: Làm thế nào để khắc phục lỗi khi không thể kết nối tới máy chủ?

Trả lời: Hãy kiểm tra lại cấu hình máy chủ và đảm bảo rằng bạn đã khởi động máy chủ đúng cách trước khi thử kết nối.

Hướng Dẫn Sử Dụng Jopi Rewrite với React SSR

Mục tiêu bài viết

Chúng ta sẽ xây dựng gì?

React SSR là gì?

Lợi ích chính của React SSR

Jopi Rewrite là gì?

Điều kiện tiên quyết

Tạo dự án

Thư mục reactPages

Thêm trang người dùng

Thiết lập tiêu đề trang

Kết thúc bài viết!

Những điểm thú vị

Tailwind CSS

React Router

Kích hoạt làm mới tự động

Liên kết hữu ích

Các mẹo và lưu ý

Câu hỏi thường gặp (FAQ)

Bình luận