Hiệu suất làm mặc định với Next.js

Next.js xử lý nhiều hoạt động tối ưu hoá trong ứng dụng React để bạn không phải

Houssein Djirdeh

Next.js là một khung React có sẵn một số tính năng tối ưu hoá hiệu suất. Ý tưởng chính đằng sau khung này là đảm bảo các ứng dụng khởi động và duy trì hiệu suất tốt nhất có thể bằng cách đưa các chức năng này vào theo mặc định.

Phần giới thiệu này sẽ trình bày ngắn gọn nhiều tính năng mà khung này cung cấp ở cấp cao. Các hướng dẫn khác trong bộ sưu tập này sẽ khám phá chi tiết hơn về các tính năng.

Bạn sẽ học được gì?

Mặc dù Next.js cung cấp một số tính năng tối ưu hoá hiệu suất theo mặc định, nhưng các hướng dẫn này nhằm giải thích chi tiết hơn về các tính năng đó và cho bạn biết cách sử dụng các tính năng đó để tạo ra trải nghiệm nhanh và hiệu quả.

Nhìn chung, có nhiều tính năng tối ưu hoá có thể được thêm vào các trang web React và cũng sẽ hoạt động cho các ứng dụng được tạo bằng Next.js. Các chủ đề này sẽ không được đề cập vì trọng tâm là vào những gì Next.js cung cấp cụ thể. Để tìm hiểu thêm về các phương pháp tối ưu hoá chung cho React, hãy xem bộ sưu tập React của chúng tôi.

Next.js khác với React như thế nào?

React là một thư viện giúp bạn dễ dàng xây dựng giao diện người dùng bằng phương pháp dựa trên thành phần. Mặc dù mạnh mẽ, nhưng React lại là một thư viện giao diện người dùng. Nhiều nhà phát triển thêm các công cụ bổ sung như trình tạo gói mô-đun (ví dụ: webpack) và trình biên dịch chuyển đổi (ví dụ: Babel) để có một chuỗi công cụ xây dựng hoàn chỉnh.

Trong bộ sưu tập React, chúng tôi đã sử dụng phương pháp Tạo ứng dụng React (CRA) để nhanh chóng khởi động các ứng dụng React. CRA giúp việc thiết lập ứng dụng React dễ dàng hơn bằng cách cung cấp một chuỗi công cụ bản dựng hoàn chỉnh chỉ với một lệnh duy nhất.

Mặc dù có một số tính năng tối ưu hoá mặc định được tích hợp sẵn vào CRA, nhưng công cụ này nhằm cung cấp một quy trình thiết lập đơn giản và dễ hiểu. Nhà phát triển có thể tự quyết định việc truy xuất và chỉnh sửa cấu hình.

Next.js cũng có thể được dùng để tạo một ứng dụng React mới, nhưng lại sử dụng một phương pháp khác. Công cụ này ngay lập tức cung cấp một số tính năng tối ưu hoá phổ biến mà nhiều nhà phát triển muốn có nhưng khó thiết lập, chẳng hạn như:

  • Hiển thị phía máy chủ
  • Tự động phân tách mã
  • Tìm nạp trước tuyến đường
  • Định tuyến hệ thống tệp
  • Kiểu CSS-in-JS (styled-jsx)

Thiết lập

Để tạo một ứng dụng Next.js mới, hãy chạy lệnh sau:

npx create-next-app new-app

Sau đó, hãy chuyển đến thư mục và khởi động máy chủ phát triển:

cd new-app
npm run dev

Phần nhúng sau đây cho thấy cấu trúc thư mục của một ứng dụng Next.js mới.

  • Nhấp vào Remix to Edit (Trộn lại để chỉnh sửa) để có thể chỉnh sửa dự án.
  • Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Màn hình toàn cảnh toàn màn hình.

Xin lưu ý rằng thư mục pages/ được tạo bằng một tệp duy nhất: index.jsx. Next.js tuân theo phương pháp định tuyến hệ thống tệp, trong đó mỗi trang trong thư mục này được phân phát dưới dạng một tuyến riêng biệt. Việc tạo một tệp mới trong thư mục này, chẳng hạn như about.js, sẽ tự động tạo một tuyến mới (/about).

Các thành phần cũng có thể được tạo và sử dụng như mọi ứng dụng React khác. Thư mục components/ đã được tạo bằng một thành phần duy nhất là nav.js, đã được nhập trong index.js. Theo mặc định, mọi lệnh nhập được sử dụng trong Next.js chỉ được tìm nạp khi trang đó được tải, mang lại lợi ích của tính năng phân tách mã tự động.

Hơn nữa, mọi lượt tải trang ban đầu trong Next.js đều được kết xuất phía máy chủ. Nếu mở bảng điều khiển Mạng trong DevTools, bạn có thể thấy yêu cầu ban đầu để tài liệu trả về một trang được kết xuất hoàn toàn phía máy chủ.

Thẻ Xem trước của bảng điều khiển Mạng cho thấy Next.js trả về HTML đầy đủ về mặt hình ảnh khi có yêu cầu đối với một trang.
Thẻ Xem trước của bảng điều khiển Mạng cho thấy Next.js trả về HTML hoàn chỉnh về mặt hình ảnh khi một trang được yêu cầu.

Đây chỉ là một vài trong số rất nhiều tính năng mà Next.js tự động cung cấp. Nhiều tính năng có thể tuỳ chỉnh và sửa đổi cho nhiều trường hợp sử dụng.

Tiếp theo là gì?

Pun có ý định 😛

Mọi hướng dẫn khác trong bộ sưu tập này sẽ khám phá chi tiết một tính năng cụ thể của Next.js: