본문 바로가기

반응형

SSR

Nuxt.js / SSR / 비동기 데이터 서버사이드 렌더링시 주의사항 정말.. 말도 안되게 삽질을 했어서 포스팅을 하게되었다. Nuxt.js 로 프로젝트를 진행하던 중서버사이드 렌더링을 해야하는 구간에서 비동기데이터를 조회하여 처리하는 과정이다.사전에 Nuxt.js 라이프사이클을 이해하는게 중요하다. 요약하자면 다음과 같다. 상황 : 전역컴포넌트 (GNB) 와 데이터 리스트를 SSR 처리해야하는 상황나는 다음과 같이 처리하였다. 1. Vuex 의 State 를 구성// 생략 2. Vuex 에서 nuxtServerInit 메소드를 async/await 으로 비동기 처리수행. 3. Vuex 의 Store 중 dispatch 하기위한 actions 의 메소드역시 async/await 으로 구성하여 작성. 4. 서비스 전역에서 사용하기 위하여 미들웨어를 작성하여 nuxt.conf.. 더보기
SSR (Server Side Rendering) & CSR (Client Side Rendering) 흠.. 웹 프로젝트에 대한 방향성에 대한 문제로 일말의 공부와생각의 정리가 필요하였다. Node.js 를 보다가 Node / Express 등을 보다가 Nuxt.js 라고 서버사이드 렌더링 프레임워크를알게 되어서 공부하다 보니 놓칠뻔 했던 중요한 내용이었다. 요새는 바로 사용할 수 있는 실용화, 생산성 위주로 살아가다 보니전혀 공부할 생각과 시간이 없었는데 이건 중요한 계기였듯. 먼저 Vue.js 에서 보면 다음과 같이 서버사이드 렌더링에 대하여 언급되어 있다. URL : https://ssr.vuejs.org/ko/왜 SSR을 사용하나요?전통적인 SPA(싱글 페이지 애플리케이션)에 비해 SSR의 장점은 주로 아래에 있는 내용과 같습니다.검색 엔진 크롤러는 완전히 렌더링 된 페이지를 직접 볼 수 있으므로.. 더보기

반응형