Next 实现 react 服务器端渲染—先睹为快

世上的事都是三十年河东，三十年河西。现在好像没三十年那么长了。前几年，前后端分离逐渐就开始流行起来，把一些渲染计算的工作抛向前端以便减轻服务端的压力，但是最近又流行回来了，vue 和 react 都给出了服务器端渲染单页应用的方案。

目标：了解 next.js 是如何实现服务器端渲染 react

基本要求：熟悉 nodejs 和 react 的 web 前端开发人员

创建项目

创建一个文件夹，然后在文件夹目录下初始化项目 npm init -y

下载项目所需要的依赖 next react react-dom

npm install next react react-dom --save

在 package.json 中添加以下脚本，分别开发用 dev 可构建项目的 build 以及启动项目 start

在项目根目录下创建名称为 pages 文件夹

在文件夹下创建 index.js 对应路由 / ，然后在文件夹下创建 about.js 对应路由为 /about，这里套路和前几天介绍 nuxt 相同。只是路由分别对应 react 和 vue 文件而已。

我们来修改 index 文件，使用 next 中提供的 Link 我们可以实现路由跳转页面

现在我们整理一下代码，把分别存在 index.js 和 about.js 中的导航栏提取出来作为组件供两个页面共用，看一看在 next 中是如何使用组件的。我们在项目下新建一个文件夹名称为 components，然后再目录下新建 Navbar.js 写组件和 react 相同，不做赘述了。

我们可以在 index 页面中引用 Navbar 组件。

进一步整理代码，在 components 文件夹下创建一个 Layout.js ，在 Layout 文件中引用 Navbar。然后在 index.js 和 about.js 引用 Layout 来代替引用 Navbar 即可。我们使用 props.children 作为占位变量作为页面可变部分。

接下来在 Layout 页面中引用 next 提供 head 标签，为了是引用 bootstrap 样式。具体做法如下图。

现在页面变得好看些了吧。

到现在为止，我们完成路由、组件和布局。接下来是导入数据

我们先来引用一个依赖，如下图

然后用 getInitialProps 初始化 props 然后将数据绑定到页面显示出来

随后会关注next ，分享更多有关 next 的资料