Nuxt.js의 universal rendering 모드

Nuxt.js에서는 서버에서 미리 HTML 문서를 렌더링해 클라이언트로 보내는 서버사이드 렌더링(SSR)과 클라이언트에서 자바스크립트를 실행해 hydration하는 단계까지 포괄적으로 유니버설 렌더링이라고 부른다. 유니버설 렌더링으로 빠른 초기 로딩을 보장하면서 SPA처럼 동작하게 한다는 것이다. 공식 문서에서는 SSR, CSR 등을 렌더링 "모드"라고 표현하고 있다.

 

Nuxt.js에서의 SSR 설정

Nuxt.js는 SSR 설정이 매우 간단하다. nuxt.config.js 파일에서 ssr: true로 설정하면 된다. 기본적으로 Nuxt는 유니버설 렌더링을 지원하도록 설계되어 있어, 특별한 복잡한 설정 없이도 쉽게 적용 가능하다.

export default {
  ssr: true, // 서버 사이드 렌더링 활성화
}

 

동적 데이터와 SSR

서버에서 데이터를 렌더링할 때, Nuxt의 asyncData 메소드를 사용하면 컴포넌트가 로드되기 전에 데이터를 미리 불러와서 렌더링할 수 있다. 이를 통해 사용자가 페이지에 접속할 때, 로딩 중간에 빈 화면을 보게 되는 문제를 피할 수 있다.

export default {
  async asyncData({ $axios }) {
    const data = await $axios.$get('https://api.example.com/data')
    return { data }
  }
}

 

이 방법을 사용하면 클라이언트에서 데이터 로딩을 기다리지 않고, 서버에서 미리 데이터가 채워진 상태로 페이지가 렌더링된다.

 

SSR을 사용할 때는 몇 가지 주의할 사항이 있다. 우선, 브라우저 전용 API(예: window, document)는 서버에서 동작하지 않는다. 따라서 클라이언트 사이드 전용 코드는 process.client로 감싸야 한다.

 

또한 SSR은 서버 부하를 증가시킬 수 있다. 모든 요청에 대해 서버가 HTML을 렌더링하므로, 서버 리소스가 충분한지 고려해야 한다. 만약 대규모 트래픽을 다루는 경우, 캐싱 전략을 병행해 서버 부하를 줄일 수 있다.

 

 

Nuxt.js의 유니버설 렌더링은 성능 향상과 SEO 최적화에 큰 도움이 되는 강력한 기능이다. 단, SSR을 사용할 때는 서버 자원과 브라우저 전용 API 사용에 주의가 필요하다. Nuxt의 간단한 설정으로 SSR을 쉽게 적용할 수 있으니 프로젝트의 요구 사항에 맞게 활용해보면 좋을 것 같다.