SSR和SPA渲染模式
SSR（Server-Side Rendering）和SPA(Single Page Application)是前端开发中常见的两种渲染模式，它们各自有独特的优缺点以及适用场景。
SPA(单页应用)
SPA单页应用的“单页渲染”是指一种构建Web应用的方式，其中整个应用仅由一个页面组成，所有的页面变化都是通过动态加载和替换页面的部分内容实现的，而无需重新加载整个页面。这种应用设计模式允许用户在不离开当前页面的情况下与应用进行交互，从而提供流畅、类似桌面应用的体验。
渲染过程
-
初次加载
当用户访问SPA时，服务器会发送一个包含HTML、CSS和JavaScript的初始页面，这个页面包含了应用的主要结构和样式，但大部分动态和功能有客户端JavaScript来处理。
-
客户端渲染
JavaScript接管了后续的内容渲染。当用户与应用交互时（例如点击链接、提交表单、滚动页面等），JavaScript框架（如Vue、React或Angular）会根据新的数据更新DOM（Document Object Model）树，从而改变页面的视觉呈现，而不是请求一个新的HTML页面。
-
路由管理
SPA通常使用前端路由来处理页面间的导航。当用户尝试访问不同的“页面”时，JavaScript会拦截这些请求，更新URL的哈希值或者使用HTML5的History API来改变浏览器地址栏的URL，但不会出发完整的页面刷新。页面的更新由前端代码根据新的路由状态来处理。
-
异步数据加载
在SPA中，数据通常是通过AJAX（Asynchronous JavaScript and XML）或Fetch API异步加载的。当需要新的数据时，JavaScript会向服务器发送请求，获取数据后更新页面上的内容。这种方式可以让页面保持响应状态，即使是在加载数据的过程中。
-
状态管理
由于SPA的所有内容都在一个页面中更新，因此需要有效的状态管理策略来跟踪和维护应用的数据和状态。这通常涉及到使用状态管理库如Vuex(Vue.js)、Redux(React)或NgRx(Angular)。
优势
- 用户体验、快速的页面切换：SPA提供了平滑的过渡和快速的响应，因为它们避免了页面之间的加载延迟。
- 高性能：按需加载数据，减少了初始加载时间和带宽消耗。
- 动态更新：用户可以在不中断其活动的情况下接收事实更新。
- 开发效率高：可以利用现代前端框架（如React、Vue或Angular）的特性，简化开发流程。
缺点
- SEO（搜索引擎优化）不友好：传统的SPA可能会影响SEO，因为搜索引擎爬虫可能无法有效地解析JavaScript渲染的内容。不过，现代SPA框架提供了SSR和与渲染等解决方案来缓解这一问题。
- 首屏加载慢：虽然SPA可以减少页面加载次数，但是初始加载时间可能需要下载大量JavaScript和依赖库，这可能会增加首次加载的时间。
- 开发复杂度：高在SPA通常需要更复杂的前端架构和状态管理，增加了开发和维护的难度。
- 资源消耗：客户端需要处理所有渲染工作，对于计算能力有限的设备，这可能是一个问题。
SSR(服务端渲染)
SSR指在服务器端生成HTML字符串，然后将这个字符串发送到浏览器端，浏览器下载并显示这些已经渲染好的HTML页面。
渲染过程
-
路由匹配
当客户端发起请求时，服务器会根据请求的URL进行路由匹配，确定要渲染的具体页面。这是为了决定哪个组件或视图应该被渲染。
-
数据获取
在确定了渲染的页面后，服务器会从数据库或其他数据源获取页面所需的数据。这可能包括动态内容、用户特定数据或任何需要实时获取的信息。
-
数据注入
将获取到的数据注入到页面的模板中。模板通常使用某种模板引擎（如Handlebars、EJS、Pug等）来定义页面的结构和数据填充位置。在现代前端框架中，如Vue或React，这可能涉及将数据传递给组件。
-
模板渲染
使用模板引擎将注入了数据的模板进行渲染，生成最终的HTML内容。在框架中，这可能意味着将组件转换成静态HTML字符串。
-
HTML返回
将生成的HTML内容作为响应返回给客户端。浏览器收到HTML后，会开始解析并呈现页面。
-
客户端初始化
对于使用现在前端框架的SSR应用，服务器返回的HTML中可能包含了客户端运行所需的JavaScript文件。浏览器加载并执行这些脚本后，会重新挂载组件状态，使得页面具有交互性。这意味着在客户端再次执行框架的生命周期钩子，如React中的componentDidMount或Vue中的mounted钩子，从而恢复页面的动态功能。
-
后续请求处理
随后的用户交互或页面跳转可能直接由客户端处理，使用SPA模式，或者继续通过服务器端渲染来更新页面，这取决与应用的设计和配置。
优点
- SEO友好：搜索引擎更容易抓取和索引页面内容，因为HTML中包含完整的内容。
- 首屏加载速度快：用户首次访问时，浏览器几乎立即显示完整页面，提高用户体验。
- 数据流控制：服务器可以根据需要逐步发送数据，减少初始数据传输量。
缺点
- 服务器压力大：服务器需要处理更多的渲染任务，尤其是在流量大的情况下。
- 开发复杂度：高在需要同事考虑服务器端和客户端的渲染逻辑。
- 重复加载：每次请求都需要重新渲染页面，可能会导致资源浪费。
技术选型
在创建新项目时决定使用SPA还是SSR，通常取决于多个因素，包括但不限于项目的需求、团队的技术栈、性能考虑、SEO需求、用户体验目标等。
SPA与SSR的选择依据（两者的区别）
- 性能与SEO
- 如果项目需要良好的SEO效果，SSR可能是更好的选择，因为它可以生成完整的HTML页面拱搜索引擎抓取。
- 如果性能优先，SPA由于减少了服务器的负担和网络请求次数，可能提供更快的后续页面加载速度。
- 用户体验
- SPA提供了类似原生应用的流畅体验，适合需要实时更新内容的应用。
- SSR更适合那些需要快速展示内容给用户的页面，如新闻站点或博客。
- 开发与维护成本
- SSR通常需要更复杂的后端集成和更高的服务器资源消耗。
- SPA可能在前端开发上需要更多的工作，尤其是状态管理和路由管理。
- 团队技能
- 如果团队对后端开发更为熟悉，可能倾向于SSR。
- 如果团队主要专注于前端开发，SPA可能更容易上手。
框架/库选择
- SPA框架
- React.js：配合React Router用于SPA开发。
- Vue.js：Vue Router也是SPA开发的常见选择。
- Angular：自带的路由模块支持SPA 开发。
- SSR框架/库
- Next.js：基于React的框架，支持SSR和静态生成。
- Nuxt.js：基于Vue.js的框架，转为SSR设计。
- Angular Universal：允许Angular应用在服务器端渲染。
当你选择框架式，要考虑它是否支持你需要的渲染模式。例如，Next.js和Nuxt.js这样的框架默认支持SSR，而React或Vue本身并不直接提供SSR支持，但可以通过额外配置和库来实现。
涉及的部分面试题
-
解释SPA和SSR的区别。
这个问题是考察对两种技术概念的理解，以及它们在实际应用中不同之处。
-
SSR优点和缺点是什么？
考察是否了解SSR带来的性能提升、SEO优化等优点，以及增加的服务器负载、开发复杂度等潜在缺点。
-
SPA的优缺点是什么？
考察对SPA提供的流畅体验、快速响应等优点的认识，以及其可能对SEO的影响、初次加载量大等问题的了解。
-
在什么情况下你会选择SPA而非SSR，反之亦然？
考察是否能柑橘项目需求、性能需求、目标受众等因素做出合理的技术选型决策。
-
如何优化SPA的首屏加载时间？
考察对代码分隔、懒加载、预加载等优化策略的掌握程度。
以下是一些有效的方法来优化SPA的首屏加载性能
-
代码分割
使用Webpack等构建工具的动态导入功能，将代码分割成更小的块，按需加载。这意味着用户只下载他们单页真正需要的代码。
使用Webpack、Rollup、Parcel等工具实现代码分割（方式大致为按路由分割、按组件分割、异步加载库和模块、基于条件的分割）。
-
懒加载
对于非关键资源，如图片、视频和非首屏可视范围内的组件，使用懒加载技术，当这些资源进入视口时再加载。
-
预加载与预取
使用
<link rel="preload">和<link rel="prefetch">来提前加载关键资源和后续页面可能需要的资源。 -
压缩与最小化
压缩CSS、JavaScript和HTML文件，减少文件大小。同时，对代码进行最小化处理，移除空白和注释，进一步减少文件体积。
-
缓存策略
合理设置HTTP缓存头，如Cache-Control和Expires，确保静态资源和不变的文件被浏览器缓存。
-
Service Worker与离线缓存
实现Service Worker来缓存关键资源和静态文件，使应用可以在离线状态下运行，并加快后续加载速度。
-
优化图片
使用现代图像格式如WebP，以及对图片进行压缩和适当的尺寸裁剪，减少图片的加载时间。
-
减少HTTP请求
减少文件的数量，例如通过合并CSS和JavaScript文件，或者使用雪碧图（Sprite Images）来合并小图标
-
CDN（Content Delivery Network）
使用font-display属性优化字体加载策略，确保在字体在加载之前页面的可读性不受影响。
-
优化第三方脚本
推迟非关键的第三方脚本加载，或者使用异步加载，避免它们阻塞页面渲染。
-
减少DOM操作
减少JavaScript对DOM的操作，特别是避免在渲染关键路径上的负责操作，可以使用虚拟DOM（如React、Vue中的）来提高渲染效率。
-
使用性能分析工具
使用Chrome Lighthouse、WebPageTest等工具定期检查应用的性能，根据报告中的建议进行优化。
-
-
如何在SPA中实现SEO优化？
考察是否熟悉预渲染、动态渲染、SSR或Prerender.io等工具和服务。
-
预渲染（Prerendering）
预渲染是将SPA的动态内容在构建时转换为静态HTML文件，这样搜索引擎爬虫可以轻松抓取页面内容，可以使用prerender-spa-plugin(Vue.js)、next export(Next.js)等工具来实现预渲染。
-
动态渲染（Dynamic Rendering）
动态渲染结合了SPA的客户端渲染和SSR的优势，它在服务器端为搜索引擎爬虫生成HTML，而对于普通用户则使用客户端渲染。Google提供了动态渲染的指南和工具。
-
使用JSON-LD结构化数据
JSON-LD是一种在网页上嵌入结构化数据的方法，可以帮助搜索引擎更好地理解页面内容。即使页面主要由JavaScript生成，搜索引擎也能通过JSON-LD理解页面的主题和元数据。
-
使用标签和
标签 确保每个页面都有恰当的描述、关键词和
标签，这些是搜索引擎页面的重要信息。 -
设置robots.txt和sitemap.xml
robots.txt文件告诉搜索引擎爬虫哪些页面是可以或不可以抓取的。sitemap.xml文件则提供了一个网站地图，帮助搜素引擎发现和索引网站的页面。
-
优化页面加载速度
快速的页面加载速度不仅是用户体验的关键，也是SEO的一个重要因素。优化代码、压缩资源、使用CDN和缓存策略都能提高页面加载速度。
-
使用头部和尾部的加载策略
确保页面的头部和关键内容在页面完全加载前就可以被看到，这有助于提高用户体验和SEO评分（由各种SEO分析工具提供）。
-
-
在SPA中，如何解决跨域问题？
考察对CORS、代理服务器、同源策略等知识点的了解。
不同源（协议、域名、端口三者任意一项不同）之间的请求。
-
JSONP（JSON with Padding）
JSONP是一种通过动态插入
<script>标签来绕过同源策略的技术，适用于GET请求。客户端通过添加回调函数和script标签发起请求，服务器返回一个函数调用，其中包含数据作为参数。
-
CORS（Cross-Origin Resource Sharing）
推荐使用这个
CORS是现代Web开发中最推荐的跨域解决方案，由服务器端实现。
服务器需要设置CORS响应头，如Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等。
-
使用代理服务器
在开发环境中，可以配置前端开发服务器（如webpack-dev-server）作为一个代理，将跨域请求转发到目标服务器。
这样做可以绕过浏览器的同源策略，因为请求看起来像是来自同一源（服务器之间是没有同源策略的）。
-
后端代理
如果有后端服务，可以在后端服务器上创建一个代理接口，改接口接收前端的请求并转发到实际的API服务器，然后再将结果返回给前端。
-
WebSocket
WebSocket协议本身不受同源策略的限制，因此可以用来发送跨域请求，不过这通常用于实时通信场景。
-
使用CORS中间件
如果你是自己搭建的服务器，可以使用现成的CORS中间件，如Node.js中的cors模块，来自动设置CORS响应头。
-
子域名共享Cookie
如果跨域请求涉及到身份验证，可以通过子域名共享Cookie来保持登录状态，但这要求服务器正确配置Cookie的domain属性
-
Content Security Policy（CSP）
虽然CSP不是直解决跨域问题，但它可以被用来放宽某些同源策略的限制，允许从指定的源加载资源。
-
9473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
