Node服务器端渲染(SSR概念篇)

单页应用程序(SPA)

概念

单页应用程序 (SPA) 全称是:Single-page application,SPA应用是在客户端呈现的(术语称:CRS)。

  • SPA应用默认只返回一个空HTML页面,如:body只有
  • 而整个应用程序的内容都是通过 Javascript 动态加载,包括应用程序的逻辑、UI 以及与服务器通信相关的所有数据。
  • 构建 SPA 应用常见的库和框架有: React、AngularJS、Vue.js 等。

Node服务器端渲染(SSR概念篇)_第1张图片

优缺点

◼ SPA的优点

  • 只需加载一次
    • ✓ SPA应用程序只需要在第一次请求时加载页面,页面切换不需重新加载,而传统的Web应用程序必须在每次请求时都得加载页面,需要花费更多时间。因此,SPA页面加载速度要比传统 Web 应用程序更快。
  • 更好的用户体验
    • ✓ SPA 提供类似于桌面或移动应用程序的体验。用户切换页面不必重新加载新页面
    • ✓ 切换页面只是内容发生了变化,页面并没有重新加载,从而使体验变得更加流畅
  • 可轻松的构建功能丰富的Web应用程序

◼ SPA的缺点

  • SPA应用默认只返回一个空HTML页面,不利于SEO (search engine optimization )
  • 首屏加载的资源过大时,一样会影响首屏的渲染
  • 也不利于构建复杂的项目,复杂 Web 应用程序的大文件可能变得难以维护

爬虫-工作流程

Node服务器端渲染(SSR概念篇)_第2张图片

搜索引擎的优化(SEO)

  • ◼ 语义性HTML标记
    • 标题用

      ,一个页面只有一个; 副标题用

    • 不要过度使用h标签,多次使用不会增加 SEO(search engine optimization )
    • 段落用

      ,列表用

      • ,并且li只放在 ul 中 等等。

  • ◼ 每个页面需包含:标题 + 内部链接
    • 每个页面对应的title,同一网站所有页面都有内链可以指向首页
  • ◼ 确保链接可供抓取,如下图所示:
  • ◼ meta标签优化:设置 description keywords 等
  • ◼ 文本标记和img:
    • 比如和加粗文本的标签,爬虫也会关注到该内容
    • img标签添加 alt 属,图片加载失败,爬虫会取alt内容。
  • ◼ robots.txt 文件:规定爬虫可访问您网站上的哪些网址。
  • ◼ sitemap.xml站点地图:在站点地图列出所有网页,确保爬虫不会漏掉某些网页

Node服务器端渲染(SSR概念篇)_第3张图片

静态站点生成(SSG)

  • ◼ 静态站点生成(SSG) 全称是:Static Site Generate,是预先生成好的静态网站。
    • SSG 应用一般在构建阶段就确定了网站的内容。  如果网站的内容需要更新了,那必须得重新再次构建和部署。
    • 构建 SSG 应用常见的库和框架有: Vue Nuxt、 React Next.js 等。
  • ◼ SSG的优点:
    • 访问速度非常快,因为每个页面都是在构建阶段就已经提前生成好了。
    • 直接给浏览器返回静态的HTML,也有利于SEO
    • SSG应用依然保留了SPA应用的特性,比如:前端路由、响应式数据、虚拟DOM等
  • ◼ SSG的缺点:
    • 页面都是静态,不利于展示实时性的内容,实时性的更适合SSR。
    • 如果站点内容更新了,那必须得重新再次构建和部署。

服务器端渲染(SSR)

概念

◼ 服务器端渲染全称是:Server Side Render,在服务器端渲染页面,并将渲染好HTML返回给浏览器呈现。

  • SSR应用的页面是在服务端渲染的,用户每请求一个SSR页面都会先在服务端进行渲染,然后将渲染好的页面,返回给浏览器 呈现。
  • 构建 SSR 应用常见的库和框架有: Vue Nuxt、 React Next.js 等(SSR应用也称同构应用) 。

◼ 服务器端渲染原理 :
Node服务器端渲染(SSR概念篇)_第4张图片

SSR优缺点

◼ SSR的优点

  • 更快的首屏渲染速度
    • ✓ 浏览器显示静态页面的内容要比 JavaScript 动态生成的内容快得多。
    • ✓ 当用户访问首页时可立即返回静态页面内容,而不需要等待浏览器先加载完整个应用程序。
  • 更好的SEO
    • ✓ 爬虫是最擅长爬取静态的HTML页面,服务器端直接返回一个静态的HTML给浏览器。
    • ✓ 这样有利于爬虫快速抓取网页内容,并编入索引,有利于SEO。
  • SSR应用程序在 Hydration 之后依然可以保留 Web 应用程序的交互性。比如:前端路由、响应式数据、虚拟DOM等。

◼ SSR的缺点

  • SSR 通常需要对服务器进行更多 API 调用,以及在服务器端渲染需要消耗更多的服务器资源,成本高。
  • 增加了一定的开发成本,用户需要关心哪些代码是运行在服务器端,哪些代码是运行在浏览器端。
  • SSR 配置站点的缓存通常会比SPA站点要复杂一点。

SSR 解决方案

◼ SSR的解决方案:

  • 方案一:php、jsp …
  • 方案二:从零搭建 SSR 项目( Node+webpack+Vue/React )
  • 方案三:直接使用流行的框架(推荐)
    • ✓ React : Next.js
    • ✓ Vue3 : Nuxt3 | | Vue2 : Nuxt.js
    • ✓ Angular : Anglular Universal

◼ SSR应用场景非常广阔,比如:

  • SaaS产品,如:电子邮件网站、在线游戏、客户关系管理系统(CRM)、采购系统等
  • 门户网站、电子商务、零售网站
  • 单个页面、静态网站、文档类网站
  • 等等

Node服务器端渲染(SSR概念篇)_第5张图片

你可能感兴趣的:(周记,node.js,SSR,前端)