[javascript] Nuxt.js에서의 SSR과 CSR 결합 사용 방법은?

19 Dec 2023

javascript

Nuxt.js는 Vue.js 프레임워크를 기반으로 한 Universal (Isomorphic) JavaScript 애플리케이션을 빌드하기 위한 프레임워크입니다. Nuxt.js는 Server-Side Rendering (SSR)과 Client-Side Rendering (CSR)을 결합하여 최상의 사용자 경험을 제공합니다. 여기에서는 Nuxt.js에서 SSR과 CSR을 결합하여 사용하는 방법에 대해 알아보겠습니다.

1. SSR과 CSR의 차이점

SSR (Server-Side Rendering): 서버에서 모든 페이지의 HTML을 생성하여 클라이언트에 전송합니다. 초기 로딩 시에 빠른 컨텐츠 표시를 가능케 하지만, 서버 리소스 사용량이 많고 초기 렌더링 속도가 느릴 수 있습니다.
CSR (Client-Side Rendering): 클라이언트에서 JavaScript를 사용하여 동적으로 페이지를 렌더링합니다. 초기 로딩 시에는 빠르나 SEO에 부정적인 영향을 미치고, 초기 렌더링 성능이 떨어질 수 있습니다.

2. Nuxt.js에서의 SSR과 CSR 결합

Nuxt.js는 페이지 별로 SSR 또는 CSR을 선택적으로 사용할 수 있습니다. 페이지 컴포넌트의 asyncData 또는 fetch 메소드를 통해 SSR용 데이터를 불러오고, mounted 또는 클라이언트 사이드 라이프사이클 훅을 활용하여 CSR을 수행할 수 있습니다.

export default {
  asyncData({ params }) {
    return fetch(`https://api.example.com/post/${params.id}`)
      .then(res => res.json())
      .then(post => ({ post }))
  },
  mounted() {
    // 클라이언트 사이드에서 추가적인 데이터 로딩 또는 처리
  }
}

3. 라우터 및 페이지 설정

Nuxt.js의 라우터 설정에서 mode: 'universal'로 지정하여 SSR을 사용하고, 필요에 따라 CSR을 적용할 페이지는 mode: 'client'로 설정합니다.

// nuxt.config.js
export default {
  mode: 'universal',
  // ...
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'csrPage',
        path: '/csr-page',
        component: resolve(__dirname, 'pages/csr-page.vue'),
        chunkName: 'csr-page'
      })
    }
  }
}

결론

Nuxt.js에서는 SSR과 CSR을 선택적으로 결합하여 사용할 수 있으며, 페이지 별로 SSR 및 CSR을 유연하게 구성할 수 있습니다. 이를 통해 최적의 성능과 SEO를 확보하면서 동적으로 렌더링되는 웹 애플리케이션을 개발할 수 있습니다.

더 많은 정보를 원하시면 Nuxt.js 공식 문서를 참고하시기 바랍니다.