Next-JS là gì và cách cài đặt

Nếu bạn là nhà phát triển phản ứng tự hỏi làm thế nào để giải quyết hoặc tìm hiểu thêm về kết xuất phía máy chủ hoặc xây dựng các trang tĩnh với khung phản ứng, bạn đã đến đúng bài viết để đọc. Trong bài viết này, chúng ta sẽ tìm hiểu về next-js, một công cụ giúp giải quyết các hạn chế của kết xuất hoàn toàn tĩnh hoặc phía máy chủ trong các bản dựng phản ứng.

Tôi chắc rằng tất cả chúng ta đều đã nghe nói về react, một khuôn khổ javascript để xây dựng giao diện người dùng. React có nhiều ưu điểm từ việc phân rã các thành phần web thành nhiều phần khác nhau, modul hóa css, xử lý các sự kiện… nhưng có vẻ như react chỉ phù hợp để render dữ liệu phía client, ảnh hưởng rất nhiều đến seo của website. Dữ liệu do Google lập chỉ mục phải được hiển thị trên máy chủ.

Bạn Đang Xem: Next-JS là gì và cách cài đặt

Các nhà phát triển của phản ứng đã đưa ra một công cụ để hỗ trợ hiển thị phía máy chủ trong phản ứng, js tiếp theo. Chúng ta hãy cùng nhau xem qua khuôn khổ này.

Giới thiệu về kết xuất phía máy chủ và kết xuất phía máy khách

Sự khác biệt chính ở đây là với ssr, máy chủ trả về tệp html của trang được kết xuất cho trình duyệt, trong khi csr sẽ trả về tệp html gần như trống có liên kết đến tệp js. Trong cả hai trường hợp, bạn cần tải xuống react và thực hiện cùng một quy trình để xây dựng dom ảo và đính kèm các sự kiện để làm cho trang tương tác – nhưng với ssr, người dùng có thể bắt đầu xem trang trước trong khi tất cả quá trình diễn ra. Đối với csr, chúng ta cần đợi cho đến khi tất cả quá trình trên được thực hiện và không thể nhìn thấy trang web cho đến khi dom ảo được chuyển đến dom trình duyệt.

Tại sao bạn cần kết xuất phía máy chủ (ssr)?

Xem Thêm : Bulong là gì? Các loại bu lông hiện nay

kết xuất phía máy chủ cho phản ứng đề cập đến việc thực thi javascript ở phía máy chủ để hiển thị phản ứng, sau đó trả lại kết quả (html) cho máy khách. Tại sao điều này là cần thiết?

Trong một ứng dụng trang đơn (spa), việc hiển thị được thực hiện ở phía máy khách, vì vậy khi chuyển đổi màn hình hoặc thay đổi màn hình, việc kết xuất là cần thiết mà không cần phải tải lại toàn bộ trang. chẳng hạn như cách truyền thống. Các ứng dụng một trang (spa) giúp người dùng có được trải nghiệm tốt hơn, tuy nhiên có hai vấn đề sau đây.

1. Thời gian trả về của chế độ xem đầu tiên lâu hơn so với phương pháp trả về html trực tiếp từ máy chủ và spa sẽ mất nhiều thời gian hơn. Bởi vì sau khi máy chủ trả về phản hồi, máy khách phải thực thi javascript để tạo ra html được hiển thị. Mất nhiều thời gian để hiển thị chế độ xem đầu tiên có thể khiến chúng tôi mất rất nhiều người dùng.
2. seo trong trường hợp không có ssr, khi máy chủ trả về phản hồi thì html chưa được tạo nên không thể xác định rằng trình vuốt của công cụ tìm kiếm sẽ nhận ra nội dung của chúng ta. Điều này đồng nghĩa với việc website của chúng ta sẽ yếu về seo.

Bằng cách kết hợp spa và ssr, chúng tôi có được những ưu điểm của từng phương pháp. Điều này được thực hiện bằng cách chỉ cung cấp ssr lần đầu tiên, sau đó quá trình chuyển đổi trên màn hình sẽ được thực hiện giống như một ứng dụng spa.

next-js là gì?

next.js là một khuôn khổ được phát triển bởi zeit để phát triển các ứng dụng phản ứng đẳng hình (phổ quát). Nhờ next.js, chúng tôi có thể dễ dàng tạo một ứng dụng phản ứng đẳng hình bao gồm kết xuất phía máy chủ.

Cách cài đặt next-js

A. khởi tạo ứng dụng nextjs

Tương tự như create-react-app của reactjs, với nextjs, chúng tôi cũng có một công cụ tương tự, create-next-app. Bạn có thể cài đặt và xem hướng dẫn cài đặt chi tiết tại đây. Sau khi cài đặt thành công, chúng ta có thể khởi động một ứng dụng nextjs mới bằng lệnh:

$ create-react-app learning-nextjs

Xem Thêm : Màu khoáng trong son là gì?

Sau khi tạo, chúng ta sẽ nhận được cây thư mục sau:

Sử dụng cây thư mục này, chúng tôi cần xử lý những điều sau:

• .next: Đây là thư mục cốt lõi của dự án
• thành phần: chứa các thành phần của dự án để sử dụng lại nhiều lần (rất quan trọng)
• public: chứa các tệp công khai như css, hình ảnh, v.v.
• Dịch vụ: thường được sử dụng cho api
• ngữ cảnh: Chứa chức năng chung cho toàn bộ dự án (để lưu thông tin)
• utils: chứa các hàm logic được gọi nhiều lần
• trang: chia bộ định tuyến trong các dự án

b. Cách chia bộ định tuyến trong next-js

Khi duyệt qua các bộ định tuyến của ứng dụng, chúng tôi có thể trực quan thấy cách phân chia các bộ định tuyến. Next.js cũng hỗ trợ các bộ định tuyến động. Ví dụ: chúng tôi tạo tệp [id] .js trong thư mục trang / sản phẩm. Tiếp theo .js sẽ tạo ra một slus như `/ product / [1]`. Nó rất trực quan và dễ sử dụng.

c. Nó cần gì để kết xuất dữ liệu từ phía máy chủ?

Thông tin chúng tôi cần bằng cách lấy dữ liệu từ máy chủ. nextjs cung cấp cho chúng ta một hàm có tên getinitialprops () có thể hiểu là componentdidmount () nhưng có thể được sử dụng với ** ssr ** và có thể thay thế componentdidmount () bằng ứng dụng ssr.

Hàm này cần trả về nội dung của một đối tượng thông thường, không phải ngày tháng, bản đồ hoặc bộ sưu tập. Hàm này sẽ được gọi lại nếu được chuyển hướng đến một url khác thông qua liên kết / tiếp theo (sẽ nói thêm về điều này sau). Bạn cũng có thể sử dụng hàm getinitialprops () trong các thành phần không trạng thái như sau:

Kết luận

Đến đây có lẽ bạn đã biết rất nhiều về next-js và cách cài đặt nó. Trong những phần tiếp theo, xoài sẽ tiếp tục chia sẻ thêm những thông tin hữu ích mà mình tích lũy được. Nếu các bạn thấy chưa chính xác hoặc có bất kỳ thắc mắc nào, vui lòng comment bên dưới. Cảm ơn vì đã đọc.