Quasar 프레임워크 SSR

https://quasar.dev

Quasar Framework - Build high-performance VueJS user interfaces in record time

최근 quasar(퀘이사) 프레임워크로 SSR 작업을 하게되었는데,

quasar에서는 다음과 같이 SSR을 작업한다.

 

export default {
	preFetch({store, currentRoute, previousRoute, redirect, ssrContext}){
    	// 이곳에서 불러오게됨
    }
}

 

위처럼 preFetch를 사용하게된다.

한 페이지가 아닌 파라메터에따라 SSR 작업을 해야한다면 아래처럼 작업이 가능하다.

export default {
	preFetch({store, currentRoute, previousRoute, redirect, ssrContext}){
    	// params 를 불러오는 작업을 해야한다면?
        let params = currentRoute.params.id;
        return store.dispatch("project/fetchData",params)
    }
}

 

preFetch 기능을 사용할때는 한가지 작업을 더해줘야한다.

import { mapGetters, mapActions } from "vuex";
...
computed: {
	...mapGetters("project",["getData"])
}

mapGetters 를이용해서, Data를 가져오면, SSR 작업이 끝나게된다.

 

그 후는 기본적인 Vue 사용처럼 하면된다.

<div>{{getData.data}}</div>

더 좋은 방법이 있다면 언제든 코멘트 환영입니다! :)