Vue&SSR详解 VueServerRenderer Nutx

2024-11-01 11:54:01

SSR

Vue中的SSR（Server-Side Rendering，服务器端渲染）是一种将页面的渲染工作从客户端转移到服务器端的技术。以下是对Vue中SSR的详细解释：

一、SSR的工作原理

在传统的客户端渲染（CSR）中，页面的渲染是在浏览器中进行的。浏览器通过请求获取页面的HTML和JavaScript代码，然后在客户端进行页面的渲染和交互。而在SSR中，服务器接收到请求后，会执行Vue应用的服务器端代码，启动Vue实例，并利用vue-server-renderer模块将Vue组件及其依赖关系转化为HTML字符串。这个过程通常伴随着数据预取，即在服务器端调用API获取视图所需的数据，并将其注入到组件的上下文中，确保首次渲染时就有完整的内容。然后，服务器将这个完整的HTML页面发送给浏览器，浏览器无需再执行额外的JavaScript，即可直接展示出页面内容。

二、SSR的优势

  1. 更快的首屏加载：由于服务器在响应请求时已经生成了完整的HTML页面，所以用户打开页面时可以立即看到内容，无需等待JavaScript下载和执行。这一点在慢网速或者运行缓慢的设备上尤为重要。
  2. 更好的SEO：搜索引擎爬虫能够抓取到完整的HTML页面，并且页面内容可直接被搜索引擎索引，从而提升了页面在搜索引擎中的排名。
  3. 统一的心智模型：开发者可以使用相同的语言以及相同的声明式、面向组件的心智模型来开发整个应用，而不需要在后端模板系统和前端框架之间来回切换。

三、SSR的限制和挑战

  1. 服务器负载：在Node.js中渲染一个完整的应用要比仅仅托管静态文件更加占用CPU资源。因此，如果预期有高流量，需要为相应的服务器负载做好准备，并采用合理的缓存策略。
  2. 构建和部署的复杂性：SSR应用需要一个能让Node.js服务器运行的环境，不像完全静态的SPA那样可以部署在任意的静态文件服务器上。此外，还需要处理服务器与客户端之间的数据同步、路由等问题。
  3. 浏览器端特定的代码限制：一些外部库可能需要特殊处理才能在服务端渲染的应用中运行。浏览器端特定的代码只能在某些生命周期钩子中使用。

四、Vue中SSR的实现

在Vue中实现SSR需要使用Vue官方提供的服务器端渲染框架（Vue Server Renderer），并配置好服务器环境。以下是一个简单的实现流程：

  1. 安装依赖：确保项目中已经安装了Vue、VueRouter、Vue Server Renderer等依赖。
  2. 创建服务器入口文件：通常命名为server.js或类似名称。在该文件中引入必要的模块，包括Vue、Vue Server Renderer、Express（或其他后端框架）等。
  3. 配置路由和数据：创建一个Vue实例，并配置路由、数据等相关内容。
  4. 渲染逻辑：使用Vue Server Renderer的createRenderer方法创建一个renderer实例。在路由处理器中调用renderer实例的renderToString方法来将Vue实例渲染为字符串。
  5. 处理静态资源：使用Webpack进行服务器端渲染的配置，以处理静态资源的导出和加载。
  6. 客户端激活：在服务器端渲染后，需要在客户端激活Vue实例，以便能够响应交互事件和更新页面。可以通过在HTML中插入一个JavaScript脚本，并在脚本中使用createApp方法来创建客户端应用程序实例。

五、使用Nuxt框架简化SSR开发

Nuxt是一个基于Vue的SSR框架，它提供了许多内置的功能和配置，使得开发SSR应用变得更加简单和高效。使用Nuxt框架，开发者可以更快地构建和部署SSR应用，而无需从头开始配置和编写大量的服务器端代码。

综上所述，Vue中的SSR技术通过结合前后端的能力，既保证了初始加载时的性能体验和SEO优化，又保留了Vue.js在客户端高效更新和交互的特性。然而，它也有一些限制和挑战，需要开发者在设计和实现时进行权衡和考虑。

Vue Server Renderer

服务器端渲染（SSR, Server-Side Rendering）是一种在服务器上生成完整的 HTML 页面，然后将其发送到客户端的技术。Vue.js 提供了一个官方工具 Vue Server Renderer 来实现这一点。以下是一个简单的 Vue SSR 示例。

1. 设置项目

首先，我们需要初始化一个新的 Node.js 项目并安装必要的依赖。

mkdir vue-ssr-example 
cd vue-ssr-example 
npm init -y 
npm install vue vue-server-renderer express

2. 创建 Vue 组件

在 src 文件夹中创建一个 App.vue 文件，这是我们的根组件。

mkdir src

src/App.vue:

<template> 
<div id="app"> 
<h1>Hello, Server-Side Rendering with Vue!</h1> 
</div> 
</template> 


<script> 
export default { 
name: 'App' 
} 
</script> 


<style> 
#app { 
font-family: Avenir, Helvetica, Arial, sans-serif; 
-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 
text-align: center; 
color: #2c3e50; 
margin-top: 60px; 
} 
</style>

3. 创建服务器

在项目根目录中创建一个 server.js 文件，用于设置 Express 服务器和 Vue SSR。

server.js:

const express = require('express'); 
const { createBundleRenderer } = require('vue-server-renderer'); 
const fs = require('fs'); 
const path = require('path'); 
const resolve = file => path.resolve(__dirname, file); 


const server = express(); 


// 创建服务器渲染器 
const template = fs.readFileSync(resolve('./index.template.html'), 'utf-8'); 
const serverBundle = require('./dist/vue-ssr-server-bundle.json'); 
const clientManifest = require('./dist/vue-ssr-client-manifest.json'); 


const renderer = createBundleRenderer(serverBundle, { 
runInNewContext: false, 
template, 
clientManifest 
}); 


server.use(express.static(path.join(__dirname, 'dist'))); 


server.get('*', (req, res) => { 
const context = { url: req.url }; 
renderer.renderToString(context, (err, html) => { 
if (err) { 
if (err.code === 404) { 
res.status(404).send('Page not found'); 
} else { 
res.status(500).send('Internal Server Error'); 
} 
} else { 
res.send(html); 
} 
}); 
}); 


const PORT = process.env.PORT || 8080; 
server.listen(PORT, () => { 
console.log(`Server is running at http://localhost:${PORT}`); 
});

4. 创建 HTML 模板

在项目根目录中创建一个 index.template.html 文件，这是用于渲染 Vue 应用的模板。

index.template.html:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Vue SSR Example</title> 
<!-- 用于插入客户端脚本 --> 
<!-- vue-ssr-client-manifest will be auto injected --> 
</head> 
<body> 
<!-- 这是应用挂载点 --> 
<div id="app"><!-- server-rendered HTML will be injected here --></div> 
<!-- built files will be auto injected --> 
</body> 
</html>

5. 配置 Webpack

在项目根目录中创建一个 webpack.config.js 文件，用于配置 Webpack 打包。

webpack.config.js:

const path = require('path'); 
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin'); 
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin'); 


module.exports = { 
entry: './src/entry-server.js', 
target: 'node', 
output: { 
libraryTarget: 'commonjs2', 
path: path.resolve(__dirname, 'dist'), 
filename: 'vue-ssr-server-bundle.json' 
}, 
resolve: { 
alias: { 
'vue$': 'vue/dist/vue.esm.js' 
}, 
extensions: ['.js', '.vue', '.json'] 
}, 
module: { 
rules: [ 
{ 
test: /\.vue$/, 
loader: 'vue-loader' 
}, 
{ 
test: /\.js$/, 
loader: 'babel-loader', 
exclude: /node_modules/ 
} 
] 
}, 
plugins: [ 
new VueSSRServerPlugin() 
] 
}; 


// 需要另外配置一个 webpack 配置用于生成客户端文件 
const clientConfig = { 
entry: './src/entry-client.js', 
target: 'web', 
output: { 
path: path.resolve(__dirname, 'dist'), 
filename: 'bundle.js' 
}, 
resolve: { 
alias: { 
'vue$': 'vue/dist/vue.esm.js' 
}, 
extensions: ['.js', '.vue', '.json'] 
}, 
module: { 
rules: [ 
{ 
test: /\.vue$/, 
loader: 'vue-loader' 
}, 
{ 
test: /\.js$/, 
loader: 'babel-loader', 
exclude: /node_modules/ 
}, 
{ 
test: /\.(png|jpe?g|gif|svg)$/, 
loader: 'file-loader', 
options: { 
name: '[name].[hash].[ext]?[hash]' 
} 
} 
] 
}, 
plugins: [ 
new VueSSRClientPlugin() 
] 
}; 


module.exports = [clientConfig, module.exports]; // 返回两个配置

6. 创建入口文件

在 src 文件夹中创建两个入口文件：entry-server.js 和 entry-client.js。

src/entry-server.js:

import { createApp } from './app'; 


export default context => { 
return new Promise((resolve, reject) => { 
const { app, router } = createApp(); 


router.push(context.url); 


router.onReady(() => { 
const matchedComponents = router.getMatchedComponents(); 
if (!matchedComponents.length) { 
return reject({ code: 404 }); 
} 


resolve(app); 
}, reject); 
}); 
};

src/entry-client.js:

import { createApp } from './app'; 


const { app, router } = createApp(); 


router.onReady(() => { 
app.$mount('#app'); 
});

src/app.js:

import Vue from 'vue'; 
import App from './App.vue'; 
import router from './router'; 


export function createApp() { 
const app = new Vue({ 
router, 
render: h => h(App) 
}); 


return { app, router }; 
}

src/router/index.js:

import Vue from 'vue'; 
import Router from 'vue-router'; 


Vue.use(Router); 


export default new Router({ 
routes: [ 
{ 
path: '/', 
name: 'Home', 
component: () => import('../App.vue') 
} 
] 
})

7. 构建项目

在项目根目录中运行以下命令来构建项目：

npm install webpack webpack-cli webpack-node-externals babel-loader @babel/core @babel/preset-env vue-loader vue-template-compiler file-loader --save-dev 
npx webpack --config webpack.config.js

注意：Webpack 5 用户可能需要调整配置，使用 webpack-cli 而不是全局 webpack 命令。

8. 启动服务器

在项目根目录中运行以下命令来启动服务器：

node server.js

现在，你可以打开浏览器访问 http://localhost:8080，你应该会看到服务器端渲染的 Vue 应用。

这个示例展示了如何使用 Vue 和 Express 实现简单的服务器端渲染。根据实际需求，你可以进一步扩展和优化这个示例。

Nutx

以下是一个关于Nuxt框架的使用案例，涵盖了从包安装到入门使用的整个过程：

一、Nuxt框架安装

  1. 确保环境准备：

    • 安装Node.js和npm（Node包管理器）。
    • 可以通过命令行运行node -v和npm -v来检查它们的版本。

  2. 全局安装Vue CLI（如果尚未安装）：

    npm install -g vue-cli

  3. 创建Nuxt项目：

    • 使用Vue CLI（或npx）创建一个新的Nuxt项目。 
      npx create-nuxt-app my-nuxt-app
    • 按照提示完成项目设置，如项目名称、编程语言、包管理器、UI框架等。

  4. 进入项目目录并安装依赖：

    cd my-nuxt-app 
npm install

二、Nuxt项目入门使用

  1. 项目目录结构：
    • pages/：页面组件目录，每个.vue文件都会生成对应的路由。
    • components/：Vue组件目录，用于存放可复用的Vue组件。
    • static/：静态资源目录，用于存放静态文件如图片、字体等。
    • store/：Vuex状态管理目录，用于管理应用的全局状态。
    • nuxt.config.js：Nuxt全局配置文件，用于覆盖默认配置。
  2. 创建页面组件： 
    <template>  
  <div>  
    <h1>欢迎来到我的Nuxt应用</h1>  
  </div>  
</template>  

<script>  
export default {  
  // 页面组件的逻辑代码  
}  
</script>

  3. 运行开发服务器：
    • 访问http://localhost:3000即可在浏览器中查看Nuxt应用。
  4. 使用asyncData在服务器端获取数据：
    • 在页面组件中，可以使用asyncData方法在服务器端获取数据，并将数据注入到组件中。 
      <template> 
<div> 
<h1>文章列表</h1> 
<ul> 
<li v-for="article in articles" :key="article.id">{{ article.title }}</li> 
</ul> 
</div> 
</template> 


<script> 
export default { 
async asyncData({ params }) { 
const articles = await fetch('https://api.example.com/articles') 
.then(res => res.json()); 
return { articles }; 
} 
} 
</script>

      配置路由和导航守卫：

      • Nuxt会自动根据pages/目录下的.vue文件生成路由。
      • 可以在nuxt.config.js中配置路由的扩展属性，如中间件、别名等。
      • 可以在页面组件中使用middleware属性或全局中间件来定义导航守卫。

  5. 使用Vuex进行状态管理：
    • 在store/目录下创建Vuex模块，如index.js。
    • 在Vuex模块中定义状态、mutations、actions等。
    • 在页面组件中通过this.$store.state或this.$store.getters访问状态，通过this.$store.commit或this.$store.dispatch修改状态。
  6. 构建和部署：
    • 使用npm run build命令构建生产环境的Nuxt应用。
    • 将构建后的文件部署到服务器上，如使用Nginx或Apache等Web服务器。

三、总结

通过上述步骤，我们成功安装并入门使用了Nuxt框架。Nuxt框架提供了许多内置的功能和配置，使得开发Vue SSR应用变得更加简单和高效。同时，Nuxt还支持丰富的插件和模块生态系统，可以根据项目需求进行扩展和定制。希望这个使用案例能够帮助你快速上手Nuxt框架的开发。

上一篇：Prometheus套装部署到K8S+Dashboard部署详解


下一篇：【css】CSS 文本溢出显示省略号