004 静态与动态渲染
目录
本文对应 Next.js Learn 入门教程的第 8 章。
知识：静态渲染 vs 动态渲染
什么是静态渲染？
With static rendering, data fetching and rendering happens on the server at build time (when you deploy) or during revalidation. The result can then be distributed and cached in a Content Delivery Network (CDN).
Whenever a user visits your application, the cached result is served. There are a couple of benefits of static rendering:
- Faster Websites - Prerendered content can be cached and globally distributed. This ensures that users around the world can access your website's content more quickly and reliably.
- Reduced Server Load - Because the content is cached, your server does not have to dynamically generate content for each user request.
- SEO - Prerendered content is easier for search engine crawlers to index, as the content is already available when the page loads. This can lead to improved search engine rankings.
静态渲染指的是数据获取和页面渲染在服务器上在构建时（你部署应用时）或者在数据再验证期间发生。然后，可以在内容分发网络 (CDN) 中分发和缓存结果。
示意图，展示了用户请求页面时会访问 CDN 而不是服务器
每当用户访问你的应用时，都会提供缓存的结果。静态渲染有几个好处：
- 更快的网站 - 预渲染的内容可以被缓存并全球分发。这确保了全世界的用户可以更快、更可靠地访问你的网站内容。
- 降低服务器负载 - 由于内容被缓存，你的服务器无需为每个用户请求动态生成内容。
- 搜索引擎优化 - 预渲染的内容对搜索引擎爬虫来说更容易索引，因为在页面加载时内容已经可用。这可能会带来更好的搜索引擎排名。
什么是动态渲染
With dynamic rendering, content is rendered on the server for each user at request time (when the user visits the page). There are a couple of benefits of dynamic rendering:
- Real-Time Data - Dynamic rendering allows your application to display real-time or frequently updated data. This is ideal for applications where data changes often.
- User-Specific Content - It's easier to serve personalized content, such as dashboards or user profiles, and update the data based on user interaction.
- Request Time Information - Dynamic rendering allows you to access information that can only be known at request time, such as cookies or the URL search parameters.
在动态渲染中，内容在服务器端为每个用户进行实时渲染（当用户访问页面时）。动态渲染的几个优势包括：
- 实时数据 - 动态渲染允许你的应用展示实时或频繁更新的数据。这对于数据变化频繁的应用来说是理想的选择。
- 特定用户内容 - 提供个性化内容（如仪表板或用户个人资料）变得更加容易，并且可以根据用户互动更新数据。
- 请求时间信息 - 动态渲染允许你在请求时间获取只有在那时才能知晓的信息，例如cookies或URL搜索参数。
Dashboard 动态渲染
使用 unstable_noStore动态渲染
unstable_noStore
You can use a Next.js API called unstable_noStore inside your Server Components or data fetching functions to opt out of static rendering. Let's add this.
In your data.ts, import unstable_noStore from next/cache, and call it the top of your data fetching functions:
/app/lib/data.ts
tsx
// ...
import { unstable_noStore as noStore } from 'next/cache';
export async function fetchRevenue() {
// Add noStore() here to prevent the response from being cached.
// This is equivalent to in fetch(..., {cache: 'no-store'}).
noStore();
// ...
}
export async function fetchLatestInvoices() {
noStore();
// ...
}
export async function fetchCardData() {
noStore();
// ...
}
export async function fetchFilteredInvoices(
query: string,
currentPage: number,
) {
noStore();
// ...
}
export async function fetchInvoicesPages(query: string) {
noStore();
// ...
}
export async function fetchFilteredCustomers(query: string) {
noStore();
// ...
}
export async function fetchInvoiceById(query: string) {
noStore();
// ...
}INFO
Note: unstable_noStore is an experimental API and may change in the future. If you prefer to use a stable API in your own projects, you can also use the Segment Config Option export const dynamic = "force-dynamic".
模拟慢速问题
/app/lib/data.ts
tsx
export async function fetchRevenue() {
try {
// We artificially delay a response for demo purposes.
// Don't do this in production :)
console.log('Fetching revenue data...');
await new Promise((resolve) => setTimeout(resolve, 3000));
const data = await sql<Revenue>`SELECT * FROM revenue`;
console.log('Data fetch completed after 3 seconds.');
return data.rows;
} catch (error) {
console.error('Database Error:', error);
throw new Error('Failed to fetch revenue data.');
}
}Here, you've added an artificial 3-second delay to simulate a slow data fetch. The result is that now your whole page is blocked while the data is being fetched.
Which brings us to a common challenge developers have to solve:
With dynamic rendering, your application is only as fast as your slowest data fetch.
在这里，你添加了一个人为的3秒延迟来模拟数据获取的缓慢过程。结果是，在数据获取期间，你的整个页面现在都处于阻塞状态。
这引出了开发人员需要解决的一个常见挑战：
在动态渲染的情况下，你的应用程序的速度将受限于最慢的数据获取速度。