了解全局——Next.js
了解全局——Next.js
Next.js 是用于 React 应用程序的 Web 开发框架。它的主要优点是内置支持服务器端渲染和自动代码拆分，无需任何配置。
传统的纯 React：缺点
一个典型的 React 应用程序在客户端呈现。这种方法有两个主要缺点：
- 浏览器必须先呈现站点，然后才能向用户显示。这包括将 React 代码转换为 HTML，这需要一些时间才能让用户看到任何东西。
- 搜索引擎爬虫必须在页面被索引之前执行 Javascript 代码。这可能会导致部分索引，从而导致更差的 SEO 排名。
Next.js 的救援
Next.js 框架提供服务器端渲染，无需任何配置。服务器渲染的 HTML 页面将被发送到客户端，让他们立即看到页面的主要内容。因此，事件处理程序等可以附加到“干”HTML，使其具有交互性。这个过程称为水合作用。
Example of hydration — Receiving server rendered HTML and attaching Javascript event handlers
渲染选项
关于渲染过程，Next.js 有以下选项：
- 预渲染：将 React 代码转换为 HTML 发生在服务器端。这是默认选项。
- 静态站点生成：内容在构建时生成一次，并在每次请求时重复使用。 HTML 存储在 CDN 中，CDN 基本上是一组分布式服务器，可快速向用户提供内容。
- 服务器端渲染：HTML 是在每个客户端请求的服务器上生成的。这对于交互式内容很有用。
- 增量静态再生：在后台重新生成单个页面。这种方法可以看作是静态站点生成和服务器端渲染之间的中间地带。 - 客户端渲染：在某些情况下，客户端渲染可能仍然是首选。
可以逐页选择最合适的呈现选项。
其它功能
Next.js 的一些额外好处是基于文件系统的路由和自动代码拆分。
基于文件系统的路由意味着放置在 页面 目录将自动成为一条路线。例如，一个 花式.js 文件中 页面 文件夹，可在以下位置访问 mydomain.com/fancy .
自动代码拆分会将应用程序包拆分为多个较小的块，每个块用于不同的 URL。这样，只加载当前页面所需的代码，从而加快页面加载速度。由于基于文件系统的路由方法，Next.js 将为每个页面创建一个最小的 Javascript 包。
The project structure of Next.js
关于“大图”
The Big Picture 是一个帮助您掌握 Web 开发中所有主要概念的项目。本系列中发布的概念将成为我目前正在构建的应用程序的一部分。第一个版本将是一个移动应用程序，但我也计划构建一个网络版本。如果您对该项目感兴趣，请随时通过以下方式与我联系 电子邮件 或者 领英 .如果您对本文的内容有任何意见，或者您对以后的文章有建议，同样适用。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
