一，本节课重点内容

本节课重点内容上大致可以分为以下几点。

1-CSR,SSR与SRG
2-Nextjs的介绍与初始化
3-Nestjs的项目结构
4-Nestjs的服务端开发
5-CMS与strpai

通过上面的内容，我由浅入深，学习了Nextjs的很多知识。

二，详细知识介绍

老师先讲了CSR,SSR和SRG

CSR的优点

CSR的开发模式有优点也有缺点，我们先来看一下他的优点，前后端分离的开发模式，让前端更专注于前端页面的开发与渲染，而后端则能更专注于逻辑的编写与数据的处理。同时代表的SPA应用，再首次请求之后，后续的不涉及请求数据的交互与渲染都会在客户端执行，大大减轻了服务器的压力。

不足与缺点

这种传统的前后端分离的模式有很多问题与缺点，还拿SPA来说，过长的首屏加载时间，用户在首次打开时需要等待较长的时间，这种致命的问题如果做B端开发还可以，因为B端应用往往具有指定性和唯一性，但是如果做面向用户的C端应用，就会给用户带来相对较差的体验与不满，不利于吸引用户。

同时这种传统的CSR的模式非常不利于SEO的推荐模式。

传统的SSR

SSR本身并不是什么很新的，很稀奇的概念，传统的SSR甚至比前后端分离的CSR更加古老的多的多。

传统SSR的代表就是JSP,PHP。在渲染机制上，这种JSP/PHP采取的并不是和CSR一样的客户端渲染，而是采取了服务器端渲染的设计模式。这种模式下Java/php还需要负责渲染的逻辑，而前端只需要负责UI与交互就可以了。但是php/jsp采取的是前后端混合的开发模式，前后端代码写在一起，开发效率，维护效率，排查效率都比较低。越大的项目表现的越差。

同构SSR

接下来登场的是我们今天的主角，一种很新的SSR-----同构SSR

我们拿React框架举例子，所谓的同构SSR，即一套代码，不仅要在服务器上运行一遍，还要在客户端又运行一遍，前后端都会参与到渲染中去，而且还要保证首次渲染出来的HTML要一样。

同构SSR解决了传统SPA的首屏加载性能问题，极大程度上提高了用户的体验，同时同构SSR被更利于搜索引擎抓取，在技术层面上更容易，更大可能被推荐。同时服务器端天然的速度上的优势，也会更进一步加强性能与体验。现在很多大厂的C端web应用大多采取这种模式。比如我们现在在的稀土掘金，就是采取的这种开发模式。

SSG

最后说一下SSG,SSG:Static Site Generation。是一种静态站点生产的模式。

就是在构建的时候将结果页面的Html输出到磁盘上，每次直接将HTML发给客户端，整个都相当于一个静态资源了，一般可能会使用CDN，由不同区域的服务器组成分布式系统，将统一的，一致的页面发送给用户。，SSG是一种静态站点的服务，适合发一些静态页面，就是大家看到都一样的页面,不能让不同的用户看到不同的页面。

接下来老师讲解了初始化nest.js与使用他开发一些demo,讲了很多很多。后面的例子会记录一些

最后讲了一些CMS生成接口的操作。

三，实践的例子

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>): void => {
  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;

四，课后个人总结

总的来说，这节课对我来说，简直就是让我打开眼界，三种不同的渲染方式启发我太多了，收获特别多。

前端与Nextjs|青训营笔记