SSR渲染--01--初识Nuxt

news2024/11/16 7:42:10

SSR服务端渲染

SSR服务端渲染：在后端将html页面处理好，前端直接展示（可以解决为后端给你传了一个html脚本，全段渲染）

为什么要有SSR服务端渲染？

可以解决单页面首屏加载慢的问题，同时有利于用户体验。

服务端渲染？客户端渲染？更好的方式？

服务端渲染：前后端代码完全耦合在一起，不利于开发和维护；（不利于前后端分离开发）；服务端压力大；用户体验一般（查看不同的页面，需要刷新浏览器）；无法操作dom；

客户端渲染：首屏渲染慢，不利于SEO （搜索引擎优化）的

同构渲染：后端渲染+前端渲染【操作比较复杂，所以现在又Nuxt框架，自动帮我们实现渲染】

具体的流程就是，在服务端执行一次框架的代码，用于实现服务端渲染，实现首屏的输出，然后在客户端再执行一次，用于接管页面交互(后期的交互都是客户端渲染)。这样就解决了 SEO 和首屏渲染慢的问题，拥有传统服务端渲染的优点，也有客户端渲染的优点
（首屏用服务端渲染，后续用客户端渲染）

【可以理解为服务端渲染一次，客户端渲染一次】
【主要是因为如果只是服务端渲染的话，那么相当于是一个文本字符串构成的页面，那么vue原本的一些事件绑定还有特性都没办法用了】

如何实现同构渲染（SSR）？

第一种方式：

使用 Vue , React 等框架的官方解决方案：

这种方式的有点：有助于立即原理。

缺点：需要搭建环境，比较麻烦。

第二种方式：就是使用第三方的解决方案

React 生态的 Next.js

Vue 生态的 Nuxt.js

涉及构建设置和部署的更多要求

客户端渲染的构建仅仅构建客户端的应用就可以了，而同构渲染需要构建两个端。

客户端渲染的应用可以部署在任意的 Web 服务器中，而同构渲染的应用只能部署在 Node.js Server

中。

NuxtJs

官网：https://v2.nuxt.com/docs/get-started/installation

安装

在这里插入图片描述

配置项

在这里插入图片描述

✨  Generating Nuxt.js project in nuxt_pro
【项目名称】? Project name: nuxt_pro
【编程语言】? Programming language: JavaScript
【打包方式】? Package manager: Npm 
【UI框架】? UI framework: None 
【模板引擎】? Template engine: HTML 
【格式化空间】? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
【格式化空间】? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
【测试框架】? Testing framework: None
【渲染技术：SSR（服务端渲染）】? Rendering mode: Universal (SSR / SSG)
【开发目标】? Deployment target: Server (Node.js hosting)
【开发工具】? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
【github 账号】? What is your GitHub username? aliyanyi
【版本控制】? Version control system: Git

项目启动

在这里插入图片描述

目录结构

assets	资源目录，用于存放需要编译的静态资源。例如：LESS、SASS等；默认情况下，Nuxt使用Webpack若干加载器处理目录中的文件
components	vue组件目录，Nuxt.js 不会增强该目录，及不支持SSR
layouts	布局组件目录
pages	页面目录，所有的vue视图，nuxt根据目录结构自动生成对应的路由。
plugins	插件目录
static	静态文件目录，不需要编译的文件
store	vuex目录
nuxt.config.js	nuxt个性化配置文件，内容将覆盖默认
package.json	项目配置文件