Nếu bạn là nhà phát triển phản ứng và muốn biết cách khắc phục sự cố hoặc hiểu rõ hơn về kết xuất phía máy chủ hoặc xây dựng các trang tĩnh bằng khung phản ứng, thì bạn đang ở đúng nơi, bạn cần đọc bài viết này. Trong bài viết này, chúng ta sẽ xem xét next-js, một công cụ giúp giải quyết các hạn chế của phản ứng khi xây dựng kết xuất hoàn toàn tĩnh hoặc phía máy chủ.
Tôi chắc rằng tất cả chúng ta đều đã nghe nói về phản ứng, đây là một khung javascript để xây dựng giao diện người dùng. React có nhiều ưu điểm như chia nhỏ web component thành nhiều phần khác nhau, module hóa css, xử lý 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 lớn. Hầu hết thời gian để SEO trang web, dữ liệu được Google lập chỉ mục phải được hiển thị trên máy chủ.
Các nhà phát triển phản ứng đã đưa ra một công cụ phản ứng hỗ trợ kết xuất phía máy chủ, đó là next-js. Chúng ta hãy cùng nhau xem xét 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ủ sẽ trả về trình duyệt một tệp html để hiển thị trang, trong khi csr sẽ trả về một tệp html gần như trống rỗ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 phản ứng và thực hiện cùng một quy trình để tạo 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 web trước trong khi tất cả quá trình đang diễn ra. Đối với csr, chúng ta cần đợi cho đến khi tất cả các quy trình trên hoàn tất và không thể nhìn thấy trang web cho đến khi dom ảo được chuyển vào dom trình duyệt.
Tại sao bạn cần hiển thị phía máy chủ (ssr)?
kết xuất phía máy chủ cho phản ứng đề cập đến việc thực thi kết xuất javascript phản ứng ở phía máy chủ, 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 ứng dụng một trang (spa), quá trình hiển thị được thực hiện ở phía máy khách, vì vậy khi màn hình được chuyển hoặc màn hình thay đổi, các vị trí cần thiết sẽ được hiển thị lại mà không cần tải lại toàn bộ trang. cách truyền thống. Các ứng dụng đơn trang (spa) có thể giúp người dùng có trải nghiệm tốt hơn nhưng lại gặp phải 2 vấn đề như sau.
- So với phương pháp trả về html trực tiếp từ máy chủ, thời gian trả về của lần xem đầu tiên lâu và spa sẽ mất nhiều thời gian hơn. Vì sau khi server trả về phản hồi thì client phải thực thi javascript tạo ra html để hiển thị. Mất quá nhiều thời gian để hiển thị chế độ xem đầu tiên sẽ khiến chúng tôi mất rất nhiều người dùng.
- Trong trường hợp seo không có ssr, khi server trả về phản hồi thì html chưa được sinh ra nên chưa chắc các trình thu thập thông tin của bộ máy tìm kiếm sẽ nhận ra nội dung của chúng ta. Điều này có nghĩa là trang web của chúng tôi sẽ yếu về seo.
- .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 dự án có thể tái sử dụng (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 dùng cho api
- bối cảnh: Chứa các chức năng được sử dụng xuyên suốt dự án (lưu thông tin)
- utils: Chứa các hàm logic được gọi nhiều lần
- trang: tuyến đường trong dự án tách rời
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, từ đó về 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ổ để phát triển các ứng dụng React đẳng cấu (phổ quát), được phát triển bởi zeit. Nhờ next.js, chúng ta có thể dễ dàng tạo ứng dụng phản ứng đẳng cấu bao gồm kết xuất lại 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, chúng ta cũng có một công cụ tương tự cho nextjs, đó là create-next-app. Bạn có thể cài đặt và xem chi tiết hướng dẫn cài đặ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:
$ tao-reac-app learn-nextjs
Sau khi tạo xong ta sẽ được cây thư mục sau:
Với cây thư mục này, chúng ta cần xử lý một số thứ như:
b. Cách chia bộ định tuyến
trong next-js
Nhìn vào định tuyến của ứng dụng, chúng ta có thể thấy trực quan cách phân chia định tuyến. next.js cũng hỗ trợ định tuyến động. Ví dụ: chúng ta tạo tệp [id].js trong thư mục pages/product và next .js đang xây dựng sẽ tạo ra slus như `/product/[1]`. Nó rất trực quan và dễ sử dụng.
c. Chúng ta 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 có được bằng cách tìm nạp dữ liệu từ máy chủ. nextjs cung cấp cho chúng ta một hàm gọi là getinitialprops() , hàm này có thể hiểu là componentdidmount() nhưng dùng với **ssr**, và có thể thay thế componentdidmount() bằng ssr app.
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, bản đồ hoặc bộ sưu tập. Nếu bạn chuyển hướng đến một url khác qua next/link (sẽ nói thêm về điều đó sau), chức năng này sẽ được gọi lại. 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
Bây giờ có lẽ bạn đã biết nhiều về next-js và cách cài đặt nó. Trong các phần tiếp theo, Mango 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 bạn thấy điều gì đó không đúng hoặc có bất kỳ câu hỏi nào, xin vui lòng để lại nhận xét bên dưới. Cảm ơn vì đã đọc.
