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 của bạn, vì vậy, bạn không phải làm

Houssein Djirdeh

Next.js là một khung React cố định tích hợp một số phương thức tối ưu hoá hiệu suất. Ý tưởng chính phía 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 do khung này cung cấp ở cấp độ tổng thể. 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ố phương pháp tối ưu hoá hiệu suất theo mặc định, nhưng những hướng dẫn này sẽ giải thích chi tiết hơn và cho bạn biết cách sử dụng các phương pháp đó để tạo ra một trải nghiệm nhanh chóng và hiệu quả.

Bạn có thể thêm nhiều cách tối ưu hoá vào các trang web React nói chung cũng hiệu quả đối với 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 tính năng tối ưu hoá phản ứng chung, hãy xem Bộ sưu tập phản ứng 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ù rất mạnh mẽ, nhưng React chỉ là một thư viện giao diện người dùng. Nhiều nhà phát triển sử dụng các công cụ bổ sung như trình gói mô-đun (ví dụ: webpack) và trình chuyển đổi (ví dụ: Babel) để có một chuỗi công cụ bản dựng hoàn chỉnh.

Trong bộ sưu tập Phản ứng, chúng tôi đã áp dụng phương pháp Tạo ứng dụng React (CRA) để xoay vòng các ứng dụng React một cách nhanh chóng. 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 vài phương thức tối ưu hoá mặc định được đưa vào CRA, nhưng công cụ này nhằm mục đích cung cấp một quá trình thiết lập đơn giản và dễ hiểu. Nhà phát triển có quyền lựa chọn xem có đẩy và tự sửa đổi cấu hình hay không.

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

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

Thiết lập

Để tạo ứ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

Nội dung nhúng sau đây hiển thị cấu trúc thư mục của ứng dụng Next.js mới.

  • Nhấp vào Phối 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 Toàn màn hì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. Khi bạn tạo một tệp mới trong thư mục này, chẳng hạn như about.js, hệ thống 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. Một 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 thao tác 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 hiển thị phía máy chủ. Nếu mở bảng điều khiển Mạng trong Công cụ cho nhà phát triển, bạn có thể thấy yêu cầu ban đầu cho tài liệu trả về một trang được hiển thị đầy đủ trên 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 đầy đủ về mặt hình ảnh khi có yêu cầu đối với một trang.

Đây chỉ là một vài trong số nhiều tính năng được Next.js cung cấp tự động. 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 tính năng Next.js cụ thể: