Next.js 独立开发教程（十）：部分预渲染

 更多有关Next.js教程，请查阅

【目录】Next.js 独立开发系列教程-CSDN博客

有兴趣的可以蹲个后续，我会陆续发布一系列的文章。

这个Next.js的入门教程算是告一段落，接下来，会是分章节的Next.js要点讲解，以及基于Next.js拓展的文章，例如：SEO、社交化营销、商业化布局等等。

Anyway，我会以建设独立开发能力为目标，精选一些实用的技术和非技术的内容跟大家分享。

---

文章目录

目录

系列文章目录

文章目录

前言

1. 什么是部分预渲染？

2. 为什么选择部分预渲染？

2.1 优势

2.2 使用场景

3. 在 Next.js 中实现部分预渲染

3.1 基本示例：静态生成和动态渲染结合

3.2 增量静态再生成（Incremental Static Regeneration, ISR）

3.3 结合 API 路由的部分预渲染

4. 部分预渲染的最佳实践

5. 总结

---

前言

在构建现代 Web 应用程序时，性能优化和用户体验提升是开发者关注的核心目标。部分预渲染（Partial Prerendering）是 Next.js 提供的一种强大功能，可以结合静态生成（Static Generation, SSG）和动态渲染（Server-Side Rendering, SSR），让开发者在灵活性和性能之间找到最佳平衡。它尤其适用于那些页面结构相对固定、但部分内容需要动态更新的场景。

本教程将深入讲解部分预渲染的概念、工作原理，以及如何在实际项目中使用它来优化 Web 应用的加载速度和用户体验。

1. 什么是部分预渲染？

部分预渲染是一种渲染策略，它允许页面的一部分内容在构建时静态生成，而其他部分在请求时动态渲染。这种方式结合了静态生成和动态渲染的优点：

• 静态生成部分：在构建时生成静态内容，以实现快速的首屏渲染和出色的性能。
• 动态渲染部分：在用户访问时实时生成动态内容，以确保数据的最新性和实时性。

通过部分预渲染，开发者可以为静态和动态内容分别选择合适的渲染策略，从而满足性能和实时性的需求。

2. 为什么选择部分预渲染？

2.1 优势

• 提高性能：静态生成的内容可以通过 CDN 快速分发，提高页面加载速度。
• 动态更新：动态渲染部分确保数据的实时性，适合需要频繁更新的内容。
• SEO 友好：静态生成的内容有助于搜索引擎优化（SEO），而动态内容则可以在页面加载后更新。
• 灵活性：开发者可以根据页面的不同部分灵活选择渲染策略。

2.2 使用场景

• 部分静态内容和动态内容共存的页面：例如用户仪表盘，页面的布局和导航栏可以静态生成，而用户的个性化数据可以动态渲染。
• SEO 需求较高但内容需要部分动态更新的页面：例如博客、新闻网站首页等。
• 内容频繁变化但渲染成本较高的页面：例如需要从多个 API 获取数据的页面。

3. 在 Next.js 中实现部分预渲染

Next.js 提供了简单而强大的工具来实现部分预渲染，主要通过以下方法：

• getStaticProps：用于在构建时生成静态内容。
• getServerSideProps：用于在请求时动态生成内