美文网首页
nextjs 入门,ssr后台服务器渲染

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

作者: lazyTai | 来源:发表于2018-09-27 17:53 被阅读503次

前期必备知识

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

相关文章

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

    前期必备知识 熟悉react,nextjs(是一个react的后台渲染框架) 目录 什么是ssr 什么是seo n...

  • 搭建Vue的SSR服务端渲染

    SSR是什么 SSR:Server Side Rendering服务端渲染,由服务器进行渲染并返回给客户端渲染完成...

  • SSR服务端渲染

    什么是SSR?,SSR有什么用? 服务端渲染(Server Side Render,简称“SSR”),服务器端直接...

  • 关于 SAP 电商云 Spartacus UI Transfer

    Angular 的 TransferState 类使服务器端渲染 (SSR) 和预渲染 (Prerendered-...

  • SSR介绍-1: 什么是SSR?

    什么是SSR? SSR是服务端渲染:在后台将vue实例渲染为HTML字符串直接返回,在前端激活为交互程序。 传统的...

  • SSR、CSR、

    1.什么是SSR和CSR  SSR(Server Side Rendering,服务端渲染),指的是页面在服务器...

  • 服务端渲染

    服务器端渲染(SSR) 学前准备 ES6 Node Vue 什么是服务器端渲染 前端渲染:html页面作为静态文件...

  • SSR的原理及好处

    什么是SSR SSR是Server Side Render简称,叫服务端渲染 在客户端请求服务器的时候,服务器到数...

  • SPA客户端渲染和SSR服务器渲染

    SPA客户端渲染和SSR服务器渲染 一、SPA 所谓SPA(single page application)就是我...

  • Next.js 初试

    title: next.js入门tag:next.js, react 序章 服务端渲染 服务端渲染(SSR: Se...

网友评论

      本文标题:nextjs 入门,ssr后台服务器渲染

      本文链接:https://www.haomeiwen.com/subject/yjtyoftx.html