Next.js 的崛起：为什么它是现代网站的首选全栈框架
在选择前端框架时，可靠性对我的客户来说是至关重要的。尽管探索了 SvelteKit 等选项，但“为什么选择 Next.js？”仍然是一个常见的问题。在本文中，我将阐述 Next.js 为何脱颖而出成为可靠的选择以及它的光明前景。
我的自由职业客户经常会问哪个前端框架最好。他们 不想要最新的潮流，他们想要可靠的东西。我研究过 SvelteKit等新选择，但 Next.js 始终名列前茅。问题不在于最新和最好，而在于 选择经过验证和可靠的。在本文中，我们将深入探讨我押注 Next.js 的主要原因 以及我对其未来持乐观态度的原因。
2 其他专家意见
命中注定，我不是唯一一个谈论 Next.js 的人。最近，Kent C. Dodds发表了一篇帖子《为什么我不会使用 Next.js》 ， Vercel 的开发者体验副总裁Lee Robinson对此发表了回应《为什么我要使用 Next.js》。这两篇文章都值得一读，我强烈建议你也看看。
统一采用：客户和开发人员对 Next.js 的信任
Next.js 在GitHub上获得了 113k 颗星 ⭐ ，毫无疑问已成为 Web 开发领域的领先框架。这些星号可以 在一定程度上表明开发者社区的普遍赞赏和兴趣。虽然它并不是衡量框架质量或成功的绝对标准，但它确实暗示了 Next.js 在同行中获得的关注度和吸引力。
然而，在数字世界中，光有知名度还不够，赢得行业领导者的信任才是关键。Next.js 做到了这一点。
《华盛顿邮报》、 **Loom和 Netflix**等主要参与者 已将 Next.js 集成到其技术堆栈中，展示了其处理大规模、高流量平台的能力。甚至 拥有 1 亿 YouTube 订阅者和庞大社交媒体足迹的内容创作者 MrBeast也使用 Next.js 建立了自己的店面。再加上
TikTok、 Twitch和 Notion等有影响力的平台，很明显 Next.js 不仅仅是一个框架；它是 数字革命前线企业和创作者值得信赖的合作伙伴。
性能与 SEO：Next.js 采用背后的驱动力
服务器端与客户端渲染。插图来自 Next.js
Next.js 刚出现时，就为开发者提供了革命性的选择： 在服务器上渲染页面还是直接在浏览器中渲染页面，为 Web 开发的新时代铺平了道路。
客户端渲染与服务器渲染
客户端渲染是指浏览器使用 JavaScript 生成并更新网页，这通常会导致动态交互。相比之下，服务器渲染是指服务器创建初始页面，向浏览器提供完整格式的页面，从而缩短初始加载时间。
随着 Next.js 13 的推出，游戏规则发生了更大的变化。开发人员现在可以 逐个组件地决定每个组件是否应在服务器上或客户端上呈现。这种微调可确保最佳性能和最大灵活性。为了更清楚地了解何时使用每种策略， Next.js 文档 提供了一个有见地的表格。
Next.js 中的渲染策略
Next.js 提供了 三种主要的渲染策略，每种策略都对 SEO 和性能有着独特的影响：
- 静态渲染： 在构建时创建页面，缓存并通过内容分发网络 (CDN) 分发。由于其可预测性和快速加载时间，它 非常适合不经常更改的内容，例如博客文章。
- 动态渲染： 根据用户请求生成页面，方便提供个性化内容。虽然这提供了 自定义用户体验，但速度可能会稍慢一些，可能会影响 SEO。但是，通过适当的调整，可以保持最佳性能。
- 流式传输： 服务器分段逐步渲染 UI。此方法可以增强感知性能，让用户 在完整内容渲染完成之前就能与页面的某些部分互动 — 对于依赖较慢数据提取的内容而言，这绝对是一个优势。
在最新的 Next.js 14 Conf 上，Vercel 首席执行官 Guillermo Rauch 更详细地解释了不同的渲染策略，并宣布了部分渲染 (Partial Rendering)的预览版。
我们想分享我们正在为 Next.js 开发的部分预渲染的预览，这是一种针对动态内容的编译器优化，具有快速的初始静态响应。
做出正确的选择：Edge 和 Node.js 运行时
在快速发展的 Next.js 世界中，开发人员面临着更多选择，这些选择不仅影响渲染，还影响性能和 SEO 的基础。 两个核心运行时引领着这一产品，每个运行时在这些领域都有独特的优势。
- Edge Runtime：Edge Runtime 专为超快速全球内容交付而设计，利用分布式服务器。其优势（双关语）在于 即时、低延迟的用户体验，这可以大大提高网站性能和用户参与度。虽然它的速度是一项 SEO 资产，但与 Node.js 相比，其有限的功能范围可能需要开发人员根据内容需求进行平衡。
- Node.js 运行时：作为 Next.js 的基石，Node.js 运行时为 广阔的生态系统和 API打开了大门。虽然它的启动时间可能落后于 Edge，但它提供了丰富的功能，可以显著增强网站动态，这对于富含 SEO 的内容和复杂的 Web 应用程序至关重要。
通过使 运行时选择与您的目标保持一致，您可以优化Next.js 项目的性能和搜索可见性。
React 服务器组件的强大功能
React 服务器组件 是这个新时代的关键，它使 Next.js 开发人员能够制作 直接在服务器上渲染的 UI 组件。这带来了显着的 SEO 和性能优势：
- 高效数据获取： 通过使数据检索更接近其源，它可以最大限度地减少客户端请求并加速获取过程。
- 增强的安全性： 确保令牌和 API 密钥等敏感详细信息在服务器上保持安全。
- 减少捆绑包大小： 通过将大型依赖项保留在服务器端，客户端的 JavaScript 捆绑包大小被最小化 - 这对于互联网速度慢或设备基本的用户来说是一种福音。
- 优化初始页面加载： 在服务器上呈现 HTML，让用户可以立即查看内容，而无需等待客户端呈现。
- SEO 和可共享性提升： 为搜索引擎和社交平台提供完全呈现的 HTML，改进索引和内容预览。
加载 UI 和流式传输：Next.js 对增强用户体验的答案
在当今的网络环境中，用户体验才是王道。内容加载的任何延迟都可能 降低参与度或转化率：
沃尔玛发现， 页面加载时间每提高1 秒 ，转化率就会提高 2 %。
意识到这一点，Next.js 引入了该 loading.js 约定，并与 React Suspense 结合，以提供有意义的加载 UI。这可确保 用户 在特定路线段的内容准备就绪时立即看到加载状态。
流式传输使这一功能更上一层楼。通过在 UI 片段准备就绪时从服务器发送它们， 用户甚至可以在页面渲染完成之前开始浏览页面的某些部分。
流式传输集成到 Next.js App Router 中，可改善初始页面加载和依赖于较慢数据提取的 UI。结果如何？ 即使在内容繁重的页面（如产品评论）上，也能为用户提供及时反馈。
利用这些工具，开发人员可以设计加载 UI 并策略性地流式传输路线部分， 从而保证最佳的用户体验。
如果您想以交互方式体验这些功能，请查看这个精彩的 Next.js 14 App Playground 演示。
内置优化
不止于此。其核心是 内置优化 ，可确保您的图像、字体和脚本经过微调，以获得最佳用户体验。这些增强功能专门针对核心 Web 指标量身定制，可确保用户每次访问都能获得最佳体验。
使用以下方法优化图像 next/image
图像是现代网页设计的基石，通常决定着用户的参与度和感知度。Next.js 组件认识到了图像的关键作用， 并 Image 提供 了一系列旨在增强性能和用户体验的优势：
- 最佳尺寸：通过自动提供正确尺寸的图像来满足不同设备显示的需求。
- 现代格式：采用 WebP 和 AVIF 等尖端图像格式，确保在减小文件大小的同时实现高质量。
- 视觉稳定性：通过确保图像在加载时保持其分配的空间来防止破坏性的布局转变。
- 智能加载：实现本机浏览器的延迟加载，确保仅在图像即将进入视口时才获取图像。
- 增强的用户体验：可选的模糊占位符在图像加载时提供平滑的过渡。
- 无与伦比的灵活性：可以即时调整大小，即使对于外部托管的图像也是如此。
最后修改于 2025-02-11