随着前端技术的不断发展，越来越多的 Web 应用需要实现服务器端渲染，以提高页面性能和 SEO 的效果。在这样的背景下，Next.js 库应运而生，它是一个基于 React 的轻量级框架，提供了一种方便快捷的方式来实现服务器端渲染。
在本文中，我们将通过一步步搭建一个 SSR 应用来深入了解 Next.js 的使用方法，同时也会探讨一些与 SSR 相关的基础知识和技术细节。
简介
首先，让我们来了解一下 Next.js 的基本概念和特点。
基本概念
Next.js 是一个基于 React 的框架，它默认在服务器上进行页面渲染。在 Next.js 中，每个页面都是一个 React 组件，同时，Next.js 还提供了一些独特的组件生命周期方法，如 getInitialProps 和 getStaticProps，使开发者能够轻松地实现 SSR。
另外，Next.js 的路由系统是基于文件系统的，也就是说，每个页面都有一个对应的文件，通过文件名来映射路由。比如，文件 /pages/index.js 会映射到路由 /。
特点
Next.js 作为一个 SSR 框架，有如下特点：
- 服务端渲染：Next.js 默认会在服务器上预渲染页面，提高了页面的性能和 SEO 的效果。
- 自动代码分割：Next.js 会自动分割代码，每个页面只加载所需的代码，提升性能和用户体验。
- 简化配置：Next.js 通过约定优于配置的方式，减少了开发者的配置工作。
- 灵活的部署方式：Next.js 支持多种部署方式，如服务器部署、静态文件部署和服务器端部署等。
开始搭建
接下来，我们将一步步搭建一个 SSR 应用。本文的示例代码可以在 GitHub 中找到。
安装依赖
首先，我们需要安装 Next.js 的依赖。
npm install next react react-dom
创建首页
在项目根目录下创建一个名为 pages 的文件夹，然后创建一个名为 index.js 的文件。
-- -------------------- ---- -------
------ ----- ---- --------
----- ---- - -- -- -
------ -
--
--------- ------------
---------- -- -- ------------
---
--
--
------ ------- -----在这个页面中，我们只是简单地显示了一个标题和一段文本。
运行应用
接下来，我们使用 Next.js 自带的开发服务器来运行应用。
在 package.json 文件中添加一个运行脚本。
{
"scripts": {
"dev": "next dev"
}
}然后在终端中执行下面的命令来运行应用。
npm run dev
在浏览器中打开 http://localhost:3000，应该能够看到我们创建的首页。
修改路由
我们将首页的路由从根路由 / 修改为 /home。
在 pages 文件夹下创建一个名为 home.js 的文件。
-- -------------------- ---- -------
------ ----- ---- --------
----- ---- - -- -- -
------ -
--
--------- ------------
---------- -- -- ------------
---
--
--
------ ------- -----现在我们的页面应该可以通过 http://localhost:3000/home 打开了。
创建头部组件
现在我们需要创建一个头部组件，用于在每个页面中显示导航链接。
在 components 文件夹下创建一个名为 Header.js 的文件。
-- -------------------- ---- -------
------ ---- ---- ------------
----- ------ - -- -- -
------ -
-----
----
----
----- ---------
-----------
-------
-----
----
----- --------------
------------
-------
-----
-----
------
--
--
------ ------- -------在这个组件中，我们使用了 Next.js 内置的 <Link> 组件，它可以在客户端进行页面切换，同时也支持预加载数据，提高页面性能。
引入头部组件
现在我们需要将头部组件引入到每个页面中。
首先，在 pages 文件夹下创建一个名为 _app.js 的文件，该文件是 Next.js 的默认页面模板。在这个模板中，我们将头部组件引入，并将其显示在每个页面的顶部。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -----------------------
----- ----- - -- ---------- --------- -- -- -
------ -
--
------- --
---------- -------------- --
---
--
--
------ ------- ------然后在每个页面文件中引入 _app.js。
-- -------------------- ---- -------
------ ----- ---- --------
----- ----- - -- -- -
------ -
--
--------------
------- -- --- ----- ---------
---
--
--
------ ------- ------现在我们应该能够在每个页面中看到头部导航栏了。
预加载数据
现在让我们来探讨一下如何在页面中预加载数据。
Next.js 提供了两种预加载数据的方式，一种是使用 getInitialProps 方法，另一种是使用 getStaticProps 方法。这两种方法都可以在服务器端或客户端执行，具体执行结果取决于页面是否已经被预渲染。如果页面已经被预渲染，这两种方法将在客户端执行，否则将在服务器端执行。
使用 getInitialProps
在 pages/about.js 文件中添加 getInitialProps 方法。
-- -------------------- ---- -------
------ ----- ---- --------
----- ----- - -- ----- -- -- -
------ -
--
--------------
------- -- --- ----- ---------
---------- --- ------- ----- -- -----------
---
--
--
--------------------- - ----- -- -- -
----- --- - ----- -----------------------------------------------------
----- ---- - ----- -----------
------ - ------ --------------------- --
--
------ ------- ------在这个方法中，我们发起了一个 HTTP 请求，获取了「Next.js」GitHub 项目的星标数，并将其作为属性传递给 About 组件。这样我们就可以在页面中使用这个数据了。
使用 getStaticProps
getStaticProps 的使用方式和 getInitialProps 类似，但是它只会在构建时执行一次，将预计算的数据静态地注入到页面中。如果你的数据需要实时更新，就需要使用 getInitialProps 方法了。
-- -------------------- ---- -------
------ ----- ---- --------
----- ----- - -- ----- -- -- -
------ -
--
--------------
------- -- --- ----- ---------
---------- --- ------- ----- -- -----------
---
--
--
------ ----- -------- ---------------- -
----- --- - ----- -----------------------------------------------------
----- ---- - ----- -----------
------ - ------ - ------ --------------------- - --
-
------ ------- ------部署应用
最后，我们需要将我们的应用部署到生产环境中。
Next.js 支持多种部署方式，包括服务器部署、静态文件部署和服务器端部署等。每种部署方式都有其优缺点，可以根据具体需求进行选择。
这里我选择使用 Vercel 平台来部署应用，该平台与 Next.js 高度集成，可以一键式部署。
你也可以选择其他平台，如 AWS、GCP 等。
总结
在本文中，我们通过一步步搭建一个 SSR 应用，深入了解了 Next.js 的使用方法，同时探讨了一些与 SSR 相关的基础知识和技术细节。我们还学习了如何使用 getInitialProps 和 getStaticProps 方法来预加载数据，以及如何将应用部署到生产环境中。
希望这篇文章能够为您的学习和开发提供一些指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6501307b95b1f8cacdefe1cb