资源访问流程、静（动）态网站、SSR、CSR、SSG、静态文件服务器

参考：
https://blog.csdn.net/m0_50818626/article/details/130127177

访问浏览器资源获取流程

假设是一个前后端分离的项目，并且前端代码只是纯前端内容，没有node.js代码。
项目部署的时候，前端打包后的代码部署到前端服务器，后端打包后的代码部署到后端服务器。
这里有个差别：

• 前端打包后的代码：就是纯静态资源文件，可以直接部署到静态文件服务器上。

  静态资源文件就是可以直接由浏览器加载并显示的内容
  

• 后端打包后的代码：不是静态资源，“打包”主要目的是为了简化部署、保证环境一致性以及优化运行效率。

那么当用户访问浏览器的时候资源的获取流程是这样的：

• 用户发起请求：
  用户在浏览器中输入应用的URL或者点击链接，浏览器发起HTTP(S)请求到前端服务器。
• 前端服务器响应：前端服务器接收到请求后，识别出这是一个静态资源请求（HTML、CSS、JavaScript等），不经过任何动态处理，直接将对应的前端静态资源（通常是入口HTML文件）返回给浏览器。
• 浏览器下载前端资源：浏览器接收到HTML响应后开始解析，并按照HTML中引用的其他资源（如CSS样式表、JavaScript文件、图片等）再次发起请求。浏览器下载这些前端资源，并将它们加载到内存中。
• 页面初始化：当JavaScript资源加载完毕后，前端框架（如React、Vue、Angular等）开始运行并接管整个页面的渲染逻辑。
• 前端应用与后端通信：前端应用通过调用后端提供的API接口获取数据。注意这里就是浏览器和后端服务器直接直接通信了。
• 重新渲染页面：浏览器获取到从后端获取的数据动态渲染用户界面，展示具体的内容。

所以大致的通信流程就是： 前端服务器 => 浏览器 <=> 后端服务器 ，首次访问访问将静态资源下载到浏览器之后，后续就是浏览器和后端服务器直接通信

但是如果前端代码包含node.js代码（一般用于请求的代理转发等），访问的流程：前端服务器 => 浏览器 <=> 前端服务器 <=> 后端服务器 ，首次访问访问将静态资源下载到浏览器之后，后续是浏览器发送请求，被前端浏览器接受，转发到后端服务器，之后前端服务器接收信息最后返回给浏览器。—— 这种是实际开发中比较常见的情况。

网站分类

静态网站

内容在服务器上预先生成，并且是以HTML文件的形式存储。每次用户请求页面时，服务器直接读取并发送这个预置的HTML文件到用户的浏览器。内容相对固定，除非手动编辑和重新上传文件，否则不会改变。
特点：

• 静态网站不会根据用户的不同而展示不同的页面，他们的页面源是一个。
• 交互性较低，一般只包含基本的超链接导航
• seo友好，内容固定且直接为搜索引擎爬虫可读的HTML
• 通常仅依赖HTML、CSS和JavaScript（前端技术），无需服务器端编程或数据库支持。

需要注意的是静态网站虽然不涉及服务段的动态内容生成，但是仍然可以通过JS编写AJAX请求来获取远程服务器上的数据，只是AJAX请求返回的内容是针对所有用户一致的，而不是针对特定用户定制的。

动态网站

内容在用户请求时动态生成。用户请求服务器的时候，服务器需要再向后端服务器发送请求获取数据。它基于服务器端脚本（如PHP、JS等）和数据库技术，当用户访问时，服务器会执行脚本，从数据库中检索所需的数据，并根据这些数据实时生成HTML页面。

• 动态网站会根据不同的用户展示不同的页面内容，js会根据数据信息动态的更新页面
• 具有高度的交互性和个性化体验，可以根据用户输入、查询条件、会话状态等动态调整显示内容
• seo不友好
• 除了前端技术外，还需要服务器端脚本语言和数据库系统共同协作，形成前后端分离或多层架构的设计模式。

使用前端技术（html,css,js）既可以编写静态网站也可以编写动态网站。

伪静态网站

伪静态网站是一种通过对动态网站进行技术处理而模拟出的静态网站，使得动态网站看起来像是静态网站。伪静态网站的实现方法是使用服务器端技术，将动态生成的网页内容保存为静态 HTML 文件，并将其缓存到服务器上。当用户请求访问网页时，服务器会检查是否已经存在相应的静态 HTML 文件，如果存在，则直接将其发送给用户，避免了重新生成网页内容的过程。如果不存在，则服务器会再次运行脚本程序生成新的网页内容，并将其保存为静态 HTML 文件并发送给用户，同时缓存该文件以备下一次使用。

伪动态网站

伪动态网站是将动态参数通过URL地址的形式传递给服务器端，然后使用服务器端脚本解析URL地址中的参数，并根据这些参数从数据库或其他数据源中获取对应的数据，最后"动态"生成HTML页面并将其返回给用户的浏览器展示。

网站渲染模式

SSR服务端渲染

服务端渲染是在服务端渲染生成HTML页面（包括相关的CSS和JS），并作为服务端响应返回给浏览器，最后在浏览器端将静态的HTML“激活”为能够交互的客户端应用。

服务端渲染在浏览器直接显示服务器生成的静态页面。这种方法对SEO友好且首屏加载速度快，但相比CSR会增加服务器压力。
Next.js、Nuxt.js等框架支持服务器端渲染。

CSR客户端渲染

客户端渲染就是在浏览器中生成和操作DOM。

浏览器接收一个基本的HTML结构（可能包含指向JavaScript文件的引用），然后通过运行JavaScript代码来动态填充和更新页面内容。
使用React、Vue、Angular等现代前端框架构建的单页应用（SPA）主要采用的就是客户端渲染。

SSG静态网站生成

静态网站生成是在构建时生成预渲染的HTML文件，而不是在用户请求时动态生成页面。
这些静态文件可以部署到任何静态托管服务上，访问速度快且易于缓存。

Gatsby、Hugo等静态网站生成器就是基于这一理念。

ISG静态增量生成

这是一种改进的静态生成方式，尤其适用于内容经常变化的网站。它能够在内容更新时只重新生成受影响的页面，从而结合了静态生成和动态更新的优点。

预渲染

类似于静态生成，但在构建时生成预渲染的HTML文件，但同时包含了CSR所需要的JavaScript包，以便在页面加载后，浏览器中的JavaScript接管并实现交互性功能，即所谓的“水合”过程。
和CSR的区别是将一个原本要动态渲染的网页先进行一次静态渲染生成完整的HTML文件，有利于首屏加载和SEO。

渲染模式和打包

项目使用的渲染模式是在开发阶段就已经决定好的，打包和部署只不过是实现渲染方式的一个步骤。
比如说SSG渲染方式的项目，被打包成静态资源，然后被部署到服务器上，从浏览器中访问该项目，直接获取的是部署在服务器上的静态资源，那使用的方式就是SSG渲染。
如果使用的是CSR渲染方式的项目，被打包成静态资源部署到服务器上，在浏览器上访问的时候会先访问部署在服务器上的index.html文件，同时该index.html文件引入的js文件会从后端获取数据资源然后在浏览器端进行渲染，那这使用的方式就是CSR。

项目中的渲染模式

注意一个项目可以使用多种渲染模式。
如同时使用预渲染和客户端渲染，这种结合方式可以充分利用两者优势，可以在单页面应用（SPA）中提高首屏加载速度和搜素引擎优化（SEO）。

项目服务器

项目服务器可以根据其提供的内容和技术特性主要分为静态文件服务器和动态内容服务器。

静态文件服务器

静态文件服务器主要用于托管和分发预先构建好的、不变的文件资源，如HTML、CSS、JavaScript文件、图片、视频等。
这类服务器的主要功能是高效地读取存储在磁盘上的文件并直接将其发送给客户端浏览器，而不涉及任何服务器端的动态内容生成。
同时也不宜依赖任何编程环境。
例如，使用Nginx作为静态文件服务器可以快速响应和传输静态资源。

对于不涉及Node.js的前端代码打包出来的一般就是静态资源文件，一般部署在静态文件服务器上。

动态内容服务器

动态内容服务器则用于处理那些需要根据用户请求动态生成内容的场景。
它们通常运行像PHP、Python 、Node.js (Express.js) 等后端编程语言
需要配置后端语言以来的环境。
能够执行服务器端的业务逻辑，如数据库查询、用户认证、内容个性化定制等，并将动态生成的结果以HTML或其他格式返回给客户端。

对于后端代码打包出来的内容通常部署在动态内容服务器上；
也通常将带有Node.js的前端代码部署在动态内容服务器上。

所以部署一个前后端分离的项目的时候通常：前端部署在动态内容/静态文件服务器上，后端部署在动态内容服务器上。
部署一个前后端不分离的项目时通常：将项目部署在 动态内容服务器。

联系

一般：
静态网站是将静态资源文件部署在静态文件服务器上通过SSG\ISG方式渲染。
动态网站是将代码部署在动态内容服务器上通过SSR\CSR\预渲染方式渲染。