nextjs 入门,ssr后台服务器渲染

前期必备知识

熟悉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 () => (
  

This is the index page

) /pages/about.js import Router from 'next/router' export default () => (

This is the about page

)

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

你可能感兴趣的:(nextjs 入门,ssr后台服务器渲染)