ssr-nuxt学习

背景：项目中使用了vue的服务端渲染 项目中用的是vue-serve-render
所以想对比一下nuxt和vue-server-render
这边先对比一下ssr和csr的区别

	优势	劣势
ssr	1.搜索引擎可以抓取网站以获取更好的seo 2.初始页面加载速度更快 3.非常适合静态网站	1.频繁的服务器请求 2.整体缓慢的页面渲染 3.整页重新加载 4.不擅长于网站交互
csr	1.擅于网站交互 2.初始家在后网站渲染速度快 3.非常适合web应用程序	1.不利于seo 2.初始加载需要更多的时间

接下来就是我们的nuxt实战了
首先先安装一下nuxt

npm install nuxt // 安装一下nuxt

然后通过nuxt去初始化一个nuxt的项目（假设项目名字叫做 learn-nuxt）

npm init nuxt-app learn-nuxt // 创建一下相关的nuxt项目

之后进行一系列初始化选择插件安装
安装完成之后进行一下npm install 装一下我们的依赖包

npm install // 安装一下依赖包

npm run dev // 启动一下项目

启动成功了

看一下目录结构可以很容易发现

components下的vue组件是可以被自动的注册的 然后在pages下的页面中自由使用
例如我在其中创建一下a.vue的组件 代码如下

<template>
  <h1 class="red">{{a}}</h1>
</template>

<script>
  export default {
    head() {
      // Set Meta Tags for this Page
    },
    data(){
        return {
            a:111
        }
    },
    mounted(){
        setTimeout(()=>{
            this.a = 222
        },5000)
    }
    // ...
  }
</script>

<style>
  .red {
    color: red;
  }
</style>

效果如底下这个gif（有没有好用的视频转gif推荐啊！！！）

看吧用法和vue完全一样
pages下的index用这个组件看看效果
代码如下

<template>
  <A/>
</template>

<script>
export default {}
</script>

接入一下我们的项目组件看看和原方案有什么区别吗
npm run dev之后
这样子就是成功了

访问一下3000端口之后发现

组件已经成功引入啦 完结撒花🎉🎉🎉🎉🎉🎉🎉🎉🎉

但是

这样就结束了是不是有点奇怪

关于这个东西我们需要看一下打包出来的文件有什么区别
1.
按照我的理解 vue-server-renderer插件，使用 Node.js server 的服务器端单页面应用程序渲染。将 Vue 服务器端渲染 (SSR) 与其他后端设置进行混合使用。

用法：安装 ==> 渲染一个 Vue 实例 ==> 与服务器集成

总结
从头搭建一个服务端渲染的应用是相当复杂的。在工作中推荐使用 Nuxt.js 来完成服务端渲染。
这次没有使用nuxt主要原因是因为我们项目方如果使用了nuxt的话需要对现有的组件进行迁移 成本比较大 但是如果是从头开始做一个ssr的项目的话 还是比较推荐使用nuxt这种开箱即用的框架的