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

秦政
161 阅读4分钟

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

今日内容：

  • CSR，SSR，SSG
  • 什么是 Next.js
  • Next.js 客户端开发
  • Next.js 服务端开发

CSR，SSR，SSG

CSR

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

SPA：单页面应用，它所需的资源（HTML CSS JS等），在一次请求中就加载完成，不需刷新地动态加载，首屏时间更长。

SSR

SSR（Server - Side Rendering）。不是什么新鲜地概念，从原先地 JSP/PHP 就已经体现了服务器端渲染。

代码耦合度高，且模板语言中混杂编程语言对于一些复杂的功能，维护起来很痛苦。

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

同构SSR

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

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

SSG

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

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

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

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

SSR，SSG 的优势

利于 SEO

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

更短的首屏时间

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

什么是 Next.js

SSR 的实现 ：基于 React 提供的相关服务器端渲染 API 实现，整个过程实现比较繁琐重复，从零实现对新上手同学很不友好。

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

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

对于新同学掌握前后端一体化的开发模式很友好。

Next.js 客户端开发

Nextjs 初始化

  • 确保 TypeScript 编译器选择Next.js 类型，可以放到 .gitignore 中，不需要变更
  • next.js 的配置，我们可以补充 webpack 的一些配置进行

数据注入

getInitialProps

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

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

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

getServerSideProps

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

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

getStaticProps

export const getStaticPaths: GetStaticPaths = async () => {
    return {
        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 配置所有可能的参数情况。

CSS Modules

Next.js 支持使用文件命名约定的 CSS 模块，[name].module.css

Layout

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

路由跳转

next/link 跳转

import Link from "next/line";
<Link href=P{item.link} key={index}>
    <div className={styles.card}>
        <h2>{item.label} &rarr;</h2>
        <p>{item.info}</p>
    </div>
</Link>

useRouter 跳转

import { useRouter } from 'next/router'
​
function ActiveLink({ children,href }) {
    const router = useRouter()
    const style = {
        marginRight:10,
        color:router.asPath === href ? 'red' : 'black',
    }
    
    const handleClick = (e) => {
        e.preventDefault()
        router.push(href)
    }
    
    return (
        <a href={href} onClick={handleClick} style={style}>
            {children}
        </a>
    )
}
​
export default Activet.ink

除了这些外，还可以使用原生方法跳转，不过原生的方法不会进行 Diff 比对渲染，性能上 Nextjs 提供的路由跳转会更好

header 的修改

可用于修改TDK （title，description，keywords）

多媒体适配

  • CSS 适配
  • JS 适配

Nextjs 服务端开发

BFF 层开发：和 Express 等开发类似，区别是并没有参数可以直接区别请求类型

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

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