Nuxt3 SSR 踩坑记录

-什么是SSR-

• 【服务端渲染】：互联网早期，用户使用浏览器浏览的都是一些没有复杂逻辑的、简单的页面，这些页面都是在后端将html拼接好的然后将之返回给前端完整的html文件，浏览器拿到这个html文件之后就可以直接解析展示了，而这也就是所谓的服务器端渲染了
• 【客户端渲染】：后端不提供完整的html页面，而是提供一些api使得前端可以获取到json数据，然后前端拿到json数据之后再在前端进行html页面的拼接，然后展示在浏览器上，这就是所谓的客户端渲染了

-如何判断一个网页是不是SSR-

• 【服务端渲染】：鼠标右键查看源代码，在页面中看到的内容在源代码中几乎都能查看到，则是服务端渲染得到的
• 【客户端渲染】：鼠标右键查看源代码，有大量的内容在页面上可以看到，但是源码中却找不到，则是客户端渲染得到的

-为什么要使用SSR-

• 利于机器人获取信息：爬虫程序等，典型的，搜索引擎爬虫
• 如：搜索引擎：SEO
• 如：社交媒体：抓取页面内容展示缩略信息（比如 Twitter 卡片等）

-Nuxt3 坑点--1-

• pages/下的路由文件不支持大小写
• 只能支持横杆隔开了路由，比如：aaa-bbb.vue

-Nuxt3 坑点--2-

• 自动生成的 .nuxt/ 不一定能自动更新的问题
• nuxt 一些可以直接调的功能都是自动生成在 .nuxt/ 目录下的，有时候需要重新 npm install 才行

-Nuxt3 坑点--3-

• server/api/ 目录下的服务会直接访问
• 这导致凡事写在这目录下的接口都能被直接访问，这并不安全
• 这需要对 nuxt 的 api 层做一层安全控制，否则尽量少把接口写在 server/api/ 下

-Nuxt3 坑点--4-

• composables/ 目录不支持层级
• 我们把自定义的 composable 写在这个 composables/ 目录下的话，nuxt3会自动编译到.nuxt/目录下，我们调用的时候就不需要使用 import

-Nuxt3 坑点--5-

• 前端如果有多个有依赖性的接口请求需要控制在服务端发起，这会比较麻烦
• Nuxt3 提供的 useAsyncData() 函数虽然可以控制在服务端请求多个接口，但是目前有bug
• useAsyncData()目前的bug是，如果在里面写了awiat，那么接下来的一个Promise请求中就只能直接使用fetch()封装在一个函数里，nuxt3就不会去跑着个请求
• useAsyncData()一个函数中只能使用一次，如果一个函数中使用了多次，那么除了第一个会在服务端去跑，其余的都会在客户端发起，在浏览器的调试工具的network中可以看到这些接口

// 案例

function useApiData<T> ({ url, method = 'GET', query = {}, body = {} }: ApiDataParams):Promise<T> {
  return $fetch(url, {
    baseURL: 'http://localhost:3000',
    onRequest ({ options }) {
      options.headers = options.headers || {}
      options.method = method
      if (method === 'GET') {
        options.query = query
      } else if (method === 'POST') {
        options.body = body
      }
    },
    onResponse ({ response }) {
      return response._data
    }
  })
}

export default async function useCustom(){
  // 这些 useAsyncData 里的会在服务端运行，所以不要在这里做任何的客户端的操作，会获取不到 window或document这类只有浏览器才有的对象
  const { data }: any = await useAsyncData(async () => {
    const res1 = await useApiData({
        url: '/api/list',
        method: 'GET',
        query: {
          searchName
        }
    })

    const res2 = await $fetch('/api/list2', {
      baseURL: 'http://localhost:3000',
      onRequest ({ options }) {
        options.headers = options.headers || {}
        options.method = 'GET'
        options.query = { code: res2.code }
      },
      onResponse ({ response }) {
        return response._data
      }
    })

  })

  // 下面这些就可以下需要在客户端进行的操作了
  // ... ...

}