Jae Front-end Study

Rendering modes with Nuxt 3 — Course part 13

https://www.youtube.com/watch?v=TmgIylXsLuE&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=13

유튜브 강의를 참고하고 있습니다.

Nuxt 모드

Nuxt 프로젝트를 설치할 때 2가지의 렌더링 모드를 선택할 수 있다.

1. Universal (SSR/SSG)
2. Single Page App

Universal 모드를 설명하기 전에 웹 페이지 렌더링 방식에 대해 설명한다.

1. Client Side Rendering (CSR, 클라이언트 사이드 렌더링)

클라이언트(브라우저)에서 웹 페이지를 렌더링 한다.

사용가가 웹 페이지를 방문하면(서버 요청을 받으면) 서버는 클라이언트에게 HTML과 JS를 보내고, 클라이언트가 그것을 렌더링 한다.

ex) React, Vue

CSR 장점

• 페이지 이동시 전체 HTML을 로드할 필요가 없기 때문에 SSR에 비해 속도가 빠르다.
• 필요한 부분만 변경되기 때문에 새로고침이 발생하지 않아 사용성이 뛰어나다.
• API 호출이 필요 없기 때문에 지연 로딩 모듈이 필요하지 않다.

CSR 단점

• 초기 페이지 로드 시간이 SSR에 비해 느리다.
• SEO(Search Engine Optimization, 검색 엔진 최적화)가 어렵다.

2. Server Side Rendering (SSR, 서버 사이드 렌더링)

서버에서 웹 페이지를 렌더링 한다.

사용자가 웹 페이지를 방문하면 서버는 리소스를 확인해 렌더링이 끝난 상태로 클라이언트에게 전송한다.

ex) Next, Nuxt

SSR 장점

• 초기 페이지 로드 시간이 CSR에 비해 빠르다.
• SEO가 유리하다.

SSR 단점

• 페이지 이동시 서버에서 새로운 html을 불러와야 하기 때문에 CSR보다 속도가 느리고, 새로고침이 발생해 사용성이 떨어진다.
• 렌더링을 서버에서 하기 때문에 서버에 부담이 크다.

3. Static Site Generation (SSG)

클라이언트에서 필요한 페이지들을 사전에 미리 준비하고, 서버 요청을 받으면 이미 완성된 파일을 브라우저에 렌더링 한다.

SSR과 비슷하지만 서버에서 요청을 할 때 즉시 만드는지 미리 만들어 놓는지의 차이가 있다.

SSG 장점

• 캐싱이 가능하다.
• SEO가 유리하다.

SSG 단점

• 모든 URL에 대해 개별 HTML 파일을 생성해야 한다. URL을 예측할 수 없다면 적용하기 어렵다.

검색 엔진 노출보다 서버의 부담이나 데이터 보호가 중요하다 -> CSR
검색 엔진이 중요하고, 업데이트가 자주 일어난다 -> SSR
검색 엔진이 중요하고, 업데이트가 거의 없다. -> SSG

만약 검색 엔진과 새로고침 없는 인터렉션이 모두 중요하다면 CSR + SST인 Universal 렌더링을 고려해야 한다.

1. Single Page Application (SPA, 단일 페이지 애플리케이션)

SPA는 말 그대로 하나의 페이지를 사용하는 애플리케이션이다.

서버에서 새로운 페이지를 요청하는 것이 아니라 하나의 페이지에서 내용만 동적으로 변경한다. (CSR 방식으로 렌더링 한다.)

SPA 장점

• 페이지 이동 시 변경된 부분만 갱신되기 때문에 앱과 같은 자연스러운 사용자 경험을 제공한다.
• 서버가 해야 하는 화면 구성을 클라이언트가 수행하기 때문에 서버 부담이 경감된다.
• 모듈화 또는 컴포넌트 개발이 용이해 효율성이 증가한다.
• 프론트앤드와 백앤드 구분이 확실하다.

SPA 단점

• 처음 사이트 접속 시 모든 리소스를 한 번에 받기 때문에 초기 로딩 속도가 느리다.
• 비즈니스 로직(화면이 변하는 모습)이 사용자에게 노출될 수 있다.
• SEO가 어렵다.

2. Multiple Page Application (MPA, 다중 페이지 애플리케이션)

MPA는 말 그대로 여러 개의 싱글 페이지를 사용하는 애플리케이션이고, 전통적인 웹 방식이라고도 한다.

새로운 페이지를 요청할 때마다 서버에서 리소스가 다운되며 전체 페이지를 다시 렌더링(새로고침)해 내용을 변경한다. (SSR 방식으로 렌더링한다.)

MPA 장점

• 처음 사이트 접속 시 초기 로딩 속도가 빠르다.
• SEO가 유리하다.

MPA 단점

• 페이지 이동 시 새로고침이 발생해 깜빡임이 발생한다.
• 서버 요청이 있을 때마다 서버에서 렌더링을 하기 때문에 서버 부담이 증가한다.

CSR과 SPA, SSR과 MAP는 개념이 비슷해서 같은 것이라고 착각할 수 있지만,
렌더링을 어떻게 하는지와 페이지를 몇 개 사용하는지의 차이이기 때문에 단어 사용에 주의해야 한다.

Universal Mode (유니버셜 모드)

Nuxt는 CSR과 SSR의 장점을 모두 합친 Universal Mode 렌더링을 선택했다.

쉽게 말해 Nuxt 페이지를 처음 접속하면 서버에서 렌더링 하고, 이후 페이지 간 이동은 클라이언트에서 렌더링 한다.

이를 위해서 Nuxt는 클라이언트 사이드 하이드레이션(Client Side Hydration)과 코드 분할(Code Splitting), 프리패칭(Prefetching)을 활용하고 있다.

• 클라이언트 사이드 하이드레이션

서버로부터 받은 정적 HTML을 사용자와 상호작용할 수 있는 다이나믹 DOM으로 바꾸는 방법이다.

• 코드 분할

코드 전체를 로드하지 않고 분할해서 필요에 맞는 번들로 나눠 가져오는 것을 의미한다.

필요한 번들만 가져오기 때문에 로딩 속도가 빠르다.

• 프리패칭

Nuxt는 화면에 보이는 <NuxtLink> 컴포넌트에 한해서 해당 페이지들을 렌더링 하는데 필요한 파일들을 미리 서버에 요청한다.

따라서 사용자가 클릭하기도 전에 이미 CSR에 준비가 되어있고, 사용자가 패칭을 요구하기 전에 미리 패칭 되어 있는 것을 프리패칭이라고 한다.

• nuxt.config.ts

클라이언트 측 전용 렌더링을 활성화할 수 있다.

export default defineNuxtConfig({
  ssr: false
})

경로 규칙을 사용해 경로별로 다른 캐싱 규칙을 허용하고 서버가 지정된 URL의 요청을 응답하는 방법을 결정한다.

export default defineNuxtConfig({
  routeRules: {
    // Homepage pre-rendered at build time
    '/': { prerender: true },
    
    // Product page generated on-demand, revalidates in background
    '/products/**': { swr: 3600 },
    
    // Blog post generated on-demand once until next deploy
    '/blog/**': { isr: true },
    
    // Admin dashboard renders only on client-side
    '/admin/**': { ssr: false },
    
    // Add cors headers on API routes
    '/api/**': { cors: true },
    
    // Redirects legacy urls
    '/old-page': { redirect: '/new-page' }
  }
})

참고자료

https://nuxt.com/docs/guide/concepts/rendering
https://joshua1988.github.io/vue-camp/nuxt/universal-mode.html

https://hanamon.kr/spa-mpa-ssr-csr-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%9C%BB%EC%A0%95%EB%A6%AC/

https://velog.io/@ka0son/%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%82%BC%ED%98%95%EC%A0%9C-CSR-SSR-SSG-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0