Swr NextJs là gì

Khi nào và như thế nào các phương thức vòng đời React được gọi trong quy trình NextJS SSR?

Hồ Huy Quang · Hồ Huy Quang 14:20 30/01/2020
4 ngày trước

Đây là một câu hỏi đơn giản mà gần như chắc chắn đã được trả lời trong tài liệu NextJS ở đâu đó, nhưng sau khi xem xét [cũng như tìm kiếm thông tin về nó], tôi không thể tìm thấy nó.

Theo tôi hiểu, NextJS hoạt động như vậy:

  • Nếu bạn đến ứng dụng của mình từ một URL 'bên ngoài', tức là không thông qua a Link, thì trang đó là SSR'd và NextJS gửi một tổ hợp HTML với JS [NextJS framework, React, v.v.] tới trình duyệt. HTML này được tạo thông qua React, trên máy chủ.

  • Trong quá trình SSR getInitialPropsđược gọi trên máy chủ và [tôi giả sử] chuyển dữ liệu ban đầu xuống quá trình SSR thông quaprops

  • Sau đó, các phương thức vòng đời của React được gọi là [ componentDidMount/ useEffect]. Ứng dụng vẫn có quyền truy cập vào dữ liệu ban đầu thông qua props. Theo tôi hiểu, các phương thức vòng đời này được gọi trên máy khách - đó là những gì tôi console.lognói với tôi - và do đó bạn có thể được đảm bảo quyền truy cập vào những thứ như thế localStorage.

  • Nhưng điều này có ngụ ý rằng có lần hiển thị thứ hai ở phía máy khách sau SSR ban đầu, tức là HTML gốc được phân phối được thay thế bằng SPA không?

  • Hay nội dung SSR ban đầu vẫn còn, nhưng NextJS bằng cách nào đó gọi các phương thức vòng đời React là "trực tiếp"?

Một phần của vấn đề là tôi không có kiến ​​thức về cách React hoạt động bên trong - mối quan hệ giữa các phương thức vẽ màn hình và vòng đời với nhau.

Tôi đang cố gắng hiểu cách hoạt động của NextJS - quy trình chính xác là gì và cách SSR và React của NextJS hoạt động cùng nhau cũng như điều gì xảy ra khi nào và ở đâu.

Bất kỳ giúp đỡ nhiều đánh giá cao!

  • javascript
  • reactjs
  • next.js
  • server-side rendering
7 hữu ích 0 bình luận 2.5k xem chia sẻ

Video liên quan

Chủ Đề