首先，文章的目的；我们为什么需要SSR方法，为什么在何处使用SSR，SSR和CSR有何区别？我们将通过示例巩固我们对这些知识的了解。
什么是客户端渲染（CSR）？
在客户端渲染中，我们的服务器将简单的纯HTML页面返回到浏览器。然后，由我们的服务器返回的html页面在用户浏览器中使用javascript进行编译，并获得有意义的html输出。最终的html输出由浏览器编译并呈现给用户。
什么是服务器端渲染（SSR）？
用这种方法，JavaScript是在服务器而不是浏览器上编译的。因此，直接且有意义的html直接在浏览器中进行
我应该何时考虑使用SSR？
这有两个主要原因; 更好的SEO和更快的发布时间。
执行SSR使我们对SEO更加坚强。因为Google Spiders（或其他爬虫）可以理解简单而有意义的html输出。
另外，如果我们使用ssr，则我们的网站打开速度更快。因为我们在服务器端进行编译，所以我们构建了一个更加用户友好的网站。
权衡取舍
- SSR需要可以运行Node.js服务器的环境。
- 由于编译过程是由服务器端进行的，因此您的成本将略有增加。
- 在某些情况下，您将必须实施解决方法。
我们来到了真正的问题:)
如何使用Vue.js进行服务器端渲染（SSR）？
有很多方法可以做到这一点。在本文中，我将告诉您其中两个。使用Nuxt.js和Express
使用Express的服务器端渲染（SSR）？
我们使用vue-server-renderer软件包。这对于vue.js文档是必需的。在终端上运行此命令进行设置
npm install vue vue-server-renderer express — save
此程序包中的渲染器功能对我们很重要。Vue实例正在使用渲染器功能在服务器端进行编译。
让我们创建一个index.js文件并导入必要的库；
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
现在，我们在express中创建vue实例。
server.get('*', (req, res) => {
const app = new Vue({
data: {},
template: ``
})
})
server.listen(8000)
Vue样本已在Express服务器中准备好。我们的SSR样本现已准备就绪，让我们进行样本研究。
server.get('*', (req, res) => {
const app = new Vue({
data: {
array: [ 'vue', 'java', 'python', 'javascript'],
},
template: `<div v-for="(a, index) in array"
v-bind:key="index">{{ a }}</div>`
})
renderer.renderToString(app, (err, html) => {
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Vue Js – SSR SAMPLE</title></head>
<body>${html}</body>
</html>
`)
})
})
server.listen(8000)
现在，我们将端口设置为8000，让我们在节点上运行index.js文件。
使用Nuxt进行服务器端渲染（SSR）？
Nuxt是一个基于Vue.js的渐进框架，用于创建现代Web应用程序。将nuxt框架附加到Vue栖息地后，需要具有一些设置的，完全兼容ssr的Web应用程序。
该架构显示了在调用服务器或用户通过<nuxt-link>浏览应用程序时Nuxt.js所调用的内容：
该框架中使用的文件结构与next.js相同
页面下的每个vue文件显示一个单独的路由。现在可以使用新设置来静态生成文件。（Nuxt v2.13）通过这种方式，您可以开发完全与seo兼容的Web应用程序。这是您将在nuxt.config.js下添加的设置
就这么简单:)
结论
现在，您可以通过本文J获得有关vue和ssr的新信息
客户端：运行webpack-dev-server，监视Vue组件和js代码的更改，并生成带有清单资源到dev-server的客户端清单，将其保存到磁盘并实时更新浏览器中的代码和样式。
服务器端：它以观察者身份运行webpack，构建服务器捆绑包并重新启动应用程序，然后进行了更改。（在我们提到的两种方法中）
网友评论