世上的事都是三十年河东，三十年河西。现在好像没三十年那么长了。前几年，前后端分离逐渐就开始流行起来，把一些渲染计算的工作抛向前端以便减轻服务端的压力，但是最近又流行回来了，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 的资料
网友评论