Cung cấp dữ liệu cho thành phần Next.js bằng getInitialProps

Cách cung cấp dữ liệu cho thành phần Next.js bằng getInitialProps

Khi tôi nói vềthêm nội dung động vào Next.jschúng tôi đã gặp sự cố với việc tạo động trang bài đăng, vì thành phần yêu cầu một số dữ liệu trước và khi chúng tôi cố gắng lấy dữ liệu từ tệp JSON:

import { useRouter } from 'next/router'
import posts from '../../posts.json'

export default () => { const router = useRouter()

const post = posts[router.query.id]

return ( <> <h1>{post.title}</h1> <p>{post.content}</p> </> ) }

chúng tôi gặp lỗi này:

Làm thế nào để chúng tôi giải quyết điều này? Và làm thế nào để chúng tôi làm cho SSR hoạt động cho các tuyến đường động?

Chúng tôi phải cung cấp thành phần với các đạo cụ, sử dụng một chức năng đặc biệt được gọi làgetInitialProps()được gắn vào thành phần.

Để làm như vậy, trước tiên chúng ta đặt tên cho thành phần:

const Post = () => {
  //...
}

export default Post

sau đó chúng tôi thêm chức năng vào nó:

const Post = () => {
  //...
}

Post.getInitialProps = () => { //… }

export default Post

Hàm này lấy một đối tượng làm đối số của nó, chứa một số thuộc tính. Đặc biệt, điều chúng tôi quan tâm hiện nay là chúng tôi có đượcquery, đối tượng mà chúng tôi đã sử dụng trước đây để lấy id bài đăng.

Vì vậy, chúng tôi có thể lấy nó bằng cách sử dụngcấu trúc đối tượngcú pháp:

Post.getInitialProps = ({ query }) => {
  //...
}

Bây giờ chúng ta có thể trả lại bài đăng từ chức năng này:

Post.getInitialProps = ({ query }) => {
  return {
    post: posts[query.id]
  }
}

Và chúng tôi cũng có thể xóa việc nhậpuseRoutervà chúng tôi nhận được bài đăng từpropstài sản được chuyển choPostthành phần:

import posts from '../../posts.json'

const Post = props => { return ( <div> <h1>{props.post.title}</h1> <p>{props.post.content}</p> </div> ) }

Post.getInitialProps = ({ query }) => { return { post: posts[query.id] } }

export default Post

Bây giờ sẽ không có lỗi và SSR sẽ hoạt động như mong đợi, như bạn có thể thấy kiểm tra nguồn chế độ xem:

CácgetInitialPropschức năng sẽ được thực thi ở phía máy chủ, nhưng cũng ở phía máy khách, khi chúng tôi điều hướng đến một trang mới bằng cách sử dụngLinknhư chúng tôi đã làm.

Điều quan trọng cần lưu ý làgetInitialProps, trong đối tượng ngữ cảnh mà nó nhận được, ngoàiqueryphản đối các thuộc tính khác này:

  • pathname: cácpathphần của URL
  • asPath- Chuỗi đường dẫn thực tế (bao gồm cả truy vấn) hiển thị trong trình duyệt

trong trường hợp gọihttp://localhost:3000/blog/testtương ứng sẽ dẫn đến:

  • /blog/[id]
  • /blog/test

Và trong trường hợp hiển thị phía máy chủ, nó cũng sẽ nhận được:

  • req: đối tượng yêu cầu HTTP
  • res: đối tượng phản hồi HTTP
  • err: một đối tượng lỗi

reqressẽ quen thuộc với bạn nếu bạn đã thực hiện bất kỳ mã Node.js nào.

Tải xuống miễn phí của tôiSổ tay Next.js


Thêm các bài hướng dẫn tiếp theo: