Vue SSR（服务器渲染）探讨v1.0

2021-09-08 06:42:40

什么是srr（服务器渲染）

直白的说就是在服务端拿数据进行解析渲染，直接生成html片段返回给前端。具体用法也有很多种比如：传统的服务端模板引擎渲染整个页面服务渲染生成htmll代码块, 前端 AJAX 获取然后js动态添加。

为什么要做SSR

首先是seo问题，前端动态渲染的内容是不能被抓取到的，而使用服务端渲染就可以解决这个问题。
其次就是首屏加载过慢这种问题，比如在SPA中，打开首页需要初始加载很多资源，这时考虑在首屏使用服务端渲染，也是一种折中的优化方案。

使用NUTX实现服务器渲染

NUTX的作用就是在 node.js 上进一步封装，然后省去我们搭建服务端环境的步骤，只需要遵循这个库的一些规则就能轻松实现 SSR，类似的工具还有一个叫unvue的。

Nuxt使用步骤

安装vue脚手架 npm install -g vue-cli
完成后在需要创建的目录下执行以下命令：

vue init nuxt/koa ssr-demo(项目名称）
cd ssr-demo
npm install

执行npm run dev
打开浏览器
http://localhost:3000
目录结构

image

6.Nuxt.js 给出了最简单的目录结构

|-- pages
    |-- index.vue
|-- package.json

也就是说，至少需要一个 page 来作为展示页。

文件的路径建议都采用绝对路径
例：怎么在 /pages/user/me.vue 引入一个 static 文件夹里的图片

<img src="~static/img/logo.png" alt="Logo"/>

路由
Nuxt.js 根据 pages 目录结构去生成 vue-router 配置，也就是说 pages 目录的结构直接影响路由结构
例1:

|-- pages
    |-- posts
        |-- index.vue
        |-- welcome.vue
    |-- about.vue
    |-- index.vue

会生成

routes: [
  {
    path: '/posts',
    component: '~pages/posts/index.vue'
  }, {
    path: '/posts/welcome',
    component: '~pages/posts/welcome.vue'
  }, {
    path: '/about',
    component: '~pages/about.vue'
  }, {
    path: '/',
    component: '~pages/index.vue'
  }
]

例2:隐藏路由在文件名前加 _

|-- pages
    |-- _about.vue
    |-- index.vue

会生成

routes: [
  {
    path: '/',
    component: '~pages/index.vue'
  }
]

配置文件
目录下的 nuxt.config.js 是我们唯一的配置入口，这里不建议修改 .nuxt 目录，除非特殊需求

默认的给力我们三个配置 ·head·css·loading· 分别是头部设置，全局css，loading进度条

nuxt.config.js 的全部的配置如下,点击查看具体例子

cache
loading
router
css
plugins
head
另外还提供了 vuex 等配置，感兴趣可以去 github 和官网。

一个具体的例子(仿知乎live)

在pages下面创建如下文件夹和文件

会生成如下路由

[
        {
            path: "/",
            component: _f50ec93a,
            name: "index",
            children: [
                {
                    path: "me",
                    component: _52bc7474,
                    name: "index-me"
                },
                {
                    path: "home",
                    component: _097b5f3b,
                    name: "index-home"
                },
                {
                    path: "course",
                    component: _361a8b77,
                    name: "index-course"
                },
                {
                    path: "hot",
                    component: _111d20a1,
                    name: "index-hot"
                }
            ]
        },
        {
            path: "/account",
            component: _2c407cfe,
            name: "account",
            children: [
                {
                    path: "register",
                    component: _1eaf91c4,
                    name: "account-register"
                },
                {
                    path: "login",
                    component: _4a531fd0,
                    name: "account-login"
                }
            ]
        }
    ]

异步请求
asyncData方法用于 fetch 数据，并在服务端渲染页面，返回给浏览器。

本文例子github地址：https://github.com/wotu-courses/ssr-demo

参考文章：
https://segmentfault.com/a/1190000007933349
https://segmentfault.com/a/1190000009842518

码农公寓