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

上篇笔记学习了 Next.js 客户端开发的实践部分，今天继续学习nextjs的服务器开发以及核心功能的讲解。

课堂笔记

04. Next.js 服务端开发

BFF层开发

import type NextApiRequest,NextApiResponse from "next";
import axios from "axios";
import CMSDOMAIN from "@/utils";
import IArticleProps from "../article/[articleId]";

const getArticleInfoData
  req:NextApiRequest,
  res:NextApiResponse<IArticleProps>
)=>{
  const articleId req.query;
  axios.get('${CMSDOMAIN}/api/article-infos/${articleId}').then((result)=>{
    const data result.data {}
    res.status(200).json(data);
});
};

export default getArticleInfoData;

export default (req,res)=>{
  if (req.method ==='GET'){
    //do something for the get scene
  }else if (req.method ==='POST'){
   //do something for the post scene
  }
}

和Express等开发类似

区别是并没有参数可以直接区别请求类型

调试方式

Strapi-headless CMS

CMS全称是Content Management System，即内容管理系统。我们可以利用CMS存储添加数据，帮助我们快速创建API

仓库：https:/github.com/strapi/strapi 初始化：npx create-.strapi--app my-project--quickstart

一个接口的生成有以下几个过程：

content-type builder编辑结构体
content manager配置数据源，并且发布
settings roles里选择对应角色并勾选要发布的接口类型
如果涉及嵌套，在接口后加上populate=deep参数(npm install strapi--plugin-populate-deep--save),没安装加参数populate=*,但只能嵌套一层

05. 项目核心功能讲解

首页功能实现

页面&动画&多媒体适配
BFF
Strapi

文章页实现

页面&动画&多媒体适配
BFF
Strapi分页(/api/articles?pagination[page]=1&pagination[pageSize]=l0//按10个/页分页，返回第一页的数据)
多媒体格式的转换

markdown转 html:npm install showdown --save
html转 dom:dangerouslySetlnnerHTML
公共样式的定义

主题化功能实现

基础样式和背景的抽离
主题化context全局注入
从注入数据中取出theme和setTheme
多进程间的主题同步

思考题：

http:/localhost::3000,和http:/127.0.0.1:3000主题可以共享吗? 不可以

课后完成

1. 什么是 CSR, SSR 和 SSG？常规的 SSR 与同构 SSR 之间有什么不同？

Web应用从用户的视角来看，可以主要分为B端应用，和C端应用

B端应用: (例：比如一些烂大街的项目，管理平台啊之类的)To Business，该类应用一般会挂在内网，或提供给内部用户使用
C端应用: (例：比如稀土掘金就是)To Customer

Next.js是用来开发C端应用，而不是用于开发B端应用的框架

C端应用与B端应用的区别

CSR (Client side redering)

常见的B端WEB应用开发模式，前后端分离，渲染工作在客户端进行

我们从这种应用的响应中可以看出，这个响应是不包含这个页面当中的任何元素，只引入了一些对应的CSS和JS，真正页面模板元素部分当中的核心的也就是<body></body>, 即这个模板页面当中的所有元素是在请求之后，才会去编译塞进来的，通常也是SPA (Single Page Application), 资源不是加载的，资源是一次性拉完的，一般来说，首屏时间也会更长。后端|服务器端是不会去关心我们的模板页面是怎么去渲染的，它们只需要把我们所需要的静态文件返回给我们就好了

SSR (Server Side Rendering)

通常是我们C端的开发模式

传统SSR

前后端非分离的，代码耦合度高，页面模板中还参杂着后端语言(比如来进行一些数据的遍历啊、请求, 然后再塞到我们的页面当中等等)，现在除了一些老项目会用，绝大部分项目都不会使用这种开发模式了

同构SSR(对老的SSR和CSR进行改进的)

概念：同构也是SSR，服务器端返回给浏览器的(在开发工具的network中查看)是一个完整的页面（这点也是区分CSR和SSR最关键的一点) ，现在🔙回到同构SSR的概念，解决了SSR模板中混杂着后端语言，代码耦合度高的痛点。最直接的意思：在一个项目中，Node写的接口服务以及模板页面都在一个项目目录下，但是和传统SSR不同的是，它们不会维护在一个文件内，会被拆分都目录结构下，也被称为前后端一体化，这种模式下，前后端都会参与到渲染的这个过程

前置知识：BFF (Backend For Frontend), 比如说项目很复杂|接口很复杂，我们可能在前后端之间加一层BFF，对下游接口进行裁切和拼接，BFF层通常不会直接操作数据库，可以使前后端各自更专注于自己的业务本身，也降低了协作成本 (下游接口只需关注数据本身，而对这个页面需要内容的处理，可以直接放在BFF中，这样可以提高整一个大型项目的可维护性和可复用性)

SSG(Static Site Generation)静态站点生成

效果上和SSR是一样的，但与SSR不同的是不需要每次请求服务器端(服务器压力小)，而是构建时完成所有路由HTML的构建，分发给CDN，然后由CDN分发静态页面，缺点也很明显，无法根据用户来调整内容，每个用户看到的页面都是相同的，偏向用于做偏展示的C端应用上面。

SSR，SSG的优势

SEO B端用户通常是必须使用，且使用场景不是从搜索引擎等入口来进入，所以无需太关注SEO，而C端则不同了，需要关注SEO，需要关注如何给项目带来更多的流量，这对C端来说是非常重要的

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