CSR (client side rendering)

개념

웹 애플리케이션에서 콘텐츠를 웹 브라우저에서 동적으로 생성하는 방법

단계

1. 사용자가 웹 페이지 요청하면 서버는 기본적인 html 파일과 함께 필요한 js 파일들을 브라우저에 전달
2. 브라우저는 받은 js 코드를 실행하여 html 요소를 동적으로 생성
3. 사용자 페이지와 상호작용 시 필요한 데이터를 비동기적으로 요청받아 업데이트. 일부 업데이트 된 페이지만 변경이 가능하여 반응이 빠름.

장점 및 단점

• 장점 : 빠른 상호작용 (페이지 내에서 변경가능 함), 서버 부담 감소 (상호작용에 따라 동적으로 변경 그 전에는 초기 html과 js만 제공)
• 단점 : 초기 로딩속도 느림(페이지 로드 시 js파일 다운로드 및 실행해야 함), SEO(검색엔진 최적화) 어려움 웹 크롤러가 js를 완전히 처리하지 못하는 경우 발생

state 작동방식

• React (CSR) 방식에서는 특정 state값을 기반으로 렌더링되는 컴포넌트일 경우 기본 2번 렌더링됨
• 1번째 렌더링시 데이터가 담길 state가 초기화되고 원하는 데이터가 state에 담김
• state에 data가 담기면서 2번째 렌더링이 일어나고 2번째 렌더링시 비로소 데이터를 출력
• state에 값이 담기면 해당 값은 다음번 렌더링 타이밍에 적용됨

사용언어

• react, vue, angular

SSR (server side rendering)

개념

클라이언트에 요청받은 서버는 데이터와 템플릿을 결합하여 완성된 html 페이지 생성
컴포넌트가 마운트되기전 서버쪽에서 미리 특정값을 전달
ex) console.log(data)를 찍게 되면 터미널 창에서 서버 데이터값을 먼저 확인가능하다.

단계

클라이언트단(화면)에서 동작되는게 아니라 서버쪽에서 동작이 먼저 되어 원하는 값이 화면에 바로 찍히지 않는다.

장점 및 단점

• 장점 : 미리 서버가 작업할 내용을 미리 처리한 다음 컴포넌트가 마운트되면 해당 값을 바로 전달하기 때문에 작업이 훨씬 효율적
• 단점 : 서버 부담증가 (서버에서 모든 요청에 대해 html로 생성하므로 부하), 동적페이지 업데이트 필요할 시 추가적인 처리가 필요

사용언어

• next.js, django

SSG (static site generation)

만약, 바뀌지가 않는 값이면 새로고침 할때마다 서버에 요청해야 하니까 비효율적
서버쪽에서 작업을 실행하긴 하는데 빌드된 값이 한 번만 필요하면 정적인 값을 출력
서버에 재요청하지 않는 방식