具有单页应用程序功能的静态网站生成？ 这就是接下来的内容（.js）

自从2013年首次发布以来，React已成为一个非常流行的前端框架。在我们的2020开发人员调查中，它既是第二受欢迎的网站框架，也是第二受欢迎的Web框架。但是它主要产生单页应用程序（SPA），并且可能给每个页面带来各种依赖。寻找更简单的多页面设置的开发人员已转向静态站点生成器（SSG），该站点生成器需要降价（通常使用其他模板语言）并构建可以部署到Web服务器的完整站点结构。随之而来的是Next.js。

它是两种样式的混合，允许您预渲染仍包含React提供给站点的所有客户端计算的页面（甚至页面上的组件）。在9.5版中，Vercel使Next变得更加通用，允许部分构建仅更新某些已更改的页面，轻松地逐步采用Next.js，以及一系列对开发人员友好的更新。

我与Vercel首席执行官Guillermo Rauch和Next.js开发负责人Tim Neutkens进行了交谈，讨论了此版本带来的新功能，Next.js的下一步功能以及他们的方法如何帮助越来越快的网络用户保持在线状态。

如果您想了解更多信息，那么Next.js用户会议将于10月27日举行。

注意：此对话已经过编辑，以保持清晰度和长度。

赖安：好吧。因此，对于不认识的人，您能给我一些有关Next.js的概述吗？

蒂姆：这是一个网络框架，可让您利用Facebook几年前开源的称为React的技术来构建网站和应用程序。 React本身是一个视图层，因此它允许您编写组件并使它们相互交互，但是它并没有涵盖您要投入生产所需设置的所有这些不同内容。服务器端渲染，编译，转译，使现代代码在较旧的浏览器中运行（填充，优化所有这些功能）之类的事情。这正是Next可以帮助的。它为您提供了一组效果很好的默认设置。

Ryan：您的网站将其描述为单个站点生成器和完全渲染的服务器端动态系统之间的中间地带。您最喜欢的地方是什么？

蒂姆：Next.js允许您预渲染页面。它在构建时使用静态网站生成在服务器上创建HTML，或者在服务器端使用运行时呈现。接下来，您可以将它们混合在一起。与大多数其他框架不同，您不受束缚，哦，我将完全静态生成我的应用程序。相反，您可以在服务器端渲染某些页面，并静态生成某些页面。

在新版本中，我们可以更新这些静态生成的页面，而不必运行新的构建，从而重新构建整个应用程序。

瑞安：对。这是开发新产品的好机会。您如何呈现所有内容而又无需再次构建整个Web网络平台或网站？

吉列尔莫：当您使用静态网站生成器时，您将在构建时创建一堆HTML文件。但是从技术上讲，您也可以对服务器端渲染执行相同的操作，对吗？很多人在服务器端渲染然后缓存，所以技术是相似的。我想使用的隐喻是静态生成在构建时正在运行服务器端渲染。网站上线之前，您需要做一些工作。

Next.js共享相同的基础技术和基础结构来进行静态生成和服务器渲染。开发人员可以选择在构建时预渲染其最重要的页面，也可以选择在运行时按时预构建一些页面。

如果非技术人员只想使用Next.js对某个页面的内容进行更改，则他们可以预览然后提交更改。我们一次重新生成一个页面，而不是整个网站。

对于像《华盛顿邮报》这样的客户，他们拥有数十万个故事。动态更改和更新页面的能力成为功能站点和非功能站点之间的区别。

Ryan：对于像《华盛顿邮报》这样的动态页面，它们的页面两侧和底部都有很多变化的内容。那会自动改变吗？是否定期进行预渲染？

Guillermo：Next.js的一个非常酷的好处是，除了在构建时或在边缘进行渲染（正好在服务器端渲染时）之外，您仍然可以在客户端拥有React的全部功能。

Next.js允许您将计算分离并放置到任何地方。与动画，悬停效果，点击和预提取等互动时，您可以在设备上进行计算。您可以将计算放在边缘以便及时渲染。

您可以在构建时进行计算。您可以在网站访问量大增之前进行操作。例如，当有人访问《华盛顿邮报》时，动态渲染旧金山的天气。显然，您不会为每个访问者预先渲染旧金山的天气，尤其是当他们像来自纽约的Ryan那样访问时。

因此，您具备了React和React挂钩，React生命周期，React状态的全部功能，可以在客户端上增加动态性。

Ryan：客户端的渲染— Next.js的新功能吗？

吉列尔莫：客户端一直是规范。当第一次出现react时，人们严格将其用于单页应用程序。这实际上是促使我们创建Next.js的原因。我们就像，您将失去SEO。您将失去性能，因为现在您要在设备上渲染所有内容。您可以提前渲染一些，然后与其他人共享。

我们还担心设备上的JavaScript处理功能与我的iPhone不同的新兴市场。在客户端渲染所有内容对它非常有害。这是世界上增长最快的互联网用户群体。

Next.js出来首先进行服务器渲染。但是后来我们意识到，世界上出现了非常有趣的用户群体，尤其是在Jamstack生态系统周围。他们还希望拥有完全静态的页面，句号。他们不想打服务器。只是经过预先计算的纯HTML。出现混合的想法是因为我们意识到我们不必在一个渲染模型和另一个渲染模型之间进行选择。有时，它会涉及到特定页面。然后在9.5中，我们添加了以下功能：在运行时，一旦您部署了站点，便可以添加新的静态页面或刷新它们。我们称这种增量静态生成。

瑞恩：听起来您在各个页面上都允许很多生成点。 9.5还带来了什么？

蒂姆：我们试图集中精力解决人们遇到的许多常见问题。一些看似很小的更改会产生很大的影响，例如自动重定向尾部斜杠，然后处理该行为，以防您的URL中出现尾部斜杠。

另一个是允许您设置基本路径。以前，可以在域的子路径上托管Next应用程序。假设您最初只想在文档中采用Next。您可以将其托管在/ docs上，但是很难在服务器路由/ docs，客户端必须处理/ docs前缀以及所有这些内容的情况下，将所有这些不同的部分协同工作。所有链接必须以/ docs为前缀。如果您忘记给它加上前缀，则会有随机的404。

现在在9.5中，您将获得此基本路径选项，如果将其设置为/ docs，它将自动在/ docs上投放正确的资产，然后自动为所有URL加上前缀。您不必考虑，嘿，我想将/ docs更改为其他URL，因为我们正在移动网站。您无需考虑所有这些不同的前缀或在何处设置它们。

吉列尔莫（Guillermo）：这是更广泛倡议的一部分。我们称为重写的另一个功能是关于Next.js的逐步采用。自最初发布以来，我们已经看到各种规模的站点都采用了该技术，但现在我们已经看到了人们对从React应用程序或自家开发的框架迁移到堆栈的兴趣他们厌倦了维护。

大多数团队都不想在一夜之间完成全部重写。众所周知，该行业非常规避风险，对采用技术保持谨慎。您可以一次开始一页，也可以一次开始一页子树。在Tim给出的示例中，我们决定针对网站的特定部分，将其完全替换为新的Next.js应用。我要托管`/ docs`和页面的子树。

您可以执行的另一种方法是使用添加的重写选项，其中Next.js将处理您在pages目录中定义的页面。例如，假设我已定义“ about.js”，这意味着我已注册为“ / about”路线。然后，您可以说其他所有内容，请转到旧堆栈。

这可以实现无花果扼杀器模式，您可以在其中继续向Next.js添加页面。访问者首先访问Next.js，如果此页面位于Next.js目录中，则将其加载。否则，访问者将转到旧堆栈。您为团队提供了采用现代技术的渐进式协作方式，同时降低了转换的风险。它并排显示了更改，并衡量了两个堆栈的客户端和服务器端性能。在很多情况下，我们看到了非常好的结果。最终，许多应用程序成为一个Next.js应用程序。

瑞安：这是让他们毫无危险地将脚趾伸入水中的一种简便方法。如您所说，React主要用于单页面应用程序。要使Next.js不再是单页应用程序框架，您需要做什么？

蒂姆：当您开始构建Next.js应用程序时，您从pages目录开始。您在其中创建的每个值都会有一条不同的路线，这可能是一条固定路线，例如映射到/ about的about.js或一条动态路线。

如果您要进行动态细分，则也可以这样做。这听起来很简单，但是它允许我们创建一个多页面架构，其中每个页面本身几乎都是React应用程序内的一个子应用程序。这意味着每个页面都将成为一个单独的包；它是默认情况下的代码拆分。

如果您要导入的内容非常大，例如一个1兆字节的NPM库，那么它不会影响应用程序中的所有其他页面。在构建React应用程序时，您必须相当清楚要导入的内容以及它将如何影响应用程序的其余部分。您将在初始页面加载时为应用程序中的每个路由发送代码。假设您打开一个网站，该网站有React，但使用自定义路由器构建。它会发送仪表板以及所有设置页面以及所有其他信息。但是您不希望在最初的营销页面上看到它，对吗？

吉列尔莫：开发人员必须非常清楚他们交付给客户端的JavaScript数量。之所以有些偏执，是因为它们投放的JavaScript越多，使它们成为最重要的网络要素的速度就越慢，例如普通用户与页面互动的时间。当他们按下商店商品上的“购买”按钮时，该商品就能真正起作用并迅速做出响应吗？如果我点击带我穿Lululemon裤子的广告（我以Lululemon的示例为例，因为它们使用Next.js），那么我只想加载渲染这些裤子所需的代码。

在这种情况下，裤子的渲染已经在边缘的缓存中完成了。因此，所有结构，页面，画廊，轮播，价格，其中大部分来自预渲染的页面。其他一些个性化设置可能会在最后一英里发生，但是在大多数情况下，页面的很多结构都是预渲染的。当我按下“购买”按钮时，这必须非常快，因为否则，我不会卖裤子。 Next.js为该团队自动完成了很多工作，因为我们为他们提供了这种具有多个页面入口点的体系结构。该框架知道如何通过代码将客户端的JavaScript分成几小束，并自动从中提取常见的束。

从呈现管道的角度来看，不仅是代码拆分，而且还是，我们可以呈现React将在客户端中运行的代码。我们可以在边缘执行它。

瑞恩：因此，您可以构建许多小的预渲染构建块并一点一点地组装页面。 9.5还有哪些其他新功能？

蒂姆：我们还没有介绍的一件事就是我们改进了快速刷新核心。反应快速刷新使您可以在进行编辑时保留状态，并且操作可靠。这意味着，在React中，您具有可以保留在组件内部的状态。假设您有一个标签栏，您可以在其中单击不同的标签。状态将保留在组件内部。快速刷新允许您执行的操作是，单击此选项卡，对代码进行了一些更改，并且将在适当的位置进行更新，但不会将该组件重置为其初始状态。

编辑时，该标签保持打开状态。快速刷新涵盖了开发时间的改进。更新后，我们会进行适当的更改，因此您不必一直刷新浏览器。但是，如果您要引入某种错误怎么办？您在应用程序中的某处打错了文字，然后突然崩溃了。

在9.5中，您会得到一个非常好的消息，说，这是您搞砸的确切行。我们做了一些额外的改进以帮助开发人员。这也是一项持续的工作。我们发现任何对工程师和开发人员无济于事的错误，我们正在予以改善。

吉列尔莫（Guillermo）：在JavaScript世界中，这是一种动态的语言，这是一个难题。开发人员总是在香草JS之上添加语言，因为很多人都希望新的语法能够向下编译并得到浏览器的支持，或者他们在顶部添加TypeScript。然后，在TypeScript之上，您将拥有React特有的所有语法，即JSX，它使您可以将类似HTML的标签嵌入到JS文件中。语言本身具有超级动态性和通用性。在世界上，准确的错误实际上是罕见的。

确定代码位置-您是否有有意义的堆栈跟踪？有趣的是，它仍在与React团队共同努力。为其模板组件的堆栈跟踪提供越来越好的堆栈跟踪是一项即将到来的功能，因此您可以准确了解在渲染管道中的哪个位置发生了某些错误。

真正整洁的地方-这就是该生态系统的优势所在-这种快速刷新技术非常快。保存后，大约100毫秒左右即可在Web浏览器上看到更改。这为开发人员提供了一定程度的流程，并在他们正在考虑的内容和正在从事的工作之间保持联系，并具有不断迭代的能力。

它几乎是其他任何堆栈所无法比拟的。 Swift UI开始朝着这个方向发展。但是React给了我们前所未有的东西。人们过去经常进行实时重新加载。当它检测到更改时，将刷新整个页面，等效于按F5或刷新按钮。现在，React知道什么状态正在改变，组件图的哪些叶子正在改变。快速刷新技术使代码更新非常精细地在Web浏览器中进行。因为它是如此的精细，所以我们只做很少的工作。我们正朝着这个世界发展，我们正在谈论甚至低于100毫秒。我们可以在10、15、20毫秒内显示您的更改。这一切都归结为在屏幕上制作补丁程序，因为开发人员会尽快在本地设备上进行尽可能细致的更改。

瑞安：这是很多新东西。还有什么值得一谈的吗？

吉列尔莫：当然可以。我们已经添加了对Webpack 5的实验性支持。Tim一直在致力于这一工作，我们不仅在改善开发人员体验（在本地设备上更新内容的速度有多快），还包括在推送时以及CI / CD层会发生什么开始建立网站？

Next.js在很大程度上已经抽象出捆绑技术。您无需配置Webpack。到目前为止，Next.js一直在使用Webpack 4，但我们已经能够将大多数用户的Webpack升级到Webpack5。这是目前的试验性标志，但Tim可以谈论它具有巨大的性能优势。

我们非常激动，它将改变Next.js的性能。

蒂姆：Webpack 5目前处于测试阶段。在持续开发中，它已经处于测试阶段一年甚至两年以上。新版本的表面积非常大，因为它旨在解决当前Webpack稳定版本中的许多不一致问题。

当前在Webpack中，构建不是确定性的。这意味着，如果您使用相同的完全相同的代码库并运行两次Webpack，则不会输出相同的完全相同的JavaScript包。如果您每次都要重新计算，通常这不是问题，但是当您要缓存某些内容时，这将成为问题。但是我希望他们只重新计算在我的代码中更改的位。在这里，确定性输出会产生很大的变化。您无法将其缓存到不确定的输出中，因为每次构建时输出都会变化。

Webpack 5的输出完全是确定性的，它添加了以前缺少的该缓存层。实际上，根据您的应用程序，您可以将构建速度提高25倍。在更大的应用上，它将产生很大的影响。

如果Next.js应用程序中有许多不同的页面，则必须编译所有这些页面。当前，每次运行构建时，它都会缓存一些工作，但不是全部。启用Webpack 5后，您可以在CI环境和开发中更快地运行构建。

在开发中，这将极大地帮助开发人员体验。 当您启动Next.js实例时，入门会更快。 您昨天所做的所有工作仍被缓存。

Next.js应用程序的部署将大大加快。 它只需要重新计算已更改的位。 通常，您不会对应用程序中的每个页面进行更改。 您只需要更改几页或一页，甚至只是改正错字。 在这种情况下，您希望构建速度更快。 它即将发布，因此我们对此感到非常高兴。

瑞安（Ryan）：您是否想挑逗将来会发生的一些有趣的事情？

蒂姆： 我们计划在10月27日举行一次Next.js用户会议，目前已经有50,000多个注册。 我们还将在会议上宣布许多非常酷的新功能。