PSA单页面和同构应用（服务的渲染【SSR】）的优缺点

现代化的服务端渲染(同构渲染)

SPA

优点:

• 用户体验好
• 开发效率高
• 渲染性能好
• 可维护性好

缺点:

• 首屏渲染时间长
• 不利于SEO

同构应用

优点：

• 同构服务端渲染首屏直出,解决SPA应用首屏渲染慢以及不利于SEO问题
• 同构客户端渲染接管页面内容交互得到更好的用户体验
  • 这种方式通常称之为现代化的服务端渲染(也叫同构渲染[后端渲染+前端渲染])
  • 这种方式构建的应用称之为服务端渲染应用或者同构应用

缺点：

• 浏览器特定的代码只能在某些生命周期钩子函数中使用
• 一些外部扩展库可能需要特殊处理才能在服务端渲染应用中运行
• 不能在服务端渲染期间操作dom
• 某些代码操作需要区分运行环境(比如有些代码要既要运行在服务端也要运行在客户端 所有要进行环境区分)

渲染概念

什么是渲染

​ 把【数据】+【模板】拼接到一起。

传统的服务端渲染

客户端渲染

• 【后端】：负责处理数据接口；

• 【前端】：负责将接口数据渲染到页面上；

为什么客户端首屏渲染慢？

• 客户端最少发3次请求。页面请求、js请求、动态数据请求

服务端渲染和客户端的区别

服务端：

服务端页面直接出结果 只需要一次请求即可

服务端的（同构渲染）的流程

服务端渲染(同构渲染[ssr]的区别以及所带来的问题)

区别:

nuxt(ssr)

<template>
  <div id="app">
    <h2>{{ title }}</h2>
    <ul>
      <li
        v-for="item in posts"
        :key="item.id"
      >{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'HomePage',
  components: {},
  // Nuxt 中特殊提供的一个钩子函数，专门用于获取页面服务端渲染的数据
  async asyncData () {
    const { data } = await axios({
      method: 'GET',
      url: 'http://localhost:3000/data.json'
    })

    // 这里返回的数据会和 data () {} 中的数据合并到一起给页面使用
    return data //简写
    // 繁写
    // return {
    //   title: data.title,
    //   posts: data.posts
    // }
  }
}
</script>

在根目录创建layouts->default.vue(类似于app.vue)

<template>
  <div>
    <!-- 路由出口 -->
    <ul>
      <li>
        <!-- 类似于 router-link，用于单页面应用导航 -->
        <nuxt-link to="/">Home</nuxt-link>
      </li>
      <li>
        <nuxt-link to="/about">About</nuxt-link>
      </li>
    </ul>

    <!-- 子页面出口 -->
    <nuxt />
  </div>
</template>

注意 : 首屏是服务端渲染 其他的都是客户端渲染的