意识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,  }}