-什么是SSR-

• 【服務(wù)端渲染】：互聯(lián)網(wǎng)早期琼开，用戶使用瀏覽器瀏覽的都是一些沒有復(fù)雜邏輯的、簡單的頁面揍瑟，這些頁面都是在后端將html拼接好的然后將之返回給前端完整的html文件蹂窖，瀏覽器拿到這個(gè)html文件之后就可以直接解析展示了智听，而這也就是所謂的服務(wù)器端渲染了
• 【客戶端渲染】：后端不提供完整的html頁面，而是提供一些api使得前端可以獲取到j(luò)son數(shù)據(jù)怜珍，然后前端拿到j(luò)son數(shù)據(jù)之后再在前端進(jìn)行html頁面的拼接端蛆，然后展示在瀏覽器上，這就是所謂的客戶端渲染了

-如何判斷一個(gè)網(wǎng)頁是不是SSR-

• 【服務(wù)端渲染】：鼠標(biāo)右鍵查看源代碼酥泛，在頁面中看到的內(nèi)容在源代碼中幾乎都能查看到今豆，則是服務(wù)端渲染得到的
• 【客戶端渲染】：鼠標(biāo)右鍵查看源代碼，有大量的內(nèi)容在頁面上可以看到柔袁，但是源碼中卻找不到呆躲，則是客戶端渲染得到的

-為什么要使用SSR-

• 利于機(jī)器人獲取信息：爬蟲程序等，典型的捶索，搜索引擎爬蟲
• 如：搜索引擎：SEO
• 如：社交媒體：抓取頁面內(nèi)容展示縮略信息（比如 Twitter 卡片等）

-Nuxt3 坑點(diǎn)--1-

• pages/下的路由文件不支持大小寫
• 只能支持橫桿隔開了路由插掂，比如：aaa-bbb.vue

-Nuxt3 坑點(diǎn)--2-

• 自動(dòng)生成的 .nuxt/ 不一定能自動(dòng)更新的問題
• nuxt 一些可以直接調(diào)的功能都是自動(dòng)生成在 .nuxt/ 目錄下的，有時(shí)候需要重新 npm install 才行

-Nuxt3 坑點(diǎn)--3-

• server/api/ 目錄下的服務(wù)會(huì)直接訪問
• 這導(dǎo)致凡事寫在這目錄下的接口都能被直接訪問腥例，這并不安全
• 這需要對 nuxt 的 api 層做一層安全控制辅甥，否則盡量少把接口寫在 server/api/ 下

-Nuxt3 坑點(diǎn)--4-

• composables/ 目錄不支持層級
• 我們把自定義的 composable 寫在這個(gè) composables/ 目錄下的話，nuxt3會(huì)自動(dòng)編譯到.nuxt/目錄下燎竖，我們調(diào)用的時(shí)候就不需要使用 import

-Nuxt3 坑點(diǎn)--5-

• 前端如果有多個(gè)有依賴性的接口請求需要控制在服務(wù)端發(fā)起璃弄，這會(huì)比較麻煩
• Nuxt3 提供的 useAsyncData() 函數(shù)雖然可以控制在服務(wù)端請求多個(gè)接口，但是目前有bug
• useAsyncData()目前的bug是底瓣，如果在里面寫了awiat谢揪，那么接下來的一個(gè)Promise請求中就只能直接使用fetch()封裝在一個(gè)函數(shù)里捐凭，nuxt3就不會(huì)去跑著個(gè)請求
• useAsyncData()一個(gè)函數(shù)中只能使用一次拨扶，如果一個(gè)函數(shù)中使用了多次，那么除了第一個(gè)會(huì)在服務(wù)端去跑茁肠，其余的都會(huì)在客戶端發(fā)起患民，在瀏覽器的調(diào)試工具的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 里的會(huì)在服務(wù)端運(yùn)行，所以不要在這里做任何的客戶端的操作垦梆，會(huì)獲取不到 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
      }
    })

  })

  // 下面這些就可以下需要在客戶端進(jìn)行的操作了
  // ... ...

}