大家好，我是大澈！
最近这段时间，我有在深度复盘 Nuxt服务端渲染 相关知识，和兄弟们一起分享，一起唠唠。
一、经典Web开发模式 列举
抛开一些现代Web开发模式不谈，如：微前端、无服务器（Serverless）、PWA、Jamstack，等等。
主要还是因为我没深入接触过，所以这里我们只简单列举几个 经典 Web 开发模式。
首先，你要知道！
架构设计：前后端不分离、前后端分离。
应用类型：单页面应用（SPA）、多页面应用(MPA)。
渲染优化手段：预渲染、服务端渲染。
然后，你要知道！
我的技术栈：前端是以Vue生态为主，次React生态。后端是以Java生态为主，次Node生态。
废话一句：前后端技术栈太多，推荐大家建立一条适合自己的生态环境。
所以下面举例的技术栈，根据个人情况改动哈！
最后，你要知道！
前后端不分离 + MPA：技术栈用 Thymeleaf 或 JSP 。
前后端分离 + SPA + 预渲染：技术栈用 Prerender SPA Plugin 或 Nuxt。
对于 SPA已存在项目，做预渲染，用 Prerender SPA Plugin 。对于 SPA新项目 或 MPA项目，做预渲染，用 Nuxt 。
值得一提的是，静态站点生成（SSG）和 预渲染 原理很相似，可以定义为是预渲染的一种具体实现方式、一种特例。
前后端分离 + SPA + SSR：这是我们的重点关注，技术栈用 Nuxt 。
前后端分离 + MPA + 预渲染：技术栈用 Nuxt 。
前后端分离 + MPA + SSR：技术栈用 Nuxt 。
二、Nuxt服务端渲染原理
回归正题：Nuxt服务端渲染原理。
Nuxt.js 的 SSR 工作流程可以分为以下几个步骤：
1、请求到达服务器
当用户访问一个页面时，请求首先到达 Nuxt.js 服务器（Node服务）。
2、路由匹配
Nuxt.js 根据请求的 URL 匹配对应的路由，并确定需要渲染的页面组件。
3、数据获取
如果页面组件中定义了 asyncData 或 fetch 方法，Nuxt.js 会在渲染页面之前调用这些方法，从后端 API 获取数据。这些数据会被注入到页面的 Vue 实例中。
4、服务端渲染
Nuxt.js 使用 Vue.js 的服务端渲染能力，将页面组件渲染为 HTML 字符串（虚拟DOM），再被转换为静态 HTML，同时保留 Vue 的客户端激活能力（hydration）。
5、返回 HTML
服务器将渲染好的 HTML 字符串发送给浏览器。HTML 中包含了页面内容、CSS 样式以及客户端 JavaScript 文件。
6、客户端激活
浏览器接收到 HTML 后，会加载并执行客户端 JavaScript。Vue.js 会接管页面，将其转换为一个可交互的 SPA（单页面应用），这个过程称为 hydration（客户端激活），确保页面在客户端可以继续响应交互。
7、后续路由切换
当用户点击页面中的链接时，Nuxt.js 会使用客户端路由（Vue Router）进行页面切换，无需重新加载整个页面。
优点：
1、更好的 SEO。
因为传统的搜索引擎只会从 HTML 中抓取数据，这会导致SPA前端渲染的页面无法被抓取。
2、更快的内容到达时间。
特别是对于缓慢的网络情况或运行缓慢的设备 ，页面首屏时间大概有80%消耗在网络上，剩下的时间在后端读取数据以及浏览器渲染，显然要优化后面的20%是比较困难的，优化网络时间是效果最明显的手段。传统的Ajax请求是先请求js再由js发起数据请求，两项时间再加上浏览器渲染时间才是首屏时间。而SSR能将两个请求合并为一个。
缺点:
1、更多的服务器端负载。
2、服务器端和浏览器环境差异带来的问题。
- end -
承接产品推广/软件开发/bug修复，联系和更多内容在绿色App搜@程序员大澈：专注于前后端技术知识分享，最后感谢兄弟们给个点赞、分享、推荐！