서버 측에서 vuex 또는 라우터 없이 단일 파일 컴포넌트를 렌더링

서버 측에서 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