[Nuxt3] 빌드방식 3가지(ssr,csr,generate)

SSR과 CSR 차이

 

SSR은 "Server-Side Rendering"의 약어입니다. 이는 서버 측에서 웹 페이지의 초기 렌더링을 수행하는 기술을 말합니다.

아래 코드는 같은 페이지를 CSR과 SSR으로 실행시켰을 경우에 서버에서 클라이언트에게 html입니다.

 

CSR

export default defineNuxtConfig({
	...
	ssr: false
});

ssr: false

 

SSR

export default defineNuxtConfig({
	...
	SSR: true
});

 

ssr: true

SPA의 경우 “id=__nuxt”하위에 script로 제어해서 화면을 보여주기 때문에 모든 script가 로드되어야만 동작이 가능합니다.

하지만 SSR의 경우 서버측에서 렌더링이 끝난 후 해당 페이지에 사용되는 html, css, Js를 로드 하기때문에 보다 빠른 렌더링이 가능 합니다. 이런 초기 렌더링속도로 인해 검색엔진 최적화 SEO에 더 유리합니다. 하지만 페이지를 이동할때 마다 매번 서버에서 페이지를 받아와야 하므로 모든 페이지를 한 번에 받아온 후 동작하는 SPA보다는 다소 느릴 수 있습니다.

이 외의 특징으로는 SSR는 페이지 렌더링이 서버측에서 일어나기 때문에 보다 서버측의 부하가 증가될 수 있다는 점이 있습니다.

 

 

그 외 정적웹 사이트 빌드 Generate

위 SSR, CSR 외에도 Nuxt는 정적웹 사이트로 빌드 할 수있다.

nuxt generate

위 명령어로 정적웹사이트를 빌드할 수 있다. HTML 페이지를 미리 생성함으로써 Nuxt.js는 서버가 즉시 페이지를 렌더링할 필요 없이 빠르고 효율적으로 페이지를 제공할 수 있다.

SSR과 CSR에서는 HTML을 서버나 클리이언트 측에서 HTML을 생성해서 사용자에게 제공되지만, 정적웹사이트는 미리 HTML을 만든다는게 가장 큰 차이이다.