Next.js | 青训营笔记这是我参与「第五届青训营」笔记创作活动的第6天作为个人笔记使用 SSR 指由服务侧完成

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

作为个人笔记使用

SSR 指由服务侧完成页面的HTML结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程

有利于SEO和首屏渲染速度

BFF 服务于前端的后端

前后端一体化，一套react代码在服务器上运行一遍，到达浏览器又运行一遍，前端后端都渲染，且首次渲染出的HTML一样

SSG静态站点生成，一般建立在CDN上，访问静态HTML，大幅度减轻服务端压力，缺点只能访问偏静态的页面

SSR/SSG会在服务器之间甚至是服务器自身上调取接口，因此通信更快，缩短首屏时间

模板页面渲染的同构，路由同构，header标签修改，脱水注水，性能优化...

react提供的有关ssr的相关api rendertoString hydrateRoot

页面渲染同构通过中间件加入

// 注入事件处理的脚本
app.use(express.static(path.resolve(process.cwd(),'client_build')))

脱水注水，把客户端的context同步到服务端里

<script>
  window.context = {
    stata: ${JSON.stringify(serverStore.getState())}
  }
</script>

xxx.modules.css的后缀名代表该module下的css类会附带一个唯一标识

文件式路由，自动生成路由

nextjs有一个基于页面概念的基于文件系统的路由器

nextjs当文件添加到pages目录时会自动作为一个路径可用

分为三种 /a/index.tsx

/a/{abc}.tsx

/a/[...id].tsx (id=["a","b","c"]

产出的路径分别是

/a/:abc

/a/A/B/C

预定义路由优先级更高

使用nextjs提供的next/link里的link标签声明式跳转，或useRouter命令式跳转

也可以使用原生方法跳转，不过不会进行diff渲染

使用link标签：

import Link from "next/link"

<Link href={item.link} key={index}>
	.....插槽
</Link>

使用useRouter:

import {useRouter} from 'next/router'

const router = useRouter()
router.push(url)