Rendering là quá trình chuyển đổi mã React thành HTML. Phương pháp hiển thị bạn chọn phụ thuộc vào dữ liệu bạn đang làm việc và mức độ bạn quan tâm đến hiệu suất.
Trong Next.js, kết xuất rất linh hoạt. Bạn có thể hiển thị các trang phía máy khách hoặc phía máy chủ, tĩnh hoặc tăng dần.
Hãy xem các phương pháp này hoạt động như thế nào và mỗi phương pháp hoạt động như thế nào.
Kết xuất phía máy chủ
Với kết xuất phía máy chủ (SSR), khi người dùng truy cập một trang web, trình duyệt sẽ gửi yêu cầu đến máy chủ cho trang đó. Máy chủ tìm nạp dữ liệu cần thiết từ cơ sở dữ liệu, nếu cần và gửi dữ liệu đó cùng với nội dung của trang tới trình duyệt. Sau đó, trình duyệt sẽ hiển thị nó cho người dùng.
Trình duyệt thực hiện yêu cầu này cho mọi liên kết mà người dùng nhấp vào, có nghĩa là máy chủ xử lý yêu cầu mọi lúc.
Điều này có thể làm giảm hiệu suất của trang web. Tuy nhiên, kết xuất phía máy chủ là hoàn hảo cho các trang sử dụng dữ liệu động.
Sử dụng getServerSideProps để xây dựng lại trang mỗi khi người dùng yêu cầu.
export default function Home({ data }) {
return (
<main>
// Use data
</main>
);
}
export async function getServerSideProps() {
const res = await fetch('https:
const data = await res.json()
return { props: { data } }
}
getServerSideProps chỉ chạy trên máy chủ và đây là cách nó chạy:
- Khi người dùng truy cập trực tiếp vào trang, trang sẽ chạy theo thời gian yêu cầu và trang được hiển thị trước với các đạo cụ mà nó trả về.
- Khi người dùng truy cập trang thông qua liên kết Tiếp theo, trình duyệt sẽ gửi một yêu cầu đến máy chủ chạy nó.
Trong phiên bản mới, bạn có thể chọn tham gia hiển thị phía máy chủ bằng cách sử dụng tìm nạp dữ liệu động trong một trang hoặc một bố cục.
Tìm nạp dữ liệu động là các yêu cầu tìm nạp () chọn không tham gia bộ nhớ đệm một cách cụ thể bằng cách đặt tùy chọn bộ nhớ đệm thành “no-store”.
fetch('https://...', { cache: 'no-store' });
Ngoài ra, hãy đặt xác thực lại thành 0:
fetch('https://...', { next: { revalidate: 0 } });
Tính năng này hiện đang trong giai đoạn thử nghiệm vì vậy hãy ghi nhớ điều đó. Bạn có thể đọc thêm về tìm nạp dữ liệu động trong tài liệu Next.js 13 beta.
Kết xuất phía máy khách
Bạn nên sử dụng kết xuất phía máy khách (CSR) khi bạn cần cập nhật dữ liệu thường xuyên hoặc khi bạn không muốn kết xuất trước trang của mình. Bạn có thể triển khai CSR ở cấp độ trang hoặc cấp độ thành phần. Ở cấp độ trang, Next.js tìm nạp dữ liệu tại thời điểm chạy và khi được thực hiện ở cấp độ thành phần, nó sẽ tìm nạp dữ liệu trên mount. Do đó, CSR có thể góp phần làm chậm hiệu suất.
Sử dụng hook useEffect () để hiển thị các trang trên máy khách như sau:
import { useState, useEffect } from 'react'
function Home() {
const [data, setData] = useState(null)
const [isLoading, setLoading] = useState(false)
useEffect(() => {
setLoading(true)
fetch('/api/get-data')
.then((res) => res.json())
.then((data) => {
setData(data)
setLoading(false)
})
}, [])
if (isLoading) return <p>Loading...</p>
if (!data) return <p>No data</p>
return (
<div>
// Use data
</div>
)
}
Bạn cũng có thể sử dụng móc SWR. Nó lưu trữ dữ liệu và xác thực lại trong trường hợp nó bị cũ.
import useSWR from 'swr'
const fetcher = (...args) => fetch(...args).then((res) => res.json())
function Home() {
const { data, error } = useSWR('/api/data', fetcher)
if (error) return <div>Failed to load</div>
if (!data) return <div>Loading...</div>
return (
<div>
// Use data
</div>
)
}
Trong Next.js 13, bạn cần sử dụng một thành phần máy khách bằng cách thêm chỉ thị “sử dụng máy khách” ở đầu tệp.
"use client";
export default () => {
return (
<div>
</div>
);
};
Sự khác biệt giữa SSR và CSR là dữ liệu được tìm nạp trên mọi yêu cầu trang trên máy chủ trong SSR trong khi dữ liệu được tìm nạp ở phía máy khách trong CSR.
Tạo trang web tĩnh
Với tạo trang web tĩnh (SSG), trang tìm nạp dữ liệu một lần trong thời gian xây dựng. Các trang được tạo tĩnh rất nhanh và hoạt động tốt vì tất cả các trang đã được tạo trước. Do đó, SSG hoàn hảo cho các trang sử dụng nội dung tĩnh như trang bán hàng hoặc blog.
Trong Next.js, bạn phải xuất hàm getStaticProps trong trang mà bạn muốn hiển thị tĩnh.
export default function Home({ data }) {
return (
<main>
// Use data
</main>
);
}
export async function getStaticProps() {
const res = await fetch('https:
const data = await res.json()
return { props: { data } }
}
Bạn cũng có thể truy vấn cơ sở dữ liệu bên trong getStaticProps.
export async function getStaticProps() {
// Call function to fetch data from database
const data = await getDataFromDB()
return { props: { data } }
}
Trong Next.js 13, hiển thị tĩnh là mặc định và nội dung được tìm nạp và lưu vào bộ nhớ đệm trừ khi bạn đặt tùy chọn bộ nhớ đệm thành tắt.
async function getData() {
const res = await fetch('https:
return res.json();
}
export default async function Home() {
const data = await getData();
return (
<main>
// Use data
</main>
);
}
Tìm hiểu thêm về kết xuất tĩnh trong Next.js 13 từ tài liệu.
Thế hệ tăng dần-tĩnh
Có những lúc bạn muốn sử dụng SSG nhưng cũng muốn cập nhật nội dung thường xuyên. Đây là nơi giúp tạo tĩnh gia tăng (ISG).
ISG cho phép bạn tạo hoặc cập nhật các trang tĩnh sau khi bạn đã tạo chúng sau khoảng thời gian bạn chỉ định. Bằng cách này, bạn không cần phải xây dựng lại toàn bộ trang web chỉ những trang cần nó.
ISG giữ lại các lợi ích của SSG với lợi ích bổ sung là cung cấp nội dung cập nhật cho người dùng. ISG hoàn hảo cho những trang trên trang web của bạn sử dụng dữ liệu thay đổi. Ví dụ: bạn có thể sử dụng ISR để hiển thị các bài đăng trên blog để blog luôn được cập nhật khi bạn chỉnh sửa bài đăng hoặc thêm bài mới.
Để sử dụng ISR, hãy thêm phần mềm hỗ trợ xác thực lại vào hàm getStaticProps trên một trang.
export async function getStaticProps() {
const res = await fetch('https:
const data = await res.json()
return {
props: {
data,
},
revalidate: 60
}
}
Tại đây, Next.js sẽ cố gắng xây dựng lại trang khi có yêu cầu sau 60 giây. Yêu cầu tiếp theo sẽ dẫn đến phản hồi với trang được cập nhật.
Trong Next.js 13, sử dụng revalidate trong tìm nạp như sau:
fetch('https://.../data', { next: { revalidate: 60 } });
Bạn có thể đặt khoảng thời gian thành bất kỳ khoảng thời gian nào phù hợp nhất với dữ liệu của mình.
Cách chọn phương pháp kết xuất
Cho đến nay, bạn đã học về bốn phương pháp kết xuất trong Next.js – CSR, SSR, SSG và ISG. Mỗi phương pháp này phù hợp với các trường hợp khác nhau. CSR hữu ích cho các trang cần dữ liệu mới, nơi SEO mạnh không phải là mối quan tâm. SSR cũng tuyệt vời cho các trang sử dụng dữ liệu động, nhưng nó thân thiện với SEO hơn.
SSG phù hợp với các trang có dữ liệu chủ yếu là tĩnh trong khi ISG là tốt nhất cho các trang chứa dữ liệu bạn muốn cập nhật theo khoảng thời gian. SSG và ISG tuyệt vời về mặt hiệu suất và SEO vì dữ liệu được tìm nạp trước và bạn có thể lưu vào bộ nhớ cache.
