关键词：
文章目录
前言
仅以此文章记录学习历程。
一、CSR，SSR，SSG
1. CSR
客户端渲染（Client-Side Rendering）。常见B端WEB应用开发模式，前后端分离，服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的HTML用户在后去访问操作
（不会嵌套后端代码，会直接渲染前端ui）
SPA：单页面应用，他所需要的资源（HTML，CSS，JS），在一次请求中就加载完成，不需要刷新地动态加载，首屏时间更长
2. SSR
服务端渲染（Server-sie Rendering）。不是什么新鲜的概念，从原先的JSP/PHP就已经体现了服务器端渲染。
（会在前端页面当中嵌套后端代码）
同构SSR：
前后端一体化，一套 React 代码在服务器上运行一遍，到达浏览器又运行一遍。前端后端都要参与渲染，而目首次渲染出的 HTML 要一样。
（会嵌套后端代码，但是并不是在一个html文件当中嵌套，而是单独分出来一个文件夹保存后端代码文件）
BFF：Backend For Frontend，服务于前端应用的后端。
（通常来说BFF不会直接操作数据库，而是对后端返回的几个数据进行拼接汇总然后交给前端页面进行模板页面的数据展示前后端的中介）
3. SSG
静态站点生成 (Static Site Generation)在构建的时候直接把结果页面输出html到磁盘，每次访问直接把html返回给客户端，相当于一个静态资源
CDN：建立并覆盖在internet 之上，由分布在不同区域的边缘节点服务器群组成的分布式网络,
相比 SSR，因为不需要每次请求都由服务器端处理，所以可以大幅减轻服务器端的压力
缺陷在于只能用于偏静态的页面，无法生成与用户相关的内容，也就是所有的用户访问的页面都是相同的
4. SSR，SSG的优势
利于SEO
浏览器的推广程度，取决于搜索引擎对站点检索的排名，搜索引擎可以理解是一种爬虫，它会爬取指定页面的 HTML，并根据用户输入的关键词对页面内容进行排序检索，最后形成我们看到的结果
更短的首屏时间
SSR / SSG 只需要请求一个 HTML 文件就能展现出页面，虽然在服务器上会调取接口但服务器之间的通信要远比客户端快，甚至是同一台服务器上的本地接口调取。因为不再需要请求大量 js 文件，这就使得SSR / SSG可以拥有更短的首屏时间
二、什么是Next.js
Next.js是一个用于生产环境的 React 应用框架，使用它可以快速上手开发 React 应用。无需配置就可以如服务端渲染 SSR、编译时渲染 SSG，Typescript 语言支持，自动打包，路由愈加载等功能。
三、Next.js客户端开发
demo仓库地址：https://github.com/czm1290433700/ssr-server
CMS 仓库地址: https://github.com/czm1290433700/nextjs-cms
Demo 仓库地址: https://github.com/czm1290433700/nextjs-demo
1. Api
getInitialProps： 在服务器端执行，只能在页面层面进行绑定，采用同构，首次渲染服务器端渲染，路由跳转使用客户端路由（会在客户端执行router跳转逻辑）
getServerSideProps： SSR，与getInitialProps不同的是即使使用roter跳转也只会在服务端执行这部分逻辑
getStaticProps： SSG，在服务器端构建时执行。（如果涉及动态路由（带参数），需要使用getStaticPath配置所有可能的参数情况）
2. CSS Modules
Next.js支持用文件名约定的CSS模块。[name].module.css
3. Layout
通过在入口文件导入Layout，可以实现每个页面公共的页眉页尾
4. 文件式路由
Next.js 有一个基于页面概念的基于文件系统的路由器。当一个文件被添加到 pages目录中时，它会自动作为一个路径可用（说白了就是不需要自己配置路由了）
BFF层的文件式路由：
BFF，作为服务器构建包，不影响客户端构建bundle体积
相同的router生成方式，不过是作为Api层访问而不是page页面
路由跳转：
- next/link
- useRouter
- 原生方法跳转（不支持，不会进行Diff比对渲染，性能上不如上面两个）
四、Next.js服务端开发
和Express等开发类似，区别是没有参数可以直接区别请求的类型
仓库: https://github.com/strapi/strapi
初始化: npx create-strapi-app my-project --quickstart
一个接口的生成有以下几个过程：
- content-type builder 编辑结构体
- content manager 配置数据源，并且发布
- settings roles 里选择对应角色并勾选要发布的接口类型
- 如果涉及嵌套，在接口后加上 populate=deep 参数(npm install strapi-plugin-populate-deep–save)，没安装加参数 populate=* ，但只能嵌套一层
字节跳动青训营笔试题解(代码片段)
...码T2.社交圈题目思路代码四、简答题题目思路前言第五届字节跳动青训营-后端专场笔试题解，简单做了一下，选择题和简答题不知道是否正确，编程题是通过了的，有问题欢迎评论，我会及时改正的~一、单选... 查看详情
字节跳动青训营笔试题解(代码片段)
...码T2.社交圈题目思路代码四、简答题题目思路前言第五届字节跳动青训营-后端专场笔试题解，简单做了一下，选择题和简答题不知道是否正确，编程题是通过了的，有问题欢迎评论，我会及时改正的~一、单选... 查看详情
青训营html基础-语义化标签-浏览器渲染过程-笔记及拓展(代码片段)
...ff08;哈哈哈）博主还是很久之前学习的，这次趁着字节跳动青训营的活动，就再学习一遍HTML。一小时的课程，巩固了之前的一些知识，也学到了很多新知识。我把这次课程的内容与我这一年来学习前端的经验... 查看详情
字节跳动青训营每日一练编程题
1：实现一个36进制的加法0-9a-z。#include<bits/stdc++.h>typedeflonglongll;constllN=2e5+10;usingnamespacestd;ints[N];intmain()int_;stringa,b;while(cin>>a>>b)stringans;intpos 查看详情
结营啦！有缘相聚于青训，未来高处见呀~~(代码片段)
📸叮！记·字节跳动第一届青训营顺利结营啦！从8月份的青训营，到9月份的实训营，搁置了许久的结营心得终于拾起来辽！🎬开营进行时从答疑会开始，负责人仔细的阐述了本次训练营的性质和... 查看详情
字节跳动青训营每日一练编程题
1：实现一个36进制的加法0-9a-z。#include<bits/stdc++.h>typedeflonglongll;constllN=2e5+10;usingnamespacestd;ints[N];intmain()int_;stringa,b;while(cin>>a>>b)stringans;intpos;reverse(a.begin(),a.end());reverse(b.begin(),b.end());for(inti=0;i<max(a... 查看详情
第五届字节青训营笔试后端编程练习题解(代码片段)
文章目录前言T1.36进制加法（模拟）题面思路代码T2.电影院选座（DFS）题面思路代码T3.IP地址（DFS）题面思路代码前言前段时间🐏了，今天简单写了一下，不知道如何提交代码进行评测，题... 查看详情
结营啦！有缘相聚于青训，未来高处见呀~~(代码片段)
📸叮！记·字节跳动第一届青训营顺利结营啦！从8月份的青训营，到9月份的实训营，搁置了许久的结营心得终于拾起来辽！🎬开营进行时从答疑会开始，负责人仔细的阐述了本次训练营的性质和... 查看详情
青训营pro前端框架设计理念-vue3动机-手写实现mini-vue(代码片段)
...2.响应式①reactive②依赖收集3.虚拟DOM4.diffpatch更新diff对比青训营实战班的课程也结束了，今天先来撸一遍周五杨村长带来的mini-vue课程。错过课程的小伙伴一 查看详情
青训营pro前端框架设计理念-vue3动机-手写实现mini-vue(代码片段)
...2.响应式①reactive②依赖收集3.虚拟DOM4.diffpatch更新diff对比青训营实战班的课程也结束了，今天先来撸一遍周五杨村长带来的mini-vue课程。错过课程的小伙伴一 查看详情
青训营pro️从0到1实现一个自己的前端约定路由项目脚手架️工具~(代码片段)
文章目录前言一、Node基础API核心API-无需`require`内置API-需要`require`无需`install`1.fs与异步IO①同步读取文件②异步读取文件③promisify2.buffer与字符集3.http练习1node基础fs\\buffer\\http搭建一个http服务4.stream5.子进程二... 查看详情
青训营pro️从0到1实现一个自己的前端约定路由项目脚手架️工具~(代码片段)
文章目录前言一、Node基础API核心API-无需`require`内置API-需要`require`无需`install`1.fs与异步IO①同步读取文件②异步读取文件③promisify2.buffer与字符集3.http练习1node基础fs\\buffer\\http搭建一个http服务4.stream5.子进程二... 查看详情
青训营月影老师告诉我写好javascript的三大原则之——过程抽象(代码片段)
...明式5.总结过程抽象/HOF/装饰器命令式/声明式参加了这次字节青训营的活动，见到了传说中的月影老师 查看详情
go语言上手|青训营笔记(代码片段)
这是我参与「第三届青训营-后端场」笔记创作活动的的第一篇笔记。文章目录语法速览基础语法第一：类型第二：内置库部分json库的使用时间库的使用字符串和数字互转os相关信息实战项目猜谜游戏（pass，过于... 查看详情
青训营node.js基础-web应用开发-开发调试-线上部署(代码片段)
文章目录Web应用开发HTTP模块Koa介绍中间件常用中间件基于Koa的前端框架调试断点调试日志调试线上部署利用多核CPU进程守护复杂计算前端开发与后端开发对比前几天学了一些Node.js的基础，今天来学习Web应用开发，在开发... 查看详情
青训营月影老师告诉我写好javascript的四大技巧——封装函数(代码片段)
如何写好JavaScript是每一个前端工程师一直以来在思考的问题，月影老师告诉我们一些写好JavaScript的原则，同时也教了一些我们如何写好JavaScript的技巧，今天来继续跟着月影老师学JavaScript吧~~起步今天我们来讨论函数... 查看详情
青训营月影老师告诉我写好javascript的四大技巧——风格优先(代码片段)
如何写好JavaScript肯定是每一个前端工程师一直以来要思考的问题，月影老师告诉我们一些写好JavaScript的原则，同时也教了一些我们如何写好JavaScript的技巧，今天来继续跟着月影老师学JavaScript吧~~我们在写代码的时候... 查看详情
青训营月影老师告诉我写好javascript的四大技巧——风格优先(代码片段)
如何写好JavaScript肯定是每一个前端工程师一直以来要思考的问题，月影老师告诉我们一些写好JavaScript的原则，同时也教了一些我们如何写好JavaScript的技巧，今天来继续跟着月影老师学JavaScript吧~~我们在写代码的时候... 查看详情