NUXT SSR初级入门笔记(小结)

1. 什么是NUXT SSR

NUXT SSR（Server-Side Rendering）是基于Vue.js的一个SSR框架。NUXT SSR可以将Vue组件实例渲染成HTML字符串，然后将这个HTML字符串响应给浏览器，从而让浏览器更快地呈现页面。通过NUXT SSR，可以提高页面的首屏渲染速度和SEO优化。

2. NUXT SSR的搭建

要使用NUXT SSR，首先需要在项目中安装NUXT。

npm install --save nuxt

安装完成后，在项目的根目录下创建 nuxt.config.js 文件，用于配置NUXT SSR的选项。

下面是一个简单的配置示例：

module.exports = {
  // 定义应用的根路径
  router: {
    base: '/my-app/'
  },
  // 定义需要全局引入的模块
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa'
  ]
}

配置完成后，可以从命令行中启动NUXT SSR，命令如下：

nuxt start

通过以上步骤，就可以开始构建NUXT SSR应用程序了。

3. NUXT SSR的使用

3.1. 引入组件

在NUXT SSR中，需要将组件引入到 pages 目录下的Vue文件中，如下所示：

<template>
  <div>
    <h1>{{title}}</h1>
    <my-component />
  </div>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue'

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      title: 'Hello NUXT SSR'
    }
  }
}
</script>

在上面的代码中，我们引入了一个名为 MyComponent 的组件，并在组件注册中注册了它，然后在模板中使用。

3.2. 异步数据加载

在NUXT SSR中，可以通过使用 asyncData 方法来实现异步数据加载。该方法在组件实例化之前就会被调用，以此来根据路由参数和组件的状态来预加载数据。

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

<script>
export default {
  async asyncData({ $axios }) {
    const response = await $axios.get('/api/posts')
    return {
      posts: response.data
    }
  },
  data() {
    return {
      title: 'My Blog Posts'
    }
  }
}
</script>

上面的代码中，我们使用了 asyncData 方法来通过AJAX从服务端获取博客文章列表，然后将它赋值到组件的 posts 数据中，以供模板中使用。

4. NUXT SSR的优化

为了优化NUXT SSR的性能，我们可以使用以下技巧：

4.1. 使用Lighthouse进行性能分析

Lighthouse是一款谷歌浏览器的插件，可以对网站的性能进行评估，并提供性能优化建议。

使用Lighthouse评估NUXT SSR应用程序的性能，可以识别出哪些组件需要进行优化，并提供一些性能优化的建议。

4.2. 使用懒加载进行组件优化

NUXT SSR默认会将所有的组件都打包到生成的HTML文件中，这可能会导致HTML文件过大，从而影响首屏渲染的速度。

为了解决这个问题，可以使用懒加载来异步加载组件。可以通过以下方法进行懒加载：

<template>
  <div>
    <h1>{{title}}</h1>
    <button @click="loadComponent">Load Component</button>
    <component :is="currentComponent" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Lazy Loading Component',
      currentComponent: null
    }
  },
  methods: {
    async loadComponent() {
      const MyLazyComponent = await import('@/components/MyLazyComponent.vue')
      this.currentComponent = MyLazyComponent.default
    }
  }
}
</script>

在上面的代码中，我们通过 import 方法异步加载了一个名为 MyLazyComponent 的组件，并在 loadComponent 方法中动态将该组件赋值到 currentComponent 数据中，以供模板中使用。这样当用户点击按钮时，才会去加载该组件。

5. 结论

NUXT SSR是一个强大的SSR框架，可以用于提高页面的首屏渲染速度和SEO优化。在使用NUXT SSR时，需要注意性能优化，可以使用Lighthouse进行性能分析，并使用懒加载来异步加载组件。