next. js

When working on a Next.js app, do you see that little icon at the bottom right of the page, which looks like a lightning?

在使用Next.js应用程序时，您是否在页面右下方看到一个小图标，看起来像闪电？

If you hover it, it’s going to say “Prerendered page”:

如果将其悬停，它将显示“ Prerendered page”：

This icon, which is only visible in development mode of course, tells you the page qualifies for automatic static optimization, which basically means that it does not depend on data that needs to be fetched at invokation time, and it can be prerendered and built as a static HTML file at build time (when we run npm run build).

该图标( 仅在开发模式下才可见)告诉您该页面符合自动静态优化的条件，这基本上意味着该页面不依赖于在调用时需要获取的数据，并且可以按以下方式进行预渲染和构建：在构建时(当我们运行npm run build )的静态HTML文件。

Next can determine this by the absence of the getInitialProps() method attached to the page component.

Next可以通过缺少附加到页面组件的getInitialProps()方法来确定这一点。

When this is the case, our page can be even faster because it will be served statically as an HTML file rather than going through the Node.js server that generates the HTML output.

在这种情况下，我们的页面甚至可以更快，因为它将作为HTML文件静态提供，而不是通过生成HTML输出的Node.js服务器提供。

Another useful icon that might appear next to it, or instead of it on non-prerended pages, is a little animated triangle:

可能会出现在它旁边的另一个有用图标，或者代替它出现在非优先页面上的是一个动画三角形：

This is a compilation indicator, and appears when you save a page and Next.js is compiling the application before hot code reloading kicks in to reload the code in the application automatically.

这是一个编译指示符，当您保存页面并且Next.js正在编译应用程序之前，此提示会在热代码重新加载开始之前自动显示在应用程序中。

It’s a really nice way to immediately determine if the app has already been compiled and you can test a part of it you’re working on.

这是一种非常好的方法，可以立即确定该应用程序是否已被编译，并且您可以测试正在处理的应用程序的一部分。

翻译自:

next. js