nuxt34 [Nuxt3] SSR CSR Hydration - Data fetching 효율적으로 하기 서버 사이드 렌더링 (SSR)Nuxt는 서버에서 HTML을 미리 렌더링하여 클라이언트에 전달한다.서버는 클라이언트가 필요한 데이터를 미리 가져와서 HTML에 포함시키고, 이 HTML이 브라우저에 전달되면 사용자가 페이지를 바로 볼 수 있게 된다. 이 과정에서 데이터는 서버에서 한 번 가져와 HTML에 렌더링된다.클라이언트 하이드레이션:클라이언트는 서버로부터 받은 HTML을 하이드레이션(Hydration)이라는 과정을 통해 Vue.js 애플리케이션으로 연결한다.하이드레이션 과정 > 클라이언트 사이드에서 Vue 컴포넌트가 초기화되고, 각 컴포넌트는 자신이 필요한 데이터를 다시 가져오려 할 수 있다.만약 클라이언트가 하이드레이션 시에 별도로 데이터를 가져오는 함수 ($fetch 같은 비동기 데이터 로딩 함수).. 2024. 10. 9. [Nuxt3] useNuxtApp() 함수의 상호작용과 runWithContext()의 역할 Nuxt3 에서 script setup에 선언된 변수와 함수는 컴포넌트의 setup 함수 scope에서 실행된다.이는 해당 컴포넌트가 렌더링될 때 처음 한번만 실행되는 영영이다. 따라서, 아래와같인 script setup 최상단에서 useNuxtApp()을 호출하는 것은 올바른 방식이다.해당 시점에 컴포넌트 렌더링중으로 nuxtApp을 사용할 수 있다. 하지만, 비동기 타이머 콜백이 실행되는 시점에는 컨텍스트가 달라진다. 컨텍스트란?특정 시점에서의 Nuxt 어플리케이션 상태와 환경정보를 의미한다.에를들어, 컴포넌트 실행시 상태, 전역 설정, 플러그인, Nuxt 앱 관련 객체등의 정보이다.어플리케이션 상태정보 : Nuxt 어플리케이션이 현재 어디에서 실행(SSR, CSR)되는지 관련 정보를 포함한다.Nu.. 2024. 10. 9. Nuxt3 Vue3 npm install vs npm ci `npm i npm install` 로 설치되지않다가 `npm ci`로 설치하면 잘 되는 경우가 있다.둘은 어떤 차이가 있을까?아래에 참고 링크를 추가해두었으니 보다 자세한 사항은 해당 글 참고.주요한 부분만 번역하여 정리해보았다. npm inpm ci설치 항목package와 dependency 설치dependency 만 설치package.json, package-lock.json 수정수정됨dependeny가 없다면 추가함절대 수정되지 않음dependeny가 없다면 error 발생속도상대적으로 느림상대적으로 빠름node_modules가 있다면해당 항목 설치되지않음재설치됨 참고https://www.geeksforgeeks.org/difference-between-npm-i-and-npm-ci-in-no.. 2024. 10. 4. [Nuxt3] Nuxt란? Vue의 meta-framework- meta-framework : 프레임워크를 위한 프레임워크 역할 : ui 프레임워크인 Vue가 어떤 라이브러리를 쓸지 고민하지 않게해줌1. rendering mode 설정Vue는 SPA(Single Page Application) : csr - 서버는 브라우저에 거의 빈 HTML보냄 == link to a Javascript file//fetched and parsedNo SEO : not crawled by serch enginesSSR : 브라우저가 진입전에 js run 안해도됨SEO, 공유하기, 성능면에서 좋음Universal Rendering : SSR + SPASSR : server rendered, downloadCSR : Hydration - SSR로.. 2024. 9. 13. 이전 1 다음