반응형
서버 측에서 vuex 또는 라우터 없이 단일 파일 컴포넌트를 렌더링
SPA가 아닌 웹사이트에서 Vue2를 사용하기 때문에 사용자 경험을 개선하기 위해 1개의 파일컴포넌트를 정기적으로 사용합니다.
Sr는 entry_server.js에서 이 코드로 동작합니다.예를 들어 명령줄에서 이 파일을 호출할 수 있습니다.node ssr-bundle.js
또는 Express APP:
// entry_server.js
import Test from 'components/Test.vue';
const app = new Vue({
render: h => (Test, {
props: {}
})
});
export default function(context) {
return new Promise((resolve, reject) => {
resolve(app);
});
};
다음은 구성 요소의 예입니다.
// Test.vue
<template>
<div>
{{apidata}}
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
apidata: []
};
},
beforeCreate() {
axios.get('/api/v1/versions.json', {params: {card_id: 274}}).then(response => {
this.apidata = response;
console.log('loadData!!!');
console.log(response);
});
},
};
</script>
API에서 데이터를 가져와야 할 경우 컴포넌트는 ok를 표시하지만 이 데이터가 표시되지 않으면 렌더는 API 요청을 기다리지 않습니다.
이를 위해 vuex 및 라우터를 사용하는 SSR 예제 및 문서를 많이 찾았습니다. 그러나 단일 파일 구성 요소를 사용하여 API에서 데이터를 프리페치하고 vuex 또는 라우터 없이 SSR를 만드는 방법은 무엇입니까?
언급URL : https://stackoverflow.com/questions/48186557/server-side-rendering-a-single-file-component-without-vuex-either-router
반응형
'programing' 카테고리의 다른 글
VueJ에서 원활하게 v-show 애니메이션 생성s (0) | 2022.07.29 |
---|---|
8단계 관성의 모델을 통해 관계에 접근하는 방법 (0) | 2022.07.29 |
Vue 2 - 메서드 내에서 계산된 접근 방법 (0) | 2022.07.29 |
이클립스 오류: "가져오기 XXX를 확인할 수 없습니다." (0) | 2022.07.29 |
모키토:제네릭을 사용한 매처 리스트 (0) | 2022.07.29 |