谈谈你对 SPA的理解-EW帮帮网

谈谈你对 SPA的理解
扩展
- vue如何实现静态页面预渲染
- 如何使用NuxtJs

谈谈你对 SPA的理解

SPA

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

SPA (single-page application)单页应用。

默认情况下我们编写Vue、React都只有一个html 页面，并且提供一个挂载点，最终打包后会再此页面中引入对应的资源。

页面的渲染全部是由jS 动态进行染的。

切换页面时通过监听路由变化，渲染对应的页面。

客户端渲染: client Side Rendering，客户端渲染 CSR

MPA

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

MPA(Multi-page application)多页应用，多个html页面。

每个页面必须重复加载，js，css 等相关资源。

服务端返回完整的 html，同时数据也可以再后端进行获取一并返回“模板引擎”》。

多页应用跳转需要整页资源刷新。

服务器端渲染: Server Side Rendering，服务器端渲染 SSR

如何分清在哪渲染:

HTML是在前端动态生成的“客户端染”，
HTML在服务端处理好并返回的是“服务端渲染“。

更多详细内容，请微信搜索“前端爱好者“， 戳我查看 。

SPA与MPA的优缺点

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

总结 SPA优点

用户体验好、快，内容的改变不需要重新加载整个页面，服务端压力小。
SPA应用不利于搜索引擎的抓取
首次渲染速度相对较慢 (第一次返回空的 html，!需要再次请求首屏数据)白屏时间长

解决方案

静态页面预渲染(Static site Generation)SSG，在构建时生成完整的 html页面。(就是在打包的时候，先将页面放到浏览器中运行一下，将HTML保存起来)，仅适合静态页面网站。变化率不高的网站
SSR+CSR的方式，首屏采用服务端渲染的方式，后续交互采用客户端渲染方式。NuxtJs

扩展

vue如何实现静态页面预渲染

在Vue中实现静态页面预渲染的示例，可以使用Vue CLI提供的插件vue-cli-plugin-prerender-spa。

以下是一个简单的示例步骤：

首先，确保你已经全局安装了Vue CLI。如果没有，可以运行以下命令进行安装：
```
npm install -g @vue/cli
```
创建一个新的Vue项目。可以运行以下命令并按照提示进行配置：
```
vue create my-project
```
进入项目目录：
```
cd my-project
```
安装预渲染插件vue-cli-plugin-prerender-spa：
```
vue add prerender-spa
```
安装完成后，会出现一些配置选项，比如需要预渲染的路由、要排除的路由等。根据项目需求进行配置。
在src/main.js文件中，将new Vue()的实例化过程包裹在一个条件语句中，以便只在预渲染时实例化Vue应用程序：
```
if (typeof window !== 'undefined') {
  new Vue({
    // ...Vue实例的配置
  }).$mount('#app');
}
```

在package.json文件中添加一个自定义脚本，用于执行预渲染：

"scripts": {
  "prerender": "vue-cli-service prerender",
  // ...
}

运行预渲染脚本，生成静态HTML文件：
```
npm run prerender
```
完成后，在项目根目录下会生成一个dist文件夹，其中包含了预渲染的静态HTML文件。

这只是一个简单的示例，实际上还可以进行更多的配置，如页面标题、meta标签等。你可以根据具体需求和文档进一步了解和定制预渲染插件的功能。

在预渲染过程中，动态加载的内容（如异步数据、用户交互等）可能无法被预渲染，因此需要在Vue组件中注意处理这些情况，以确保预渲染结果的准确性。

如何使用NuxtJs

要使用Nuxt.js，您可以按照以下步骤进行操作：

安装Node.js：首先，确保您的计算机上已安装Node.js。您可以从官方网站（https://nodejs.org）下载并安装适用于您操作系统的版本。
创建一个新的Nuxt.js项目：打开命令行工具，并导航到您想要创建项目的目录中。然后运行以下命令来创建一个新的Nuxt.js项目：

npx create-nuxt-app <project-name>

配置项目选项：在创建项目时，您将被提示选择一些项目选项，例如UI框架、测试工具等。根据您的需求进行选择，或者直接按回车键使用默认选项。
安装依赖项：项目创建完成后，进入新创建的项目目录，并运行以下命令来安装所有必需的依赖项：

cd <project-name>
npm install

运行开发服务器：安装完成后，运行以下命令启动开发服务器：

npm run dev

这将启动一个本地开发服务器，并在浏览器中打开一个新窗口，显示您的Nuxt.js应用程序。

开始编写代码：现在，您可以在项目目录中的pages目录中创建Vue组件来构建您的应用程序页面。您还可以使用Nuxt.js提供的其他功能，如路由系统、插件、中间件等来定制和扩展您的应用程序。

这只是一个快速入门指南，以帮助您开始使用Nuxt.js。要了解更多关于Nuxt.js的详细信息，请参阅官方文档（https://nuxtjs.org）。

谈谈你对 SPA的理解