这是我参与「第五届青训营」伴学笔记创作活动的第 6 天

三种渲染模式

CSR 客户端渲染

CSR 客户端渲染（Client-side rendering）：渲染工作在客户端进行，服务器直接返回不加工的HTML 用户在后续访问操作

<div id='root'></div>

SSR 服务器端渲染

SSR 服务器端渲染（Server-side rendering）：耦合度较高，不利于维护

同构 SSR ：服务器返回完整的页面

BFF：Backend For Frontend 服务于前端应用的后端

【同构（前后端一体化）是指 page 和 api 在同一个项目里面，但是不会维护在同一个文件，比SSR耦合度低】

<div id='root'>稀土掘金</div>

SSG 静态站点生成

SSG 静态站点生成（static site generation）：在构建的时候直接把结果页面输出到磁盘，每次访问直接把html返回给客户端，相当于一个静态资源

相比于 SSR，不需要每次请求都由服务器处理，可以大幅减轻服务器端的压力，缺点是无法生成与用户相关的内容交互，只能生成偏静态的（每个用户看相同的东西）

服务器端渲染的优点

返回的 html 的元素，更利于 SEO
服务器端的通信比客户端快，因为不需要请求大量的 js ，更短的首屏时间

next.js 客户端开发

三个 API

getInitialProps 函数

有可能会在客户端执行（页面刚打开），有可能在服务端执行（路由跳转）

getServerSideProps 函数

只会在服务端执行，不会在客户端执行实现 SSR

getStaticProps 函数

静态数据实现SSG

Layout 组件

通过在入口文件导入 Layout , 可以实现每个页面公共的页眉和页尾

路由功能

路由配置

基本路由功能：next 默认是按照文件结构进行页面跳转的

Link 跳转

as 属性可以路由遮盖

import Link from 'next/link'
<Link href="/">主页</Link>
  // 路由遮盖 url显示的是l 不是list
<Link as="l" href="/list">主页</Link>

编程式跳转

import Router from 'next/router'

<button onClick={()=>Router.push('/list?arg=1')}>跳转到列表页</button>

路由预加载

预加载：在进入路由页面之前，先把页面加载，跳转速度加载，提升用户体验

懒加载：如果页面数据很多，预加载会浪费性能资源，先加载一部分，等到用户浏览时，再加载更多

方法1：标签添加 prefetch 属性

// 在开发阶段没有效果 得等到项目上线才能预加载
<Link as="l" href="/list" prefetch>主页</Link>

方法2：使用 withRouter 高阶组件，在组件中使用 router.prefetch（'/dynamic'）

import withRouter from 'next/router'

export default withRouter(({children,router})=>{
  ...
  <Link as="l" href="/list" prefetch>主页</Link>
{  router.prefetch('/')}
})

路由的事件与路由守卫

routeChangeStart(url)  //路由跳转开始
routeChangeComplete(url)  //路由跳转完成
routeChangeError(url)  //路由跳转失败
beforeHistoryChange(url)  //浏览器历史改变

import Router from 'next/router'

Router.events.on('routeChangeStart',(url)=>{
  if(url==='/list' || url==='/l'){
    location.href='./nopermission'
  }
})

Next.js 实战项目笔记 | 青训营笔记