[nuxt] nuxt 시작하기

서버 사이드 렌더링과 클라이언트 사이드 렌더링 차이점
https://joshua1988.github.io/vue-camp/nuxt/ssr.html#%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3-%E1%84%85%E1%85%A6%E1%86%AB%E1%84%83%E1%85%A5%E1%84%85%E1%85%B5%E1%86%BC%E1%84%80%E1%85%AA-%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%A5%E1%86%AB%E1%84%90%E1%85%B3-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3-%E1%84%85%E1%85%A6%E1%86%AB%E1%84%83%E1%85%A5%E1%84%85%E1%85%B5%E1%86%BC-%E1%84%8E%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8C%E1%85%A5%E1%86%B7

Nuxt의 폴더 구조
https://joshua1988.github.io/vue-camp/nuxt/folder-structure.html

페이지 기반 라우터 자동 생성
https://joshua1988.github.io/vue-camp/nuxt/automatic-routing.html#%E1%84%91%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%8C%E1%85%B5-%E1%84%80%E1%85%B5%E1%84%87%E1%85%A1%E1%86%AB-%E1%84%85%E1%85%A1%E1%84%8B%E1%85%AE%E1%84%90%E1%85%A5-%E1%84%8C%E1%85%A1%E1%84%83%E1%85%A9%E1%86%BC-%E1%84%89%E1%85%A2%E1%86%BC%E1%84%89%E1%85%A5%E1%86%BC

layout

https://joshua1988.github.io/vue-camp/nuxt/layouts.html#%E1%84%85%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%A1%E1%84%8B%E1%85%AE%E1%86%BA-%E1%84%8F%E1%85%A5%E1%86%B7%E1%84%91%E1%85%A9%E1%84%82%E1%85%A5%E1%86%AB%E1%84%90%E1%85%B3-%E1%84%89%E1%85%A9%E1%84%80%E1%85%A2

Nuxt의 비동기 데이터 호출 방법
https://joshua1988.github.io/vue-camp/nuxt/data-fetching.html#%E1%84%89%E1%85%B5%E1%86%BC%E1%84%80%E1%85%B3%E1%86%AF-%E1%84%91%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%8C%E1%85%B5-%E1%84%8B%E1%85%A2%E1%84%91%E1%85%B3%E1%86%AF%E1%84%85%E1%85%B5%E1%84%8F%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%89%E1%85%A7%E1%86%AB%E1%84%80%E1%85%AA-%E1%84%83%E1%85%A1%E1%84%85%E1%85%B3%E1%86%AB-%E1%84%8C%E1%85%A5%E1%86%B7

Nuxt의 비동기 데이터 호출 방법 중 fetch에 대한 추가 설명

<script>
import axios from 'axios';

export default {
  data() {
    return {
      user: {},
    }
  },
  methods: {
    fetchUser() {
      // fetchOnServer 속성의 값에 따라 초기 랜더링시 서버에서 데이터를 가져올지 결정됩니다.
      this.$fetch();
    }
  },
  async fetch() {
    // axios를 사용하여 API에서 데이터를 가져옵니다.
    const res = await axios.get('https://jsonplaceholder.typicode.com/users/1');
    // 가져온 데이터를 컴포넌트의 데이터에 할당합니다.
    this.user = res.data;
  },
  // fetchOnServer 속성을 'false'로 설정하면 서버에서는 데이터를 가져오지 않습니다.
  fetchOnServer: false
}
</script>

🙋‍♂️ fetchOnServer 속성을 false로 설정하면 fetchUser() 가 랜더링시 실행 안하고 true로 설정하면 굳이 호출 안해도 실행된다는거야?

🙆 네, 정확히 말하면 fetchOnServer 속성이 false로 설정되면 fetchUser() 메소드가 서버에서 렌더링될 때 실행되지 않습니다. 그러나 fetchOnServer가 true로 설정되면 렌더링 시에
무조건 fetchUser() 메소드가 호출됩니다.

🙆 fetchOnServer 속성을 false로 설정하면 초기 로딩 시에 서버 측에서 데이터를 가져오지 않고, 클라이언트에서만 필요한 경우에 fetchUser()를 호출할 수 있습니다. 반면에 true로 설정하면 서버 측에서 페이지 렌더링 전에 무조건 데이터를 가져와 초기화합니다.

nuxtServerInit
https://joshua1988.github.io/vue-camp/nuxt/store.html#nuxtserverinit

페이지 메타 정보 설정
https://joshua1988.github.io/vue-camp/nuxt/meta-tags.html#%E1%84%91%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%8C%E1%85%B5-head-%E1%84%90%E1%85%A2%E1%84%80%E1%85%B3-%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC

Axios for Nuxt
https://joshua1988.github.io/vue-camp/nuxt/nuxt-axios.html#%E1%84%8C%E1%85%AE%E1%84%8B%E1%85%AD-%E1%84%90%E1%85%B3%E1%86%A8%E1%84%8C%E1%85%B5%E1%86%BC