Next.js实战项目｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 8 天一、本堂课重点内容： CS

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

一、本堂课重点内容：

CSR,SSR. SSG
Next.js的定义
Next.js客户端开发
Next.js服务端开发
核心功能讲解

二、详细知识点介绍：

1.CSR,SSR. SSG

[CSR]

客户端渲染(Client-Side Rendering)

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

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

[SSR]

（1）SSR(Server-Side Rendering)

从原先的JSP / PHP就已经体现了服务器端渲染。

特点：

代码耦合度高，且模板语言中混杂编程语言对于一些复杂的功能,维护起来很痛苦
这种模式下Java, PHP负责渲染的逻辑,而前端只负责UI和交互

（2）同构SSR

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

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

[SSG]

静态站点生成(Static Site Generation)

在构建的时候直接把结果页面输出html到磁盘，每次访问直接把htm返回给客户端，相当于一个静态资源

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

优点：

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

缺点：

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

[SSR、SSG的优势]

（1）利于SEO

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

（2）更短的首屏时间

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

2.Next.js的定义

[SSR的实现]

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

[Demo仓库]

仓库地址：(github.com/czm12904337…)

[Next.js]

Next.js的定义：

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

特点：

上手快,能力集全,而且覆盖了足够多的性能优化和生态
对于掌握前后端一体化的开发模式很友好

3.Next.js客户端开发

[Next.js初始化]

next-env.d.ts

确保 TypeScript编译器选择Next.js类型，可以放到.gitignore中，不需要变更

next.config.js

nextjs 的配置，我们可以补充webpack的一些配置进行

[数据注入]

[getInitialProps]

在服务器端执行、只能在页面层面进行绑定，采用同构．首次渲染服务器端渲染.洛由跳转使用客户端路由
意味着如果使用router跳转当前页．会在客户端执行这部分逻辑

[getServerSideProps]

SSR与gotInitialProps不同:

即使使用router跳转当前页．也只会在服务端执行这部分逻辑

[getStaticProps]

SSG，在服务器端构建时执行如果涉及动态路由(带参数)﹒需要使用getStaticPaths配置所有可能的参数情况

[CSS Modules]

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

[Layout]

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

<Layout navbarData={navbarData} footerData={footerData}>

[文件式路由]

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

[BFF层的文件式路由]

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

[路由跳转]

有next/link跳转、useRouter跳转
除了这些外,还可以使用原生方法跳转．不过原生的方法不会进行Diff比对渲染.性能上Nextjs提供的路由跳转会更好

[header的修改]

可用于修改TDK (titla. description. keywords)

[CSS适配]

//极小分辨率移动端设备
mixin media-mini-mobile {
@media screen and (max-width: 25.875rem){
@content;
}
}
//介于极小分辨率和正常分辨率之间的移动端设备
@mixin media-between-mini-and-normal-mobile {
@media screen and (min-width: 25.876rem) and (max-width: 47.9375rem) {
@content;
}
}
//移动端设备
@mixin media-mobile {
@media screen and (max-width: 47.9375rem){
@content;
}
}
// ipad
mixin media-ipad {
@media screen and (min-width: 47.9375rem) and (max-width: 75rem){
@content;
}
}

@include media-ipad {…}
@include media-mobile {…}

[JS适配]

export const UserAgentProvider =({ children }: IProps):JSX.Element =>{
const [userAgent，setUserAgent] = useState<Environment>(Environment.none);
//监听本地缓存来同步不同页面间的主题（当前页面无法监听到，直接在顶部栏进行了类的切换
useEffect(() =>{
const checkUserAgent = (): void => {
const width = document.body.offsetwidth;
//用宽度去判断，是为了适配不改机型，仅拉扯屏幕宽度的情况
if (width < 768){
//手机端
setUserAgent(Environment.mobile);
}
else if (width >= 768 && width < 1200){
// ipad端
setUserAgent(Environment.ipad);
}
else if (width >= 1280){
// pc端
setUserAgent(Environment.pc);
else {
setUserAgent(Environment.none);
//增加none类型来缓冲默认类型样式切换时的视觉突变
}
};
checkUserAgent();
window.addEventListener("resize", checkUserAgent); // 监听屏幕宽度变化
return(): void => {
window.removeEventListener("resize",checkUserAgent);
};
},[typeof document !== "undefined" && document.body .offsetwidth]);

return (
<UserAgentContext.Provider value={{ userAgent }}>{children}
</UserAgentContext.provider>
};
};

[大图优化 - webp]

export const getIsSupportwebp = (context: AppContext)=>{
  const { headers = {} } =  context.ctx.req || {};
  return headers.accept? .includes( "image/webp" );};

4.Next.js服务端开发

[BFF层开发]

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

[调试方式]

[headless CMS]

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

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

5.核心功能讲解

[首页功能实现]

页面&动画&多媒体适配
BFF
Strapi

[文章页实现]

页面&动画&多媒体适配
BFF
Strapi分页(/api/articles?pagination[page]=1&pagination[pageSize]=10//按10个/页分页，返回第一页的数据)
多媒体格式的转换

markdown转 html: npm install showdown --save
html转dom: dangerouslySetlnnerHTML
公共样式的定义

[主题化功能实现]

基础样式和背景的抽离
主题化context全局注入
从注入数据中取出theme和setTheme
多进程间的主题同步

三、实践练习例子：

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 ActiveLink

四、课后个人总结：

通过本章Next.js项目实战学习，我掌握了一些C端Web应用开发的基本技能，了解了CSR、SSR、SSG，深入学习了Next.js，其中比较难的地方是Next.js客户端方面的开发，涉及许多功能实现。

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