这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天。
CSR\SSR\SSG
同构SSR
前后端一体化，一套React代码在服务器上运行一遍，到达浏览器又运行一遍，到达浏览器又运行一遍。前后端都要参与渲染，而且首次渲染出的HTML要一样
SSG：静态站点生成，在构建的时候直接把结果页面输出html到磁盘，每次访问直接把html返回给客户端，相当于一个静态资源；CDN是指建立并覆盖在Internet之上，由分布在不同区域的边缘节点服务器群组成的分布式网络。
SSR,SSG的优势：更短的首屏时间。因为SSR/SSG只需要请求一个HTML文件就能展现出页面，虽然在服务器上会调取接口，但服务器之间的通信要远与客户端快，甚至是同一台服务器上的本地接口调取。因为不再需要请求大量js文件，这就使得SSR/SSG可以拥有更短的首屏时间
什么是Next,js
Next.js是一个构建于Node.js之上的web开发框架，支持基于React的web应用程序功能，例如服务器端渲染和生成静态网站
Next.js客户端开发
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;
}
}
复制代码
JS适配
export const UserAgentProvider = ({ children }: IProps): JSX.Element =>{
const [userAgent，setlserAgent] = useState<Environment>(Environment.none);//服务器渲染初始化渲染未必是预期效果，none缓冲切换视觉)
//监听本地缓存来同步不同页面间的主题（当前页面无法监听到，直接在顶部栏进行了类的切换)
useEffect(()=>{
const checkUserAgent = (: void -> {
const width = document.body.offsetwidth;
//用宽度去判断，是为了适配不改机型，仅拉扯屏幕宽度的情况
if (width < 768){
//手机端
setUserAgent(Environment.mobile);
}else if (width >=7688& width <1280){
// ipad端
setUserAgent( Environment.ipad);}
else if (width >= 1200){
// 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=i{ userAgent }>
{children}
</ UserAgentContext.Provider>
);
};
