Quasar SSR) meta 설정하기

Vue.js 와 Quasar 프레임워크를 사용하면서 한동안 해결하지 못했던 문제를 정리해본다.

Quasar 프레임워크에는 SSR(Server Side Rendering) 을 제공해준다.

Prefetch 기능인데, 해당 기능으로 SSR 작업을 하면된다.

 

여기서 문제가 있었는데, 바로 meta data 설정이다.

 

export default {
	meta: {
    	title: 'Index Page',
        titleTemplate: title => `${title} - My Website`,
    }
}

물론 위처럼하면 정적 데이터를 가지고 title을 설정해주는것이니 아무런 문제가 없다.

 

하지만

export default {
	meta: {
    	title: this.getData.title,
        titleTemplate: title => `${title} - My Website`,
    },
    preFetch({ store, currentRoute, previousRoute, redirect, ssrContext }) {
    	let params = currentRoute.params.id;
        return store.dispatch("project/fetchData", data);
    }
    computed: {
    	...mapGetters("project", ["getData"]),
    }
}

위 처럼, preFetch 의 데이터를 바로 가져오려고 하면 getData가 없다며 오류를 발생시킨다.

 

그럼 어떻게 해결해야할까?

나는 이와 같은 방법으로 meta 설정을 하였다.

 

export default {
	meta(){
      return {
      	title: this.getDataFunction.title,
        titleTemplate: title => `${title} - My WebSite`
      }
    },
    preFetch({ store, currentRoute, previousRoute, redirect, ssrContext }) {
    	let params = currentRoute.params.id;
        return store.dispatch("project/fetchData", data);
    }
    computed: {
    	...mapGetters("project", ["getData"]),
        getDataFunction(){
        	return this.$store.state.project.data || {}
        }
    }
}

이미 sotre.dispatch() 를 통해 state에 저장해준 값을 가져오는것이기때문에, 위처럼 작업해주면 SSR에서도 meta data를 쉽게 설정해줄 수 있다.