无锡做网站品牌公司,物流网站建设 市场分析,网页设计效果图怎么做,深圳网站建设便宜信科网络1 理解基本概念
SPA#xff08;single-page application#xff09;单页应用#xff0c;默认情况下我们编写 Vue、React 都只有一个html 页面#xff0c;并且提供一个挂载点#xff0c;最终打包后会再此页面中引入对应的资源。#xff08;页面的渲染全部是由 JS 动态进行…1 理解基本概念
SPAsingle-page application单页应用默认情况下我们编写 Vue、React 都只有一个html 页面并且提供一个挂载点最终打包后会再此页面中引入对应的资源。页面的渲染全部是由 JS 动态进行渲染的。切换页面时通过监听路由变化渲染对应的页面 Client Side Rendering客户端渲染 CSR MPAMulti-page application多页应用多个html页面。每个页面必须重复加载jscss 等相关资源。服务端返回完整的 html同时数据也可以再后端进行获取一并返回“模板引擎”。多页应用跳转需要整页资源刷新。Server Side Rendering服务器端渲染 SSR 如何分清在哪渲染HTML 是在前端动态生成的“客户端渲染”在服务端处理好并返回的是“服务端渲染”。
2 优缺点
单页面应用SPA
组成一个主页面和页面组件刷新方式局部刷新SEO 搜索引擎优化无法实现页面切换速度快用户体验良好维护成本相对容易
多页面应用MPA
组成多个完整的页面刷新方式整页刷新SEO 搜索引擎优化容易实现页面切换切换加载资源速度慢用户体验差维护成本相对复杂
两者的共性
用户体验好、快内容的改变不需要重新加载整个页面服务端压力小。SPA 应用不利于搜索引擎的抓取。首次渲染速度相对较慢 第一次返回空的 html需要再次请求首屏数据白屏时间长。 1.3 解决方案
3 解决方案
静态页面预渲染(Static Site Generation) SSG在构建时生成完整的 html 页面。就是在打包的时候先将页面放到浏览器中运行一下将HTML保存起来仅适合静态页面网站。变化率不高的网站
SSR CSR 的方式 首屏采用服务端渲染的方式后续交互采用客户端渲染方式。NuxtJS
