Nuxt.js 의 Universal SSR 라는 게 어떤 의미인가요?

Question

두 번째 질문이네요. ㅎㅎ

요즘 SSR 때문에 Nuxt.js 문서를 열심히 보고 있습니다.

문서 처음 소개 부분에 Universal SSR 이라고 나오는데요.

이게 일반적으로 우리가 생각하는 Serve Side Rendering 과는 다른 것인가요?

Answer 1

안녕하세요? 후로그램어님 :)

Nuxt.js 문서에서는 Universal SSR 에 대해서 자세하게 설명하지는 않고 있는데요. API 문서 > Configuration > mode property 를 보시면, 그 개념에 대해서 엿보실 수가 있습니다. (한글 문서는 예전 버전이라 그런지 안보이네요 ㅠㅠ)

아래와 같이 나와 있습니다.

The mode Property

• Type: string

  • Default: universal

  • Possible values:

    • 'spa': No server-side rendering (only client-side navigation)

    • 'universal': Isomorphic application (server-side rendering + client-side navigation)

1. server-side rendering + client-side navigation

nuxt.config.js 에서 mode를 설정을 'spa' 와 'universal'로 할 수가 있는데요. universal 은 Isomorphic application (server-side rendering + client-side navigation) 이라고 설명하고 있습니다.

그렇다면 서버 사이드 렌더링 + 클라이언트 사이드 네비게이션은 무슨 말일까요? 아래 Nuxt.js lifecycle 을 도식화해놓은 그림을 보면 이해하기 편합니다.

처음 리퀘스트가 도착하면 서버사이드에서 nuxtServeInit , middleware , validate() , asyncData() , fetch() 등의 과정을 거쳐서 렌더링한 페이지를 리스폰스로 보냅니다. 그 이후에 페이지 이동을 페이지 갱신없이 클라이언트에서 nuxt-link(Vue router 의 router-link)를 통해 필요한 리소스를 ajax 로 받아서 렌더링합니다. 첫 요청후 페이지 이동은 클라이언트 사이드 렌더링을 하는거죠.

말 그대로 server-side rendring + client-side navigation 두 가지 모두 사용합니다.

2. Isomorphic application

생소한 단어가 눈에 밟힙니다.. Isomorphic application 이란 무엇일까요? 보통 Isomorphic JavaScript 라는 말로 많이 쓰이는데요.일반적으로 동형 자바스크립트라고 번역합니다. 서버와 클라이언트같은 코드가 쓰인 다는 의미로 생각하시면 될 듯합니다.

Nuxt.js 로 예시를 들자면. nuxtServeInit , middleware , validate() , asyncData() , fetch() 등의 과정을 최초 요청에서는 서버사이드에서 처리한다고 말씀드렸었는데요. 그 이후 페이지를 이동할 때는 클라이언트 사이드에서 동일한 로직을 통해서 페이지를 렌더링합니다.

Node.js 어플리케이션은 서버와 클라이언트가 동일하게 JavaScript 로 이루어져 있기 때문에 Isomorphic JavaScript / Universal SSR 이 가능한 것입니다. 다만 주의해야할 점은 실제 코딩할 때 해당 코드가 서버/클라이언트 양쪽에서 모두 실행될 수 있다는 걸 항상 염두에 두고 작업해야 합니다.

제 답변이 도움이 되셨길 바랍니다! 감사합니다 :)

Answer 2

일반적인 SSR과 동일합니다. 하지만 SPA형태를 SSR처럼 변경해주는 역할을 Nuxt.js가 쉽게 할 수 있도록 셋팅된 프레임워크기 때문에, Universal 이라고 부르는것으로 알고 있습니다.