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

冬寒

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

0x1 CSR，SSR，SSG

1. CSR

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

   缺点：首屏时间长

2. SSR

   服务端渲染（Server-Side Rendering）。JSP/PHP 已经体现了服务器端渲染，其代码耦合度高，且模板语言中混杂编程语言对于一些复杂的功能，维护起来很麻烦。在这种模式下，Java 和 PHP 负责渲染的逻辑，前端只负责 UI 和交互

   • 同构 SSR

     BFF：Backend For Frontend，服务于前端应用的后端

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

3. SSG

   静态站点生成（Server-Side Generation），在构建时直接把结果页面输出 HTML 到磁盘，每次访问直接把 HTML 返回给客户端，相当于一个静态资源。相比 SSR，因为不需要每次请求都由服务器端处理，所以可以大幅减轻服务器端的压力

   缺点：只能用于偏静态的页面，无法生成与用户相关的内容（如，产品展示页面，与用户操作无关）

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

4. SSR / SSG 的共同优势

   1. 利于 SEO

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

   2. 更短的首屏时间

      SSR / SSG 只需要请求一个 HTML 文件就能展现出一个页面，虽然在服务器上会调取端口，但服务器之间的通信比客户端快得多。同时不再请求大量 JS 文件

0x2 Next.js

1. Next.js 是一个构建于 Node.js 之上的开源 Web 开发框架，支持基于 React 的 Web 应用程序功能。具有上手速度快、能力集中全面以及覆盖足够多的性能优化和生态的特点，对前后端一体化的开发模式十分友好

2. SSR 的实现

   SSR 核心重要概念之一：同构

   Demo 仓库

   ./client：客户端

   ./pages：页面

   ./server：服务端

   • 在服务器端返回 HTML 模板页面时，会将一些初始化数据脱出来（脱水），如

     <!-- ./server/index.tsx -->
     <script>
         window.context = {
             state: ${JSON.stringify(serverStore.getState())}
         }
     </script>
     

     当页面进入客户端进行渲染时，会将脱出的初始化数据重新注入（注水），如

     // ./pages/Demo/store/demoReducer.ts
     typeof window !== 'undefined' ?
         (window as any)?.context?.state?.demo : {
         content: '初始默认数据'
     }
     

     使浏览器端与服务器端达到同步的效果

0x3 Next.js 客户端开发

1. Demo 仓库

   CMS 仓库地址

   Demo 仓库地址

2. Next.js 项目初始化：npx create-next-app@latest --typescript

   next-env.d.ts：确保 TypeScript 编译器选择 Next.js 类型，可以放到 ./.gitignore中，无需变更

   next.config.js：Next.js 的配置，可以补充 webpack 的一些配置

3. 数据注入

   1. getInitialProps

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

      XXX.getInitialProps = async (context) => {
          const { XXXId } = context.query;
          const { data } = await axios.get(`${LOCALDOMAIN}/api/xxxInfo`, {
              params: {
                  XXXId,
              }
          });
          return data;
      };
      

   2. getServerSideProps

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

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

   3. getStaticProps

      SSG，在服务器端构建执行，若涉及动态带参路由，则需使用getStaticPaths配置所有可能的参数情况

      export const getStaticPaths: GetStaticPaths = async () => {
          return {
              paths: [{ params: { XXXId: "001" } }],
              fallback: false,
          };
      };
      export const getStaticProps: GetStaticProps = async (context) => {
          const { XXXId } = context.query;
          const { data } = await axios.get(`${LOCALDOMAIN}/api/xxxInfo`, {
              params: {
                  XXXId,
              }
          });
          return {
              props: data,
          }
      }
      

4. CSS Modules

   Next.js 支持使用文件名约定的 CSS 模块，[name].module.css，具体操作如下：

   1. 创建相关模块文件，如：style.moudle.scss
   2. 在.tsx文件中引入，如：import styles from './style.module.scss'
   3. 在需要的地方引用，如：<div className={styles.divOne}><h1 className={styles.title}></h1></div>

5. Layout

   通过在入口文件导入 Layout，可以实现每个页面公共的页眉页尾

   return (
       // ...
       <Layout navbarData = { navbarData } footerData = { footerData }>
       	// ...
       </Layout>
   )
   

6. 文件式路由

   Next.js 有一个基于页面概念的基于文件系统的路由器。当一个文件被添加到 pages 目录中时，他会自动作为一个路径可用

   • BFF 层的文件式路由

     BFF 作为服务器构建包，不影响客户端构建 bundle 体积。相同的 router 生成方式，不过是作为 API 层访问，而不是 page

7. 路由跳转

   1. next / link 跳转

      import Link from "next/link";
      // ...
      return (
          <Link href = { item.link } key = { index }>
          </Link>
      )
      

   2. useRouter 跳转

      import { useRouter } from "next/router"
      // ...
      const router = userRouter()
      

   3. 原生方法跳转

      缺点：不会进行 diff 比对渲染，性能上 Next.js 提供的路由跳转更好

8. header 的修改

   可用于修改 TDK（Title，Description，Keywords）

   return(
       <Head>
       	<title></title>
       	<meta />
       </Head>
   )
   

9. 多媒体适配

   对于不同分辨率的屏幕进行适配

   1. CSS 适配
   2. JS 适配

10. 大图优化——webp

0x4 Next.js 服务端开发

1. BFF 层开发

   和 Express 等开发类似，区别在于并没有参数可以直接区别请求类型

2. 调试方式

   • VSCode

     在需要调试的位置添加debugger;，启动 JavaScript Debug Terminal，执行命令npm run dev即可

   • 浏览器

     npm run debugger

3. Strapi —— headless CMS

   仓库：github.com/strapi/stra…

   初始化：npx create-strapi-app my-project --quickstart

   一个接口的生成过程如下：

   1. content-type builder编辑结构体
   2. content manager配置数据源并发布
   3. setting roles里选择对应角色并勾选要发布的接口类型
   4. 若涉及嵌套，则在接口后添加populate=deep参数（npm i strapi-plugin-populate-deep --save），没安装加参数populate=*，但只能嵌套一层

0x5 核心功能讲解

1. 首页功能实现

   • 页面、动画、多媒体适配、BFF、Strapi

2. 文章页实现

   • 页面、动画、多媒体适配、BFF

   • Strapi分页（/api/articles?pagination