【译】为什么选择Next.js - 五大性能优势

为什么选择Next.js - 五大性能优势

原文地址：cult.honeypot.io/reads/top-n...

Next.js有什么大惊小怪的？是什么让它成为如此受欢迎的 React 框架？

Next.js 是一个灵活的 React 框架，在当今快节奏的 Web 开发世界中发挥着令人兴奋的作用。它在不断发展的 Web 开发环境中的重要性怎么强调都不为过。由于它结合了服务器端渲染、静态站点创建和客户端渲染功能，越来越多的工程师选择它。通过提供有条理且高效的开发环境，Next.js 加快了创建高性能应用程序的过程。

在本文中，我们将探讨性能优势和对开发人员友好的功能，这些功能使 Next.js 成为 React 框架中的首选之一。

1. 通过服务器端渲染 （SSR） 增强应用程序性能##

服务器端呈现是一种有效的方法，可以显著提高 Web 应用程序的性能。它通过在服务器上呈现初始 HTML 来减少首页加载时间。这样可以加快内容访问速度、提高参与度和满意度。服务器端呈现可提高应用性能，尤其是在移动设备上。这是提供快速用户体验的好方法。

• React Server Components React 服务器组件

  Next.js 现在完全支持 React Server 组件，使开发人员能够将服务器端代码无缝地整合到他们的 React 组件中。借助 React Server 组件，开发人员可以灵活地将复杂的服务器端逻辑（包括数据库查询）直接写入其组件中。此逻辑在渲染期间在服务器端执行，从而显著减少从服务器传输到客户端的数据量。因此，网站性能最佳，加载速度更快。

2. 优化图像加载

Next.js 还提供方便的图像优化功能，可以大大提高应用程序的性能。此功能由 Next.js Image 组件支持，该组件专门设计用于促进在网页上加载图像，同时确保最佳性能。图像组件配备了一系列内置性能优化，包括：

• Size Optimisation 尺寸优化

  使用 WebP 和 AVIF 等现代图像格式，自动为每台设备提供正确大小的图像。

• Visual Stability 视觉稳定性

  防止在加载图像时自动切换布局。

• Faster Page Loads 更快的页面加载

  仅当图像使用本机浏览器延迟加载进入视口时，才会加载图像，并带有可选的模糊占位符。

• Asset Flexibility 资产灵活性

  按需调整图像大小，甚至适用于存储在远程服务器上的图像。

3. 通过自动代码拆分减少初始加载时间

JavaScript 代码拆分是指将一大包代码分解为更小、更易于管理的块的过程。这些较小的部分可以动态加载，这有助于减少初始加载时间并使应用程序响应速度更快。在 Next.js 中执行代码拆分的过程非常简单。

• Enhance Application Initial load增强应用程序初始负载

  自动代码拆分将通过仅加载该特定页面所需的代码来延长初始加载时间。这意味着您目录中的每个文件

  /pages 将在构建步骤中分离到自己的 JavaScript 包中。

• Perform Code Splitting at the Component Level在组件级别执行代码拆分****

  动态导入将有助于在组件级别执行拆分代码。这允许您仅加载用户正在使用的站点部分的必要代码。

4. 缓存的应用程序性能改进

Next.js提供了多种缓存机制来提高应用程序的性能并降低成本。默认情况下，Next.js自信地缓存路由和数据请求，以实现卓越的性能和成本节约。

• Data Cache 数据缓存

  缓存数据在 Web 开发中至关重要，以加快页面加载时间。幸运的是，Next.js 提供了对缓存数据的内置支持，无论是针对特定请求还是针对整个路由段。Next.js自动缓存和删除重复数据

  fetch() 默认情况下的请求。因此，如果您两次发出相同的请求，则第二个请求将重用第一个请求的结果。

• Router Cache 路由器缓存

  当 React Server 组件加载时，它会将其数据保存在称为路由器缓存的缓存中的内存中。此缓存被划分为单独的路段，用于通过跟踪以前访问的路由和预取未来的路由来增强导航体验。

• Full Route Cache 全路由缓存

  Next.js实现了全路由缓存，这是一种缓存机制，可在服务器上存储 HTML 和 React Server 组件 （RSC） 有效负载，以减少导航时的服务器请求，从而提高性能。

除了上面提到的缓存机制外，Next.js 还利用了请求记忆，这是一种与 React 和 fetch 一起使用的缓存技术。

5. 通过增量静态生成 （ISG） 减少后端负载

静态站点生成 （SSG） 是创建静态页面的常用方法，尽管它在合并动态信息方面存在限制。使用增量静态生成 （ISG） 是解决这个问题的一个很好的答案。它允许在施工过程中修改动态内容，而无需重新生成整个场地，从而增强了 SSG。ISG 是一个结合了 SSG 和 SSR 功能的混合系统。首次请求页面时，会动态生成该页面。与 SSR 不同，在 SSR 中，访问者必须等待检索数据，而 ISG 会立即提供回退页面。

• Faster Builds 更快的构建速度

  ISG 通过仅更新自上次构建以来更改的内容来加快构建速度。这对于具有动态内容的网站特别有用。

• Reduced Backend Load 减少后端负载

  使用 ISG 时，可以在构建时预渲染和缓存更多内容，从而减少对服务器端渲染的需求，从而减少服务器负载。

Next.js 是优先考虑 Web 应用程序性能的开发人员的热门选择。此外，Next.js提供了许多好处，使其成为首选。以下是一些改善开发人员体验的功能。

Error Handling 错误处理

Next.js 提供了全面的错误处理机制，允许您处理开发、服务器端和客户端错误：

• Development Errors 开发错误

  在开发过程中，运行时错误会触发仅在开发模式下可见的覆盖。修复错误将消除叠加。

• Server-side Errors 服务器端错误

  Next.js 提供默认的静态 500 页，用于处理服务器端错误，并带有自定义选项。

• Client-side Errors 客户端错误

  实现 React 错误边界以在客户端正常处理 JavaScript 错误，防止页面崩溃并启用自定义回退和错误日志记录。

通过快速刷新获得即时开发人员反馈

Next.js 有一个叫做快速刷新的功能，它允许你立即获得对 React 组件（功能）和 Hook 所做的更改的反馈。快速刷新仅更新导出 React 组件的文件的代码。这意味着，每当您在该文件中进行编辑（例如更改样式、呈现逻辑、事件处理程序或效果）时，"快速刷新"将仅更新该文件的代码，并自动重新渲染组件。使用快速刷新，您可以快速迭代并实时查看所做的更改。

Built-in SEO Support 内置 SEO 支持

搜索引擎优化 （SEO） 对于提高 Web 应用程序在搜索查询中的可发现性和相关性至关重要。实施 SEO 实践可以在 Google 或 Bing 等搜索引擎上获得更好的排名，最终提高产品的知名度。Next.js通过提供内置的 SEO 支持提供了宝贵的优势。如果您优先考虑优化应用程序的 SEO 友好性，此功能可以节省大量时间和精力。

Analytics and Monitoring 分析和监控

Next.js包括一个名为 Next.js Speed Insights 的预构建分析功能，它允许您通过各种指标评估和衡量网页的性能。您可以开始收集您的真实体验分数，而无需在 Vercel 部署上进行任何配置。此外，Next.js 还支持 OpenTelemetry 检测，这是一个开源可观测性框架，提供一组 API、SDK 和工具，用于检测、生成、收集和导出遥测数据（例如指标、日志和跟踪）。

与第三方平台集成

Next.js 是一个多功能框架，可以与其他产品无缝集成以增强其功能。Next.js 与流行的 CMS 服务（如 Contentful、Builder.io 和 Sanity）、分析服务（如 LaunchDarkly、Statsig 和 Vercel Web Analytics）以及 Salesforce Commerce Cloud、Shopify 和 BigCommerce 等商务平台无缝集成。它还与 DebugBear 等监控工具保持一致，使开发人员能够有效地构建、管理和监控Next.js应用程序。

Final Thoughts 最后的思考

许多工程师喜欢使用 Next.js，因为它提供了惊人的性能优势，例如服务器端渲染和优化的图像。它通过快速刷新和可靠的错误处理等功能提供出色的开发人员体验。此外，它与不同工具和服务的轻松集成简化了开发和分析，使Next.js成为创建高性能 Web 应用程序的理想选择。

感谢阅读这篇文章~