前期必备知识

熟悉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的框架

如何使用

官网 https://nextjs.org/

下面用几个例子来带你们上道

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，请期待哦