SSR/CSR

Question Murder·2022년 8월 30일
TIL

TIL

목록 보기
1/1

SPA(Single Page Application)

서버로부터 새로운 페이지를 불러오지않고 페이지 요청에 따라(페이지 간 이동 시) 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신한다.
원래 전통적인 Web Application 방식은 전체 페이지를 다시 렌더링하는 방식을 사용하므로 새로고침 시 변경이 필요하지않는 부분들까지 갱신되므로 비효울적인 방식을 보안하고자 SPA를 사용하게 되었다.

Vue, React, Angular는 SPA기반으로 웹 페이지를 만들기위한 라이브러리/프레임워크이다.
SPA는 SSR방식이 아닌 js를 통해 동적으로 렌더링하는 CSR방식을 사용한다.

SPA 정리

  • 첫 로딩시 전체페이지를 로딩하고 필요한 데이터만 JSON형태로 받아 동적으로 렌더링하는 방식
  • CSR방식을 사용하나 SPA라해서 CSR은 아니다!
  • 대표적인 SPA프레임워크는 react, vue, angular가 있다.

SSR이란 무엇인가!

sever side rendering으로 서버에서 렌더링을 마치고, 완전하게 만들어진 HTML파일을
브라우저로 전달한 후 렌더링하는 방식이다.

  • 장점
    • 완성된 html파일(meta tags)을 뿌려주니 SEO 가능
    • 사용자 입장에서는 서버에서 화면을 뿌려주니 로딩이 짧게 느껴지지만 사실 기능(인터렉션)들은 동작하지 않음
  • 단점
    • 페이지 요청을 할 떄마다 매번 서버에 요청하기 떄문에 서버의 부하가 커짐

CSR이란 무엇인가!

전통적인 SPA렌더링 방식으로 최초 로딩 시 브라우저가 서버에 HTML, CSS, JS리소스를 받아오고 정의된 JS를 통해 동적으로 렌더링

  • 장점
    • 서버에 요청하는 횟수가 적어 서버 부담이 SSR에 비해 적다.
    • 화면이 한번 그려진 이후에는 페이지 전환 속도가 좋다.
  • 단점
    • 처음에 빈 html페이지이다보니 크롤러 데이터를 수집할 수 없어 SEO(검색엔진최적화)문제 발생
    • 처음 화면 진입 시 화면에 그려지는 시간이 길다 그러나 그려진 시점에서 기능(인터렉션)들이 동작한다.

SSR/CSR 동작과정

CSR

1. 웹사이트 방문하면 브라우저가 서버에 "콘텐츠 요청"
2. 서버는 브라우저에게 "빈 html, 연결된 js링크 반환"
	-> js파일을 다운로드 받아 동적으로 만들어서 띄운다. 
	동적으로 페이지를 만들어서 띄운다. DOM을 다운로드 해야함 
	JS을 다운로드받고 , 동적으로 띄우므로 초기로딩속도가 느림
	-> 일부변경: 서버 데이터만 요청하므로 빠름
	-> 서버측에 부하가 적음: 빈 html만 넘겨주므로

SSR

1. 유저가 브라우저 -> 서버 콘텐츠를 요청
서버에서 필요한 데이터를 삽입하고 렌더링 준비를 마친 HTML, CSS, JS를 전달
2. 브라우저는 전달받은 페이지를 띄운다. 
3. 브라우저가 JS를 다운로드하고 HTML을 연결한다. 
4. JS를 받고 실행하기전에 사용자가 화면을 볼 수 있다 -> 초기구동속도 굿 
	-> 내용과 스타일만 입혀져서 사실은 JS가 연결될때까지 기다려야함

SEO(검색엔진최적화)관련된 SSR/CSR

CSR가 SEO의 최적화에 불리

브라우저가 가진 웹 크롤러는 HTML을 읽어서 검색 색인을 만들어내는데 HTML이 비어있는경우 검색엔진이 색인할만한 컨텐츠가 없음

SEO유리한 SSR

서버에서 렌더링 준비를 마친 HTML 브라우저에게 응답하므로 검색엔진에 최적화(모든 데이터가 담겨진 상태이므로)

  • CSR은 JS가 동적으노 DOM을 생성되서 HTML = 사용자 시점이 동일

SEO에 최적화인 SSR이 정답일까?

그것또한 아니다. 모든 프로젝트가 SEO(검색엔진최적화)를 필요로 하는것이 아니기 때문이다.
오히려 SEO가 필요치않은 프로젝트에서 SSR을 사용함으로써 서버에 부하를 줄 수 있기때문이다. 그러니 프로젝트 상황에 맞춰서 적절한 상황에 맞게 사용하는 것을 추천한다.

CSR방식

  • 상황: 주문결제 페이지에서 주문자 정보 "변경"버튼을 클릭 시 [주문자 정보 변경] 팝업이 호출된다. 이때 사용자의 정보(주문자,휴대전화,이메일)를 노출시켜주고 수정이 가능한 상황
  • 시점: 팝업이 열렸을때 사용자의 정보 노출
//template
<OrderInput v-model="userNm" />

//script
data() {
	userNm: '',
}, 
computed: {
	userInfo() {
		return this.$store.getters['pay/userInfo']
	}
},
mounted() {
	this.userNm = this.userInfo.userNm
}

mounted() 라이프 사이클 훅을 이용해 컴포넌트 생성후 데이터를 불러온다.

SSR 방식

  • 상황: 브랜드에서 카테고리, 리스트를 화면에 뿌려주는 상황
  • 시점: 브랜드 카테고리 클릭 후, 브랜트 페이지 오픈
sync fetch () {
    await Promise.all([
      this.getCategoryList(this.categoryLevel),
      this.getMDListData(),
      this.getBrandList({}),
    ])
  },

페이지가 created,mounted되기저에 API를 호출해 데이터를 가져와야하는 경우 Nuxt.js SSR을 사용해 서버에서 html페이지의 내용을 모두 그려서 화면에 그려주는것이 특징이다.

  • asyncData, fetch Nuxt의 비동기 REST API를 호출할 수 있다.

참고자료

https://velog.io/@gwanuuoo/SPA%EB%8A%94-%EA%B8%B0%EC%A1%B4-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%99%80-%EC%B0%A8%EC%9D%B4
https://www.youtube.com/watch?v=YuqB8D6eCKE
https://joshua1988.github.io/vue-camp/nuxt/data-fetching.html#fetch

공부한 내용을 정리하고자 작성했습니다
내용에 문제가 있다면 피드백 부탁드립니다 감사합니다

profile
Question Murder
물음표 살인마

0개의 댓글