SSR vs CSR vs 번들링

프로젝트 마무리 단계에서 웹 호환성 체크를 하다보니 그동안 모호하게 알고있던 지식에 대해 정리가 필요하다는 것을 알게되어 확실한 정리는 하려고 해보려고 합니다.

Front End 개발환경

• Nuxt.js 2
• Vue.js 2

먼저 세 가지 개념인 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR), 그리고 번들링에 대해 자세히 알아보겠습니다.

서버 사이드 렌더링 (SSR)

서버 사이드 렌더링은 웹 애플리케이션의 초기 HTML을 서버에서 생성하고 클라이언트에 제공하는 방식입니다. 클라이언트는 이 HTML을 받아 브라우저에서 렌더링합니다. 이것은 검색 엔진 최적화(SEO)를 향상시킬 수 있으며, 초기 페이지 로딩 시간을 줄일 수 있습니다.

클라이언트 사이드 렌더링 (CSR)

클라이언트 사이드 렌더링은 웹 애플리케이션의 HTML을 클라이언트 측에서 생성하는 방식입니다. 서버에서는 주로 정적 리소스와 JavaScript 코드를 제공하고, 클라이언트 측에서 이 코드를 실행하여 동적 콘텐츠를 생성하고 렌더링합니다. 이 방식은 상호작용이 빠르고 동적인 사용자 경험을 제공할 수 있지만, 초기 로딩 시간이 더 길어질 수 있습니다.

번들링

번들링은 웹 애플리케이션의 자원들 (JavaScript, CSS, 이미지 등)을 하나의 파일로 묶는 과정을 의미합니다. 이를 통해 HTTP 요청의 수를 줄이고, 코드를 최적화하여 웹 페이지의 성능을 향상시킬 수 있습니다. 번들러는 이러한 자원들을 번들로 묶어주는 도구로, 예를 들어 Webpack, Parcel, Rollup 등이 있습니다.

확실히 설명으로만 들으면 이해가 잘 가지 않습니다. 아래의 코드를 보면서 실행 순서에 맞춰 설명해 보도록 하겠습니다.

<template>
    <div>
        <h1>SSR, CRS 테스트</h1>
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
        <button type="button" @click="changeList()">리스트바꾸기</button>
    </div>
</template>
<script>
    export default {
        date: {
            list: [1,2,3,4,5]
        },
        mounted(){
            //this.setList();
        },
        methods:{
            setList(){
                this.list = [6,7,8,9,10]
            },
            changeList(){
                this.list = [11,12,13,14,15]
            }
        }
    }
</script>

1.번들링 (Bundling)

• 번들링은 주로 개발 및 빌드 단계에서 발생합니다. 사용자 요청에 따라 CSR을 통해 번들링된 자원과 JavaScript 코드를 활용하여 동적인 상호작용 합니다.2.SSR(초기 페이지 로딩)
• 초기 페이지 로딩시 SSR을 이용해 서버에서 html을 생성함으로 아래와 같은 HTML이 완성됩니다.

  <ul>
  <li v-for="item in list">1</li>
  <li v-for="item in list">2</li>
  <li v-for="item in list">3</li>
  <li v-for="item in list">4</li>
  <li v-for="item in list">5</li>
  </ul>

3. CSR

• 초기 페이지 이후 모드 동작은 CSR로 작동이 됩니다. 여기서 초기 페이지 이후 모든 동작이란 Nuxt.js의 모든 라이프 사이클을 의미하며 created, beforeMount등 DOM이 Load되기 전에 실행되는 라이프 사이클도 CSR에서 동작합니다.
• 여기서 사용하는 자원과 JavasScript 코드는 번들링되어있습니다.
• 리스트바꾸기 버튼 클릭 시 번들링 된 javaScripy 코드가 CSR로 동작합니다.