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[page]=1&pagination[pageSize]=10 // 1/10页)

    • 多媒体格式转换

      • markdown 转 html：npm i showdown -s
      • html 转 dom：dangerouslySetInnerHTML
      • 公共样式的定义

  3. 主题化功能实现

    • 基础样式和背景的抽离
    • 主题化 context 全局注入
    • 从注入数据中取出 theme 和 setTheme
    • 多进程间的主题同步
posted @ 2023-02-05 11:09  SRIGT  阅读(20)  评论(0)  编辑  收藏  举报  来源