Nuxt + Apollo Graphql => Generate로 SSG/SEO 적용하기

목차

• 서론
• Promise를 반환하는 함수
• Callback을 반환하는 함수
• Graphql로 SSR Generate 하기

 

서론

오버맵

오버맵

오버맵이 어느순간부터 검색노출에서 사라지고 있길래 이게 무슨일인가 싶어 확인해보니...

동적페이지들이 노출이 사라지고 있었습니다.

 

Nuxt generate가 해줄거라고 믿어 의심치 않았지만...

Parameter가 동적인데 어떻게하지 하고서 무시햇엇는데 ...

 

 

https://ko.nuxtjs.org/api/configuration-generate

스크롤을 내려보니 더있었군요...

 

 

 

Promise를 반환하는 함수

const axios = require('axios')

module.exports = {
  generate: {
    routes () {
      return axios.get('https://my-api/users')
        .then((res) => {
          return res.data.map((user) => {
            return '/users/' + user.id
          })
        })
    }
  }
}

 

 

Callback을 반환하는 함수

const axios = require('axios')

module.exports = {
  generate: {
    routes (callback) {
      axios.get('https://my-api/users')
        .then((res) => {
          const routes = res.data.map((user) => {
            return '/users/' + user.id
          })
          callback(null, routes)
        })
        .catch(callback)
    }
  }
}

 

 

 

Graphql로 SSR Generate하기

그럼 Graphql은..?

결국 삽질전문가인 제가 직접 또 노가다를 해서 몇몇사람들이 제공해준 이슈와 내용을 참고하여 뒤져본결과

제일 잘 써준 외국 사이트인 rosso.code

Rosso Codes

를 참고하여 작성해보겠습니다.

 

 

먼저 apollo-fetch가 설치되어 있지 않다면 설치해주셔야 합니다.

npm i apollo-fetch

apollo-client와 달리 서버측에서 또는 SSR을 위해 apollo graphql 쿼리를 요청할때 사용하는 라이브러리입니다.

 

 

 

 

nuxt.config.js

const { createApolloFetch } = require('apollo-fetch')

// ...(중략)

generate: {
    routes: function() {
      const uri = process.env.GRAPHCMS_URL
      const apolloFetch = createApolloFetch({ uri })
      const query = `
        query{
          ... 여기 쿼리채우는 거 아시죠?
        }
      `
      return apolloFetch({ query })
        .then(result => {
          const { data } = result
          return data.codes.edges.map(workshop => `/workshop/${workshop.node.id}`)
        })
        .catch(error => {
          console.log(`dynamic routes error: ${error}`)
        })
    }
  }

nuxt.config.js 파일에서

const { createApolloFetch } = require('apollo-fetch') 를 선언하고

generate를 작성한 뒤 routes 함수를 생성해서 위 처럼 쿼리 요청하고 map으로 URL을 반환 생성해줍니다.

 

 

 

 

 

그러고 nuxt generate를 하면!

generate 실패

저는 undefined가 자꾸 나오길래 사실 이부분이 삽질 제일 오래걸림..

 

https://github.com/nuxt/nuxt.js/issues/6500

`nuxt build` fails at generating pages in spa mode · Issue #6500 · nuxt/nuxt.js

여기 보시면 버전 문제라는 문제점을 갖고 있습니다.

저는 이 때 당시에 nuxt: "2.11.0" 을 사용하고 있었는데,

해당 이슈에서는 대다수의 사람들은 2.9.2 를 사용하면 되고 2.10.0은 안된다는 문제였죠.

 

하지만 저도 2.9.2로 가려다가 이슈도 거의 1년전이기에...

2020-03-31 기준 최신 버전인 2.12.2 로 설정하고 해보았더니 정상적으로 생성이 되는것을 포착했습니다.

 

성공 화면