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