关于react.js:React-SSR

意识 SSR

1. 为什么须要 SSR 呢?

• 单页面富利用的局限:

  • 之前咱们开发的应用程序，如果右键间接查看源代码，能够看到下面简直没有什么内容
  • 然而咱们为什么能够看到大量的内容呢？
  • 因为当咱们申请下来动态资源之会执行 JS，JS 会去申请数据，并且渲染咱们想看到的

• 然而这个过程存在两个问题：

  • 问题一：首屏显示速度较慢
  • 问题二：不利于 SEO 优化

• 如何解决这个问题呢？

  • 应用服务端渲染

2. 意识 SSR

• SSR（Server Side Rendering，服务端渲染），指的是页面在服务器端曾经生成了实现的 HTML 页面构造，不须要浏览器解析
• 对应的是 CSR（Client Side Rendering，客户端渲染），咱们开发 SPA 页面通常依赖的就是客户端渲染
• 晚期的服务端渲染包裹 PHP、JSP、ASP 等形式，然而在目前 “ 前后端拆散 ” 的开发模式下，前端开发人员不太可能再去学习 PHP、JSP 等技术来开发网页
• 不过咱们能够借助于 Node 来帮忙咱们执行 JavaScript 代码，提前完成页面的渲染

3. 同构

• 什么是同构？
• 一套代码既能够在服务端又能够在客户端运行，这就是同构利用；
• 同构是一种 SSR 的状态，是现带 SSR 的一种表型模式；
• 当用户发出请求时，先在服务器通过 SSR 渲染出首页的内容；
• 然而对应的代码同样在能够在客户端执行；
• 执行的目标包含事件绑定等以及其它页面切换时也能够在客户端被渲染；
• 冀望在服务器上拿到 html 页面并发送申请，之后的的后果间接响应给客户端

之前是由浏览器执行的 -》当初由 node.js 来实现
    index.html
    1. 申请 js 文件
    2. 执行 js 文件
    3.ajax 申请
    4. 继续执行 js 遍历数据, 生成 html 构造

Next.js

1. 应用 React SSR

• 应用 React SSR 次要有两种形式:

  • 形式一: 手动搭建一个 SSR 框架;
  • 形式二: 应用曾经成熟的 SSR 框架: Next.js

• 装置 Next.js 框架的脚手架:

  • npm install -g create-next-app

• 创立 Next.js 我的项目

  • create-next-app next-demo
• package.json文件↓

2. 首页的展现

• Next.js默认曾经给咱们配置好了路由映射关系：
• 门路和组件的映射关系；
• 这个映射关系就是在 pages 中配置相干的组件都会主动生成对应的门路；
• 默认 page/index.js 是页面的默认门路：

3. 对于页面和页面跳转

• 定义 About 页面

• 从 Home 页面跳转到 About 页面

4.Layout 组件

• 咱们发现 home 和 about 是两个互相独立的组件:

  • 如果他们有一些公共的内容: 比方头部、尾部都是一样的，是否每个中央都须要写一遍呢？

• 有两种解决方案：

  • 计划一: 自定义一个 Layout 的组件，将公共的内容放到 Layout 中；
  • 计划二: 在 _app 中编写公共局部的内容；

5.Next.js 反对各种款式

• 形式一: 全局款式引入
• 形式二: module.css
• 形式三: 默认集成styled-jsx

<style>{`
  p {color: #f879c6;}

`}</style>

• 形式四: 其余 css in js 计划，比方 styled-components

  • styled-components 在 Next 服务器上渲染的的问题：

    • 组件应用了 styled-components 显示是没有问题的，这是在客户端进行渲染的，然而只有咱们手动刷新，className就不进行匹配，这是因为在服务端渲染和在客户端渲染的 className 不匹配
  • 如何解决：引入相干依赖，创立和编辑 .babelrc 文件
  • yarn add styled-components
  • yarn add -D babel-plugin-styled-components
  • 编辑 .babelrc 文件

{
  "presets": ["next/babel"],
  "plugins": [["styled-components"]
  ]
}

6. 路由的补充

• 路由的嵌套(子路由)：

  • 文件夹的嵌套，最初就能够造成子路由；

• 路由的传参：

  • Next.js 中无奈通过 /user/:id 形式传递参数；
  • 只能通过 /user?id=123 的形式来传递参数

• 传递参数由两种办法:

  • Link 中的门路
  • Router.push(pathname,query)

<Link href={`/recommend?id=${item}`} key={item}>
  <a> 举荐数据{item}</a>
</Link>

import Router from 'next/router'
const itemClick = (item) => {
  Router.push({
    pathname: 'recommend',
    query: {id: item}
  })
}

7. 数据申请

• getInitialProps

// 返回一个 promise 对象或者返回对象
Home.getInitialProps = async (props) => {const res = await axios({ url: 'http://39.102.36.212:3000/banner'})

  return {
    name: 'why',
    banners: res.data.banner,
    recommends: res.data.recommend.list,
  }
}