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

清染小林
72 阅读4分钟

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

今日学习内容：Next.js实战项目

一、课程目标

具备C端Web应用开发的基本能力

image.png

  • B端：类似教学管理平台等挂载于内网中的应用，给内部用户使用（to business）
  • C端：类似掘金等面向整个互联网的应用

Next.js是一个开发C端应用的应用框架

二、CSR, SSR, SSG

1. CSR

Client Side Rendering：常见的B端Web应用开发模式，前后端分离，服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的HTML，用户在后续访问操作

所需要的资源在一次请求中加载完毕，首屏时间更长

2. SSR

Server Side Rendering：从原先的PHP/JSP就已经体现了服务端渲染，但代码耦合度高，且模板语言中混杂编程语言，对于一些复杂的功能，维护起来非常痛苦

在这种模式下，Java/PHP只负责渲染的逻辑，而前端只负责UI和交互

同构SSR：BFF（Backend For Frontend），服务于前端应用的后端

如果不进行同构处理，无法保证绑定事件的触发

image.png

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

通常来说，BFF并不直接操作数据库，而是对下游请求的数据进行拼接汇总，提交给前端模板页面进行交互

在CSR模式下，可以将数据理解为「水」，这就出现了SSR中的脱水与注水（三体人模型）

  1. 服务端渲染：在服务端注入数据，构建出组件树
  2. 序列化成HTML：脱水成没有数据的基本结构
  3. 客户端渲染：到达客户端后注入数据

之所以叫「三体人模型」，是可以这样理解：

  • 乱纪元脱水 --> SSR服务端渲染部分
  • 恒纪元浸泡 --> SSR客户端注水部分

3. SSG

Static Site Generation：静态站点生成，在构建时直接把结果页面输出HTML到磁盘，每次访问直接把HTML返回给客户端，相当于一个静态资源

CDN：建立并覆盖在Internet之上，由分布在不同区域的边缘节点服务器群组成的分布式网络

image.png

相比SSR，因为不需要每次请求都由服务器端处理，所以可以大幅度减轻服务器端的压力

缺陷在于：只能用于偏静态的页面，无法生成与用户相关的内容，也就是所有的用户访问的页面是相同的

4. SSR & SSG 优势

利于SEO：指浏览器的推广程度，这取决于搜索引擎对站点检索的排名。搜索引擎可以理解为一种爬虫，会爬取指定页面的HTML，并根据用户输入的关键词对页面内容进行排序检索，最后形成用户看到的结果

更短的首屏时间：只需要请求一个HTML文件就能展示出页面，虽然在服务器上会调取接口，但服务器之间的通信远比客户端快，甚至是同一台服务器上的本地接口调取。因为不再需要请求大量js，这就使得SSR/SSG拥有更快的首屏渲染速度

三、什么是Next.js

image.png

基于React提供的相关服务器端渲染API实现，整个过程实现比较复杂繁琐，对使用者不友好

Next.js是一个构建于Node.js之上的开源Web开发框架，支持基于React的Web应用程序功能，例如服务端渲染和生成静态网站。

上手快，能力集全，而且覆盖了足够多的性能优化和生态。

四、Nextjs客户端开发

image.png 数据注入：与平常React项目开发最不同的部分

1. getInitialProps

Article.getInitialProps = async (context): Promise<IArticleProps> => {
  const { articleId } = context.query;
  const { data } = await axios.get(`${LOCALDOMAIN}/api/articleInfo`, {
    params: {
      articleId,
    },
  });
  return data;
};

在服务器端执行，只能在页面层面进行绑定，采用同构，首次渲染服务器端渲染，路由跳转使用客户端路由。

意味着如果使用router跳转当前页，会在客户端执行这部分逻辑

2. getServerSideProps

export const getServerSideProps: GetServerSideProps = async context => {
  const { articleId } = context.query;
  const { data } = await axios.get(`${LOCALDOMAIN}/api/articleInfo`, {
    params: {
      articleId,
    },
  });
  return {
    props: data, // 需要拿props包裹
  };
};

SSR，与getInitialProps不同的是即使使用router跳转当前页，也只会在服务端执行这部分逻辑

3. getStaticProps

export const getStaticPaths: GetStaticPaths = async () => ({
  paths: [{ params: { articleId: '1' } }],
  fallback: false,
});

export const getStaticProps: GetStaticProps = async context => {
  const { articleId } = context.params as any;
  const { data } = await axios.get(`${LOCALDOMAIN}/api/articleInfo`, {
    params: {
      articleId,
    },
  });
  return {
    props: data,
  };
};

SSG，在服务器端构建时执行

如果涉及动态路由（带参数）需要使用getStaticPaths配置所有可能的参数情况 j

五、Nextjs服务端开发

1. BFF层开发

image.png

与Express开发类似，区别是并没有参数可以直接区别请求类型

2. Strapi

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

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