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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180222G01YMK00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励