Nuxt2 專有的function

asyncData

用於component中，在server or route 更新前取得資料注入資料，可返回一個Promise，resolve的時候注入data()。

使用時機: 資料需要在server端渲染的時候(SSR)，對SEO有很大的幫助

fetch

用於component中，在client取得資料，可返回一個Promise，resolve的時候注入data()。

使用時機: 想要資料更早呈現出來而不是進入route才取得資料，可以提升SEO效果。不過效果沒有asyncData好，因為asyncData可以讓SE看到完整的HTML內容，fetch只能看到部分

nuxtServerInit

用於vuex，是一個特殊的action，在nuxt app server 初始化的時候自動調閱

使用時機: 在server端預先載入data，供client渲染期間使用，可提高效能、UX

例如用來取得Post Data:

  async nuxtServerInit(vuexContext, context) {
    try {
      const data = await context.app.$axios.$get("/posts.json");
      const postArr = [];
      for (const key in data) {
        postArr.push({ ...data[key], id: key });
      }
      vuexContext.dispatch("post/setPosts", postArr);
    } catch (e) {
      context.error(e);
    }
  },

generate(nuxt.config.js)

用於nuxt.config.js，可建構靜態文件，可在不需要伺服器的狀態下更給客戶端。以下範例是生成動態路由

  generate: {
    routes: function () {
      return axios
        .get("https://nuxt-blog-b5610-default-rtdb.firebaseio.com/posts.json")
        .then((res) => {
          const routes = [];
          for (const key in res.data) {
            routes.push({
              route: `/posts/${key}`,
              payload: {
                postData: res.data[key],
              },
            });
          }
          return routes;
        });
    },
  },

generate的應用 + asyncData 的應用

透過generate建立dynamic route並取得dynamic data，然後傳給asyncData使用

  // nuxt.config.js
  generate: {
    routes: function () {
      return axios
        .get("https://nuxt-blog-b5610-default-rtdb.firebaseio.com/posts.json")
        .then((res) => {
          const routes = [];
          for (const key in res.data) {
            routes.push({
              route: `/posts/${key}`,
              payload: {
                postData: res.data[key],
              },
            });
          }
          return routes;
        });
    },
  },

  // component
  asyncData(context) {
    const getStructuredData = (postData) => {
      return {
        "@context": "http://schema.org",
        "@type": "Article",
        "headline": postData.title,
        "image": "https://example.com/article-image.jpg",
        "author": {
          "@type": "Person",
          "name": postData.author
        },
        "publisher": {
          "@type": "Organization",
          "name": "Jacky",
          "logo": {
            "@type": "ImageObject",
            "url": "https://example.com/publisher-logo.jpg"
          }
        },
        "articleBody": postData.previewText
      }
    }
    if (context.payload) {
      return {
        loadedPost: context.payload.postData,
        structuredData: getStructuredData(context.payload.postData),
        commemts: context.payload.postData.comments
      };
    }
    return context.app.$axios
      .$get(`/posts/${context.params.id}.json`)
      .then(data => {
        return {
          loadedPost: data,
          structuredData: getStructuredData(data)
        };
      })
      .catch(err => console.log(err));
  }