Vue&SSR详解 VueServerRenderer Nutx

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 -vnpm -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.statethis.$store.getters访问状态,通过this.$store.committhis.$store.dispatch修改状态。
  6. 构建和部署
    • 使用npm run build命令构建生产环境的Nuxt应用。
    • 将构建后的文件部署到服务器上,如使用Nginx或Apache等Web服务器。

三、总结

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

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


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