这是我参与「第五届青训营」笔记创作活动的第11天. 今天的内容主要记录什么是Next.js. 此外上一篇笔记中已经对CSR, SSR和SSG等概念有了初步的了解, 这篇笔记将进一步记录它们的特点.

CSR, SSR 和 SSG

CSR

客户端渲染. 常见的B端Web应用开发模式, 前后端分离, 渲染工作在客户端进行, 服务器直接返回不加工的Html用户在后续访问操作

SSR

C端的开发模式. 服务器端渲染, 没有前后端分离, 模板语言中混杂编程语言

同构SSR

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

SSG

静态站点生成

SSR,SSG的优势

浏览器的推广程度, 提高站点在搜索引擎的排名
更短的首屏时间, 只需要请求一个HTML文件就能展现出页面, 且服务器间的通信远快于客户端.

SSR的实现

同构 : 服务器端和客户端做一样的事情, 如果没有同构, 一些客户端的事件(如onclick等js代码)无法触发.

脱水/注水：客户端初始数据和服务端无法对应.

SSR实现的框架如下

什么是Next.js

基于React提供的相关服务器端渲染API实现,整个过程实现比较繁琐重复，从零实现对新上手同学很不友好, 迫切需要一个封装好的集合来快速上手服务器端渲染. 因此产生了Next.js.

Next.js是一个构建于Node.js之上的开源Web 开发框架，支持基于React 的 Web应用程序功能，例如服务端渲染和生成静态网站。上手快,能力集全，而且覆盖了足够多的性能优化和生态。对于新同学掌握前后端一体化的开发模式很友好。

Next.js 客户端开发

Next.js应用目录结构

通过npx create-next-app nextjs-blog命令可以创建名为nextjs-blog的Next.js应用. 它的目录结构如下图左侧所示, 部分文件的功能如图所述.

pages文件夹通常存放html页面代码, public文件夹通常存放公开数据, styles则存放CSS样式文件. 此外我们还可以根据项目的需求创建需要的文件夹.

数据注入

数据注入主要有以下三种方式

getInitialProps
- 页面刚打开的时候在客户端运行, 路由跳转在服务器端运行, 是SSR
```
Article.getInitialProps = async (context) =>{
  const { articleId } = context.query;
  const { data } = await axios.get(`${LOCALDOMAIN}/api/articleInfo`, {
    params: {
      article1d,},
  });
  return data;
};
```
- 在服务器端执行, 只能在页面层面进行绑定，采用同构
- 首次渲染服务器端渲染, 路由跳转使用客户端路由
- 意味着如果使用router跳转当前页，会在客户端执行这部分逻辑

getServerSideProps

只在服务器端走, 常用于SSR

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

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

getStaticProps
- SSG, 在服务器端构建时执行

参考资料

创建 Next.js 应用程序 | Learn Next.js | Next.js中文网 (nextjs.cn)

Next.js | 青训营笔记