자체 API에서 Nuxt Js로 콘텐츠를 프리렌더하는 방법

자체 API에서 Nuxt Js로 콘텐츠를 프리렌더하는 방법

Vuex 스토어가 있습니다.

/store/articles.js

export const state = () => ({
  article:'',
})
export const mutations = {
  setArticle(state, payload) {
    state.article= payload.data;
  }
}
export const actions = {
  async getArticle ({ commit }, id) {
    try {
      const { data } = await axios.post('http://test.local/api/getArticle',id);
      commit('setArticle', { data })
    } catch (e) {
      console.log(e);
    }
  }
}

내 API는 다음과 같은 JSON을 반환합니다.

{
  "id": 1,
  "title": "some title",
  "content": "some content",
  "image": "article_img1.jpg"
}

API의 제 페이지와 콘텐츠가 있습니다.

/pages/article/slug.vue

<template>
  <div> 
    <h4>{{ article.title }}</h4>
    <img :src="'/images/'+article.image" />
  <div v-html="article.content" />
  </div>
</template>

<script>
export default {
  computed:{
      article(){
        return this.$store.dispatch('getArticle',1)
      },
  },
}
</script>

컨텐츠는 정상적으로 표시되지만, 컨텐츠 페이지 코드를 보면 컨텐츠가 없습니다.이 방법으로 콘텐츠를 프리렌더링하려면 어떻게 해야 합니까?

API에서 정적 페이지를 생성하는 방법, @nuxt/content를 사용해야 합니까? 시도 중인데, API에서만 작동하는 것 같습니다..md또는.json파일, API 가져오기 기능을 사용하여 자동으로 생성하는 방법을 이해할 수 없습니다.

nuxt 사용asyncData훅 걸어요.

<template>
  <div> 
    <h4>{{ article.title }}</h4>
    <img :src="'/images/'+article.image" />
  <div v-html="article.content" />
  </div>
</template>

<script>
export default {
  computed: {
      articles() {
          return this.$store.state.article
      }
  },
  async asyncData() {
      await this.$store.dispatch('getArticle',1)
  },
}
</script>

이를 통해 nuxt는 서버에서 약속이 해결될 때까지 대기하게 됩니다.

API에서 페이지를 완전히 생성할 수 있습니다.nuxt/content여기에 상세한 답변을 써놓았습니다.Nuxt.js에서 SSG로 작성된 사이트에 페이지가 존재하지 않으면 404페이지로 다시 쓰는 것은 동작하지 않습니다.

빌드 시간 동안 페이지를 깔끔하게 생성하는 방법을 보여줍니다.
그 이외의 경우는, 다음의 메뉴얼에 기재되어 있는 순서에 따라 주세요.https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-generate#function-which-returns-a-promise

또, 반드시,ssr로 설정하다.true당신의 안에서nuxt.config.js파일.

async asyncData({params, store}) {
      articles: await store.dispatch('articles/articlesById', {'id': params.id, 
      return {articles};
    },

이것은 효과가 있다

그리고 sr를 구성에서 true로 만듭니다.

언급URL : https://stackoverflow.com/questions/68458274/how-to-prerender-content-with-nuxt-js-from-own-api