Next.js - Kết xuất trước
Trong Next.js, chúng ta biết rằng nó tạo HTML cho một trang được gọi là kết xuất trước. Next.JS hỗ trợ hai kiểu kết xuất trước.
Static Generation- Phương pháp này tạo trang HTML tại thời điểm xây dựng. HTML kết xuất trước này được gửi theo từng yêu cầu. Phương pháp này hữu ích cho các trang web tiếp thị, blog, các sản phẩm thương mại điện tử liệt kê các trang web, trợ giúp, trang web tài liệu.
Server Side Generation- Phương pháp này tạo trang HTML theo từng yêu cầu. Phương pháp này phù hợp khi nội dung trang html có thể thay đổi theo từng yêu cầu.
Kết xuất trước trên mỗi trang
Next.JS cho phép thiết lập phương pháp kết xuất trước cho mỗi trang trong đó hầu hết các trang tuân theo tạo tĩnh và các trang khác sẽ sử dụng kết xuất phía máy chủ.
Tạo tĩnh không có dữ liệu
Việc tạo tĩnh có thể được thực hiện mà không cần dữ liệu, trong trường hợp này, các trang HTML sẽ sẵn sàng mà không cần tìm nạp trước dữ liệu và sau đó bắt đầu hiển thị. Dữ liệu có thể được tìm nạp sau hoặc theo yêu cầu. Kỹ thuật này giúp hiển thị cho người dùng Giao diện người dùng mà không có bất kỳ dữ liệu nào trong trường hợp cần thời gian để có dữ liệu.
Tạo tĩnh với dữ liệu
Việc tạo tĩnh có thể được thực hiện với dữ liệu, trong trường hợp đó, các trang HTML sẽ không sẵn sàng cho đến khi dữ liệu được tìm nạp, vì HTML có thể phụ thuộc vào dữ liệu. Mỗi thành phần có một phương pháp đặc biệtgetStaticProps có thể được sử dụng để tìm nạp dữ liệu và chuyển dữ liệu làm đạo cụ của trang để trang đó có thể hiển thị theo các đạo cụ đã chuyển.
Hàm getStaticProps () chạy tại thời điểm xây dựng trong sản xuất và chạy cho mọi yêu cầu trong chế độ nhà phát triển.
Hãy tạo một ví dụ để chứng minh điều tương tự.
Trong ví dụ này, chúng tôi sẽ tạo một trang update index.js và first.js để thực hiện một lần truy cập máy chủ để lấy dữ liệu.
Hãy cập nhật dự án nextjs được sử dụng trong chương Hỗ trợ CSS toàn cầu .
Cập nhật tệp index.js trong thư mục trang để sử dụng phương thức getServerSideProps (). Phương thức này sẽ được gọi theo yêu cầu.
import Link from 'next/link'
import Head from 'next/head'
function HomePage(props) {
return (
<>
<Head>
<title>Welcome to Next.js!</title>
</Head>
<div>Welcome to Next.js!</div>
<Link href="/posts/first"><a>First Post</a></Link>
<br/>
<div>Next stars: {props.stars}</div>
<img src="/logo.png" alt="TutorialsPoint Logo" />
</>
)
}
export async function getServerSideProps(context) {
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const json = await res.json()
return {
props: { stars: json.stargazers_count }
}
}
export default HomePageCập nhật tệp first.js trong thư mục trang để sử dụng phương thức getStaticProps (). Phương thức này sẽ được gọi một lần.
import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'
export default function FirstPost(props) {
return (
<>
<Container>
<Head>
<title>My First Post</title>
</Head>
<h1>My First Post</h1>
<h2>
<Link href="/">
<a>Home</a>
</Link>
<div>Next stars: {props.stars}</div>
</h2>
</Container>
</>
)
}
export async function getStaticProps() {
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const json = await res.json()
return {
props: { stars: json.stargazers_count }
}
}Khởi động Máy chủ Next.js
Chạy lệnh sau để khởi động máy chủ -.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfullyXác minh đầu ra
Mở localhost: 3000 trong trình duyệt và bạn sẽ thấy kết quả sau.
Nhấp vào liên kết bài đăng đầu tiên.
