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 的资料