(十七)nuxt.js 简述 客户端渲染 服务端渲染 简介

时间：2024-03-02 14:52:26

nuxt.js 简述

https://www.nuxtjs.cn/
偶然间看见了这个东西 记录一下 顺便理解一下相关于 前端解析 部署 渲染啥的的流程
vue单页面应用渲染是从服务器获取所需js，在客户端将其解析生成html挂载于
id为app的DOM元素上，这样会存在两大问题。

什么是nuxt.js

Nuxt.js 是一个基于Vue.js的通用应用框架，预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。可以将html在服务端渲染，合成完整的html文件再输出到浏览器。
在这里插入图片描述
nuxt是关于服务端渲染的，如若想让组件在客户端渲染，可以使用将其包裹起来（该标签最多只能包含一个子组件/元素）。
这样在未获取到内容时，页面先采用<div class="no-ssr-placeholder" data-v-2a183b29=""></div>占位，然后将获取到的html覆盖该占位

和vue的区别 （具体使用得写流程）

  1. 路由
    nuxt按照 pages 文件夹的目录结构自动生成路由
    vue需在 src/router/index.js 手动配置路由

  2. 入口页面
    nuxt页面入口为 layouts/default.vue
    vue页面入口为 src/App.vue

  3. webpack配置
    nuxt内置webpack，允许根据服务端需求，在 nuxt.config.js 中的build属性自定义构建webpack的配置，覆盖默认配置
    vue关于webpack的配置存放在build文件夹下

服务端渲染 （SSR)

  1. 概念： 就是将数据和模板组装成 html
  2. 解释一：服务端在返回 html 之前，在特定的区域，符号里用数据填充，再给客户端，客户端只负责解析 HTML
  3. 解释二：服务端渲染的模式下，当用户第一次请求页面时，由服务器把需要的组件或页面渲染成 HTML 字符串，然后把它返回给客户端。客户端拿到手的，是可以直接渲染然后呈现给用户的 HTML 内容，不需要为了生成 DOM 内容自己再去跑一遍 JS 代码。使用服务端渲染的网站，可以说是“所见即所得”，页面上呈现的内容，我们在 html 源文件里也能找到。

优点：

首屏渲染快、利于SEO、可以生成缓存片段，生成静态化文件、节能（对比客户端渲染的耗电）

缺点：

用户体验较差、不容易维护，通常前端改了部分html或者css，后端也需要修改。

客户端渲染 （CSR)

  1. 解释： 客户端渲染模式下，服务端把渲染的静态文件给到客户端，客户端拿到服务端发送过来的文件自己跑一遍js，根据JS运行结果，生成相应DOM，然后渲染给用户。
  2. 解释： html 仅仅作为静态文件，客户端在请求时，服务端不做任何处理，直接以原文件的形式返回给客户端客户端，然后根据 html 上的 JavaScript，生成 DOM 插入 html。
  3. 在这里插入图片描述
优缺点：

好处：

网络传输数据量小、减少了服务器压力、前后端分离、局部刷新，无需每次请求完整页面、交互好可实现各种效果

坏处：

不利于SEO、爬虫看不到完整的程序源码、首屏渲染慢（渲染前需要下载一堆js和css等）

VS

其实前后端的渲染本质是一样的，都是字符串的拼接，将数据渲染进一些固定格式的html代码中形成最终的html展示在用户页面上。 因为字符串的拼接必然会损耗一些性能资源。
如果在服务器端渲染，那么消耗的就是server端的性能。
如果是在客户端渲染，常见的手段，比如是直接生成DOM插入到html 中，或者是使用一些前端的模板引擎等。他们初次渲染的原理大多是将原html中的数据标记（例如{{text}}）替换。
使用服务端的优势

事实上，很多网站是出于效益的考虑才启用服务端渲染，性能倒是在其次。
假设 A 网站页面中有一个关键字叫“前端性能优化”，这个关键字是 JS 代码跑过一遍后添加到 HTML 页面中的。那么客户端渲染模式下，我们在搜索引擎搜索这个关键字，是找不到 A 网站的——搜索引擎只会查找现成的内容，不会帮你跑 JS 代码。A 网站的运营方见此情形，感到很头大：搜索引擎搜不出来，用户找不到我们，谁还会用我的网站呢？为了把“现成的内容”拿给搜索引擎看，A 网站不得不启用服务端渲染。
但性能在其次，不代表性能不重要。服务端渲染解决了一个非常关键的性能问题——首屏加载速度过慢。在客户端渲染模式下，我们除了加载 HTML，还要等渲染所需的这部分 JS 加载完，之后还得把这部分 JS 在浏览器上再跑一遍。这一切都是发生在用户点击了我们的链接之后的事情，在这个过程结束之前，用户始终见不到我们网页的庐山真面目，也就是说用户一直在等！相比之下，服务端渲染模式下，服务器给到客户端的已经是一个直接可以拿来呈现给用户的网页，中间环节早在服务端就帮我们做掉了，用户岂不“美滋滋”？

通过服务端渲染的概念以及它的两个特点：首屏加载速度快、SEO优化。
我们知道，服务端渲染其实就是由浏览器做的一些事情，我们放到了服务端去做，那么对于掘金、简书、CSDN、知乎等网站的搭建，这种在网上一搜搜出一堆东西的网站，SEO做的很好，应该多少都用到服务端渲染了吧？当然，做服务端渲染成本是高昂的。
vue全家桶或者react全家桶，都是推荐通过服务端渲染来实现路由的。
服务端渲染并非完全之策（服务器稀少而宝贵），关于首屏渲染体验以及SEO的优化方案很多，在不使用服务端渲染这个操作下，我们最好的处理方式就是找寻替代优化方案。
关于在server端还是在browser端渲染的选择，更多的是要看业务场景。

为什么现在又流行服务器端渲染html？https://blog.csdn.net/b9q8e64lo6mm/article/details/79418969

相关文章