likes
comments
collection
share

Nextjs 第三章 服务端渲染

作者站长头像
站长
· 阅读数 22

现在让我们检查一下这个应用程序是否按照我们期望的那样工作。这是一个 Next.js 应用程序，所以它应该是 服务器端渲染的(server side rendered) 。

这是 Next.js 的主要卖点之一：如果我们使用 Next.js 创建一个网站，网站页面会在服务器上渲染，而服务器会将 HTML 传递给浏览器。

这有 3 个主要好处:

  • 客户端不需要实例化 React 来渲染，这使得网站对你的用户来说更快。
  • 搜索引擎会对页面进行索引，而不需要运行客户端的 JavaScript。谷歌开始解决这个问题（客户端渲染），但公开承认是一个较慢的过程（如果你想获得好的排名，你应该尽可能地帮助谷歌）。
  • 你可以有社交媒体元标签，对添加预览图片，为你在 Facebook、Twitter 上分享的任何页面定制标题和描述都很有用。

让我们查看一下应用程序的源代码。 使用 Chrome 浏览器，你可以在页面的任何地方点击右键，然后按 查看网页源代源（View Page Source） 。

Nextjs 第三章 服务端渲染

如果你查看页面的源代码，你会看到 HTMLbody中的<div><h1>Home page</h1></div>片段，以及一堆 JavaScript 文件——程序打包出的。

我们不需要设置什么，SSR（服务器端渲染）已经在为我们工作了。

React 应用程序将在客户端启动，并将是一个使用客户端渲染来支持点击链接等交互的应用程序。但重新加载一个页面将从服务器上重新加载。而使用 Next.js，在浏览器中的结果应该是没有区别的——服务器渲染的页面看起来应该和客户端渲染的页面一模一样。

The app bundles

当我们查看页面源代码时，我们看到一堆 JavaScript 文件正在被加载:

Nextjs 第三章 服务端渲染

让我们先把代码放在 HTML formatter 中，使代码格式化得更好，这样我们更好地理解它:

解释
<!DOCTYPE html>
<html>

<head>
    <meta charSet="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
    <meta name="next-head-count" content="2" />
    <link rel="preload" href="/_next/static/development/pages/index.js?ts=1572863116051" as="script" />
    <link rel="preload" href="/_next/static/development/pages/_app.js?ts=1572863116051" as="script" />
    <link rel="preload" href="/_next/static/runtime/webpack.js?ts=1572863116051" as="script" />
    <link rel="preload" href="/_next/static/runtime/main.js?ts=1572863116051" as="script" />
</head>

<body>
    <div id="__next">
        <div>
            <h1>Home page</h1></div>
    </div>
    <script src="/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js?ts=1572863116051"></script>
    <script id="__NEXT_DATA__" type="application/json">{"dataManager":"[]","props":{"pageProps":{}},"page":"/","query":{},"buildId":"development","nextExport":true,"autoExport":true}</script>
    <script async="" data-next-page="/" src="/_next/static/development/pages/index.js?ts=1572863116051"></script>
    <script async="" data-next-page="/_app" src="/_next/static/development/pages/_app.js?ts=1572863116051"></script>
    <script src="/_next/static/runtime/webpack.js?ts=1572863116051" async=""></script>
    <script src="/_next/static/runtime/main.js?ts=1572863116051" async=""></script>
</body>

</html>

我们有 4 个 JavaScript 文件被声明要在 head 中预加载，使用 rel="preload" as="script":

  • /_next/static/development/pages/index.js (96 LOC)
  • /_next/static/development/pages/_app.js (5900 LOC)
  • /_next/static/runtime/webpack.js (939 LOC)
  • /_next/static/runtime/main.js (12k LOC)

这告诉浏览器在正常的渲染流程开始之前，尽快开始加载这些文件。如果没有这些，脚本的加载会有额外的延迟，这就提高了页面的加载性能。

然后这 4 个文件被加载到 body 的末尾，还有/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js（31k LOC），以及一个为页面数据设置一些默认值的 JSON 片段:

解释
<script id="__NEXT_DATA__" type="application/json">
{
  "dataManager": "[]",
  "props": {
    "pageProps":  {}
  },
  "page": "/",
  "query": {},
  "buildId": "development",
  "nextExport": true,
  "autoExport": true
}
</script>

所加载的 4 个 bundle 文件已经实现了一个叫做代码分割(code splitting)的功能。index.js 文件提供了 index 组件所需的代码，它为/路由提供服务，如果我们有更多的页面，我们将为每个页面提供更多的 bundle，然后只有在需要时才会被加载——为页面提供一个更高性能的加载时间。

右下角的那个图标是什么？

你看到页面右下方那个像闪电的小图标了吗？

Nextjs 第三章 服务端渲染

如果你把它悬停，它就会显示 "Prerendered Page"（预渲染的页面）:

Nextjs 第三章 服务端渲染

这个图标当然只在 开发模式下可见，它告诉你这个页面符合自动静态优化的条件，这基本上意味着它不依赖于需要在调用时获取的数据，它可以在构建时（当我们运行npm run build时）预先渲染并构建为静态 HTML 文件。

下一步可以通过页面组件上没有 getInitialProps()方法来确定。

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

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

Nextjs 第三章 服务端渲染

这是一个编译指示器，当你保存一个页面，Next.js 正在编译应用程序，然后热代码重载启动，自动重新加载应用程序中的代码时，它就会出现。

这是一个非常好的方法，可以立即确定应用程序是否已经被编译，你可以测试你正在做的一部分。

转载自:https://juejin.cn/post/7379633972245643299
评论
请登录