1. khai mạc
sau một thời gian làm việc với reactjs với kết xuất phía máy khách (csr) gần đây, tôi đang tìm hiểu cách triển khai kết xuất phía máy chủ (ssr) với reactjs cụ thể là với nextjs – một khuôn khổ để chúng tôi thực hiện ssr với reactjs. Tại thời điểm viết bài này, tôi cũng đang trong quá trình tìm hiểu về nextjs nên bài viết này sẽ không bao gồm các mẹo hay các phương pháp hay nhất mà tôi sẽ chỉ chia sẻ với bạn những gì tôi đã học được và hy vọng sẽ giúp bạn tiết kiệm thời gian bằng cách chuyển từ csr thành ssr với nextjs. Trước khi tiếp tục đọc bài viết này và cũng để giúp bạn dễ dàng hơn, bạn nên:
- hiểu biết cơ bản về kết xuất phía máy khách và kết xuất phía máy chủ
- có kiến thức cơ bản về phản ứng
ul>
2. nextjs
Ngay khi chúng tôi vào trang chủ nextjs, chúng tôi ngay lập tức biết nó là gì và ứng dụng của nó:
về cơ bản với ssr , nextjs giới thiệu cho chúng tôi những thông tin như:
- hiệu suất tốt hơn dujgn csr
- mang lại khả năng seo tốt hơn so với csr không có như một bài đăng chia sẻ việc làm.
Trên trang chủ, bạn cũng có thể tìm thấy nhiều trang web sử dụng nextjs để tạo sản phẩm của họ trong mọi lĩnh vực, chẳng hạn như tài chính, tin tức, thương mại điện tử, …. Tôi đã giới thiệu nó với bạn như thế này, nhưng bây giờ chúng ta hãy đi vào những gì chúng ta đã học được. lưu ý: danh sách tôi chia sẻ dưới đây dựa trên những gì tôi đã từng làm trong reactjs và tôi muốn tìm cách làm điều tương tự với nextjs
a. khởi tạo ứng dụng nextjs
Tương tự như create-react-app từ reactjs, với nextjs, chúng tôi cũng có công cụ create-next-app tương tự. 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ể bắt đầu một ứng dụng nextjs mới bằng lệnh:
sau khi tạo, chúng ta sẽ nhận được cây thư mục sau:
với cây thư mục này, chúng ta cần quan tâm đến một số thứ như:
- thành phần: như tên gọi của nó, nó sẽ là nơi lưu trữ các thành phần của ứng dụng của chúng ta.
- trang: đây là nơi chứa các trang mà chúng ta truy cập từ url, trong cụ thể, tôi sẽ nói về nó tiếp theo.
- static: nó là thư mục chứa các tệp tĩnh của chúng ta như hình ảnh, css, …
- next.config.js: cũng như được đề xuất bởi tên, là tệp chứa cấu hình ứng dụng của chúng tôi.
b. sử dụng scss
reactjs hoặc nextjs được nhắm mục tiêu vào phần giao diện người dùng, vì vậy đối với tôi, cách tạo kiểu cho các thành phần trong ứng dụng của chúng tôi là một trong những điều đầu tiên quan trọng đối với tôi. thông thường với ứng dụng reactjs, tôi sẽ sử dụng scss và điều này cũng được hỗ trợ bởi create-react-app . tuy nhiên, với nextjs để sử dụng scss, chúng ta cần cài đặt một gói có tên là @ zeit / next-sass như sau:
trong tệp next.config.js thêm nội dung sau:
có một cảnh báo rằng bạn phải nhập ít nhất một tệp .scss vào các tệp trong thư mục / pages nếu không bạn sẽ gặp một lỗi khá lạ là khi vào trang bạn sẽ không thể nhập tệp đầu tiên tệp .scss. Khi bạn truy cập ứng dụng lần đầu tiên, bạn sẽ không thể nhấp để chuyển trang. cộng đồng đã phát hiện ra lỗi này và chúng tôi hy vọng nó sẽ sớm được khắc phục.
c. sử dụng tệp tĩnh
Một điều quan trọng hơn đối với ui là chúng tôi sẽ cần chèn hình ảnh vào trang của mình. Như tôi đã nói trước đây, chúng ta có một thư mục được gọi là / statics. đối với hình ảnh, bên trong chúng ta phải tạo một thư mục bổ sung có tên là / images và lưu hình ảnh ở đó. bây giờ trong bất kỳ thành phần nào chúng ta có thể sử dụng hình ảnh đó như vậy:
d. sử dụng next / head
Để hỗ trợ seo và chia sẻ, nextjs cung cấp cho chúng tôi một thành phần có tên là next / head. cách sử dụng như sau:
về cơ bản, nội dung chúng tôi khai báo trong & lt; head & gt; điều này sẽ được thêm vào & lt; head & gt; trang html mà chúng tôi trả lại cho người dùng. điều này có nghĩa là tùy thuộc vào trang mà chúng ta có thể chuyển thêm thông tin như tiêu đề, meta, og: image, og: title, … để có thể chia sẻ trên các trang khác như facebook.
s. lấy dữ liệu từ máy chủ
để biết thông tin về trang, hãy điền vào & lt; head & gt; ở trên, chúng tôi sẽ cần thêm thông tin từ phía máy chủ. Ví dụ, nếu tôi copy đường dẫn của một bài viết của bạn và dán vào bình luận trên facebook và nhận được kết quả như sau:
thì tất nhiên là & lt; head & gt; của trang, chúng tôi sẽ cần hoàn thành tối thiểu các thông tin như og: image và og: title sẽ có được bằng cách truy xuất dữ liệu từ máy chủ. nextjs cung cấp cho chúng tôi một hàm có tên getinitialprops () có thể được hiểu là componentdidmount () nhưng nó hoạt động với ** ssr * * và có một hàm thay thế cho componentdidmount () với ứng dụng ssr. cụ thể như sau:
hàm này là cần thiết để trả về nội dung dưới dạng đối tượng thông thường chứ không phải ở dạng ngày , bản đồ hoặc bộ . chức năng 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 () trên một thành phần không trạng thái như sau:
lưu ý: hàm getinitialprops () chỉ hoạt động trên / pages. Đồng thời, hàm này cũng nhận tham số là một đối tượng yêu cầu chứa các thông tin như tham số truy vấn, ….
f. định tuyến
nextjs sẽ tự động tạo bộ định tuyến cho các tệp bạn tạo trong các trang / thư mục, ví dụ:
- trang / index.js sẽ khớp với url ban đầu của /
- trang / post / index.js sẽ khớp với url của: / post
- trang / bài đăng /create.js sẽ khớp với url như: / post / create
tuy nhiên, trong trường hợp bạn muốn url của mình có định dạng / post /: postid, bây giờ chúng tôi sẽ cần sử dụng một tệp hoạt động như một máy chủ như sau:
về cơ bản đây là tệp server.js hỗ trợ ssr . bởi vì phần khác postid là một tham số động và chúng tôi không có cách nào để tạo url động như vậy theo quy tắc tạo url trang nextjs. Với phần viết ở trên, dạng url / post /: postid sẽ được client hiểu là / post? Postid =? nhưng với cơ chế ghi lại url, nó sẽ là / post /: postid và trong thành phần của chúng ta, chúng ta có thể lấy postid này làm tham số truy vấn như sau:
với đoạn mã trên, khi chúng ta truy cập trang có url / post / 1 lần đầu tiên, trong thành phần của chúng ta, chúng ta sẽ nhận được số 1 tương ứng với postid và sử dụng nó để gọi api và nhận bài đăng với id là 1 sau đó nó hiển thị giao diện tương ứng trên máy chủ và trả về cho chúng tôi tệp nội dung html hoàn chỉnh. tuy nhiên, đây là cách chúng tôi khai báo bộ định tuyến với ssr và với máy khách, chúng tôi sẽ sử dụng thẻ next / link để thực hiện điều hướng.
g. liên kết
nextjs cung cấp cho chúng tôi một thành phần được gọi là next / link như & lt; link / & gt; trong đường phản ứng . tuy nhiên, khi sử dụng cú pháp, nó sẽ như sau:
Như bạn có thể thấy, & lt; liên kết tiếp theo / & gt; cần phải có thuộc tính href để trỏ đến đường dẫn cần thiết và đặc biệt, bên trong nó phải chứa bất kỳ cặp thẻ nào như & lt; a & gt; & lt; / a & gt ;, & lt; button & gt ; & lt; / nút & gt; , & lt; div & gt; & lt; / div & gt; … như trong ví dụ trên. ngoài ra, next / link cũng chấp nhận một tham số as khác đóng vai trò ghi lại url. Trong nội dung định tuyến ở trên, chúng ta đã nói về việc sử dụng biểu mẫu url / post /: postid ở phía ssr và ở phía máy khách, chúng ta sẽ phải sử dụng next / link như thế này:
Như đã nói trước đây, postid sẽ được coi là tham số truy vấn trong nextjs , vì vậy chúng tôi cần viết nó là / post? postid = 1 và sau đó sử dụng thuộc tính try 2 của next / link . strong> là thích để chuyển đổi nó thành dạng / post / 1 mong muốn vì ứng dụng khách sẽ không cho phép bạn nhập trước type. href = “/ post /: postid” .
lưu ý: nếu chúng tôi đang ở trên một trang khác, ví dụ / trang và chúng tôi nhấp vào trang thay đổi có nex / link với href = “/ post? postid = 1” thì mọi thứ sẽ hoạt động như bình thường và chúng ta có thể lấy postid đó làm tham số truy vấn trong <post / component, tuy nhiên nếu chúng ta tải lại trang / post / 1 thì nó sẽ dẫn đến 404 vì theo mặc định phía máy khách sẽ không hiểu tuyến này , nhưng nó chỉ hiểu / post? postid = 1 và viết lại thành / post / 1. đó là lý do tại sao chúng ta cần tệp server.js để hỗ trợ các trường hợp trên vì khi chúng ta tải lại trang với url / post / 1, máy chủ có thể lấy tham số 1 đó và trả lại cho ứng dụng kết xuất. của chúng tôi dưới dạng tham số truy vấn.
ngoài ra, khai báo url trong biểu mẫu được đề cập ở trên:
Chúng tôi cũng có thể viết href dưới dạng một đối tượng như sau:
sẽ cung cấp cho chúng tôi một url có dạng / post? postid = 1. Ngoài việc sử dụng thẻ next / link, chúng ta cũng có thể sử dụng việc gán một chức năng cho bất kỳ phần tử nào trong giao diện người dùng để thay đổi url bằng cách sử dụng next / router. ví dụ: trong trường hợp url là / posts / 1, chúng ta có thể viết như sau:
3. kết thúc
Bài viết của tôi đến đây khá dài nên tôi sẽ dừng lại ở đây. phần sau mình sẽ tiếp tục chia sẻ thêm những điều mà mình tìm được. Nếu các bạn thấy mình sai ở đâu hoặc có thắc mắc gì thì comment bên dưới nhé. cảm ơn vì đã đọc.
