Nuxt console.log에 찍히는 Nuxt SSR의 의미

개요

콘솔에 찍히는 이 마크의 의미는 무엇?

 

서버사이드 돔트리와 클라이언트사이드 돔트리가 다르다고 혼나서 원인을 찾아보다가 깨달은 몇가지를 기록

결론

Nuxt의 Univeral mode를 이용하게 되면 서버사이드 클라이언트사이드 로 나뉘어져서 실행된다.

위의 마크의 의미는 서버사이드에서 실행된 나의 middleware의 마크이다.

서버사이드에서 실행되는 로그들은 위의 console.log뿐만 아니라 본인의 터미널에도 찍히고 있을것이다!

 

추가조사

첫 페이지를 진입할 때는 서버사이드와 클라이언트사이드가 같이 동작하는데

이건 서버사이드 렌더링의 개념을 보고오면 좋은거 같다. 간단히 말하자면 서버사이드 렌더링이 이루어지는 과정은

pre-rendering -> hydration 인데 pre-rendering을 통해 어느정도 완성된 html을 전달(SSR) 그 이후에는 CSR로

비어있는 부분에 javascript를 실행시켜 화면을 채우는 hydration 과정이 이루어진다.

 

SSR은 첫 페이지 진입시 이루어지며 그 이후에는 SPA처럼 동작가능(hydration)하게 되는것이다.

 

여기서 착각하기 쉬운 우리의 새로고침은 첫 페이지 진입과 똑같은 방식으로 이루어진다고 생각하면된다.

 

페이지 첫 진입(새로고침)

처리순서

우선 SSR

• nuxtServerInit　（SSR）
• plugins　（SSR）
• middleware　（SSR）
• asyncData　（SSR）
• fetch　（SSR）
• beforeCreate　（SSR）
• created　（SSR）

그 다음 CSR

• plugins　（CSR）
• beforeCreate　（CSR）
• created　（CSR）
• beforeMount　（CSR）
• mounted　（CSR）

두번 실행되는 플러그인으로 진짜 그런지,, 테스트 해본 결과

plugins: [{ src: '~/plugins/getWindowWidth', ssr: true }],

getWindowWidth에 resizing이라는 콘솔이 두번 출력

plugins: [{ src: '~/plugins/getWindowWidth', ssr: false }],

ssr: false를 하면 서버사이드에서 실행이 안되는걸 볼 수 있다.

내부에서 페이지 이동(nuxt-router로)

처리순서

여기서 CSR만 작동하게 되어있다.

• middleware　（CSR）
• asyncData　（CSR）
• fetch　（CSR）
• beforeCreate　（CSR）
• created　（CSR）
• beforeMount　（CSR）
• mounted　（CSR）

 

참고한 기사

https://maxkim-j.github.io/posts/nuxt-ssr

Nuxt로 살펴보는 서버사이드 렌더링의 핵심

middleware 에서 삽질한 분 기록(server side client side 처리를 나눠서 생각안했던게 문제)

삽질 기록 (1) — Auth 적용, axios default header 추가, plugin 추가