Let my path choose you
HOMEPAGE
TYPESCRIPT
CSR
SSR
all in all
简而言之，做一个常规的企业官网，复杂度相对而言是比较低的，难点在于视觉、动画，并且截至 2022 年 9 月 8 日浏览器的SEO(Search Engine Optimization)对SPA(Single Page Application)应用-CSR(Client Side Render 客户端渲染) 还不友好，为了SEO需要上Multi Page Application-SSR(Server Side Render)，SSG(Static Site Generation) 不适合动态获取数据的场景Nuxt.js Next.js这样的服务端渲染框架要考虑实际情况，切勿舍近求远。
references：
服务端渲染(SSR)和预渲染(Prerendering)有什么区别？
官网网站用什么技术栈比较合理？ - 知乎 (zhihu.com)
2022 年，企业官网开发，前端需要用到那些技术？ - 知乎 (zhihu.com)
nuxt 框架 Universal 和 Spa 两种 render mode 的区别_daruanzai3165 的博客-CSDN 博客
SSG 和 SSR 有什么区别? - 知乎 (zhihu.com)
https://zhuanlan.zhihu.com/p/431930680
chrisvfritz/prerender-spa-plugin: Prerenders static HTML in a single-page application. (github.com)
Next.js 的三种渲染方式（BSR、SSG、SSR） - 知乎 (zhihu.com)
vue 单页面(SPA)和多页面(MPA)的区别(详细答案) - 掘金 (juejin.cn)
浅谈 SPA、CSR、SSR、MPA、SSG 专有名词 | 是 Ray 不是 Array (israynotarray.com)
vue 服务端渲染和客户端渲染的区别是什么-前端问答-PHP 中文网
为什么客户端渲染首屏渲染慢和 SEO 问题_Coder 小何的博客-CSDN 博客
Render
js 在任何时候都会阻塞 dom,所以通常会将 js 放在 body 结束之后,这样页面渲染完成再执行 js，有利于用户体验
css 的加载会阻塞后面 js 的执行；css 加载不会阻塞 DOM 树的解析，但会阻塞 Render 树的渲染
重排一定会触发重绘，重绘不一定会触发重排
触发重排
- 页面首次渲染
- 浏览器窗口大小变化
- 元素尺寸、位置、内容、字体大小发生变化
- 添加或删除可见的元素
- 激活伪类时
触发重绘
- 改变元素颜色、背景、visibility、outline 等属性
referrences
*浏览器已原生支持 ES 模块，这对前端开发来说意味着什么？
客户端渲染路线：
- 请求一个 html
- 服务端返回一个 html
- 浏览器下载 html 中的 js/css 文件
- 等待 js 文件下载完成，加载并初始化完成，可以运行，由 js 代码向后端请求数据(ajax/fetch)
- 等待后端数据返回
- 客户端从无到完整地，把数据渲染为响应页面
服务端渲染路线：
- 请求一个 html
- 服务端请求数据(内网请求快)
- 服务器初始渲染(服务端性能好，较快)，可以理解为组装数据和模板
- 服务端返回已经有正确内容的页面
- 客户端请求 js/css 文件
- 等待 js 文件下载完成，加载并初始化完成
- 客户端把剩下一部分渲染完成(内容小，渲染快)
Deploy
# ubuntu install nginx
sudo apt install -y nginx
直接在浏览器访问服务器公网ip，如果出现nginx欢迎页面，说明安装成功