前期必备知识
熟悉react，nextjs（是一个react的后台渲染框架）
目录
- 什么是ssr
- 什么是seo
- nextjs是什么
- 如何使用
- 界面显示+路由跳转
什么是ssr
ssr,服务器端渲染(SSR: Server Side Rendering),react前端做好的界面，后台把界面渲染成html之后，在传给前台，这样子有什么好处。
1.优化seo
2.加快渲染速度，界面显示快一点
什么是seo
SEO（Search Engine Optimization）:汉译为搜索引擎优化。是一种方式:利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益；SEO包含站外SEO和站内SEO两方面；为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，还会使搜索引擎中显示的网站相关信息对用户来说更具有吸引力。
简单的来说就是提高你的网站在百度上的排名
nextjs是什么
react 用来做ssr的框架
如何使用
下面用几个例子来带你们上道
1.界面显示+路由跳转
//package.json
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}
填写路由,路由都写在pages文件夹下面
/pages/index.js
export default () => (
<div>
<p>This is the index page</p>
</div>
)
/pages/about.js
import Router from 'next/router'
export default () => (
<div>
<p>This is the about page</p>
<button onClick={()=>{Router.push("/index")}} ></button >
</div>
)
router就可以跳转界面啦
Router.push("/index")
以上是最简单的路由跳转+界面显示
2.后台控制路由
上篇对vue的Nuxt.js没有说到express
那么这篇react的nextjs我们来说一说sever.js如何配置
//server.js
const express = require('express')
const next = require('next')
const port = parseInt(process.env.PORT, 10) || 3888
const dev = process.env.NODE_ENV !== 'production'
console.log(process.env.NODE_ENV)
console.log({dev})
const app = next({dev})
const handle = app.getRequestHandler()
app.prepare()
.then(() => {
const server = express()
/*路由控制*/
server.get('/setting/design', (req, res) => {
return app.render(req, res, '/settingDesignList', req.query)
})
server.get('/', (req, res) => {
return app.render(req, res, '/index', req.query)
})
server.get('*', (req, res) => {
return handle(req, res)
})
server.listen(port, (err) => {
if (err) throw err
console.log(`> Ready on http://localhost:${port}`)
})
})
修改package.json
//package.json
"scripts": {
"dev": "cross-env NODE_ENV=development node server.js",
"build": "cross-env NODE_ENV=production next build",
"start": "cross-env NODE_ENV=production node server.js"
},
使用server.js的好处，控制路由url，比如/setting/design我们就能控制到pages下面的settingDesignList.js中
那么demo就放到我的github上：https://gitee.com/lazytai/next-with-antd
好了就到这里吧，下一篇要见es6还有babel，请期待哦
