SPA, SEO, SSR, CSR, TTV, TTI (nextJS)

Juhyang·2022년 3월 8일
0

SPA (Single Page Application)

  • 사용자가 한 페이지에 머무르면서 필요한 데이터를 서버에서 받아와서 부분적으로만 업데이트
  • Vue, React 등 CSR 프레임워크가 개발되었다.

SEO (Search Engine Optimization)

  • 검색 엔진 최적화
  • 검색 엔진에서 찾아지기 쉽게 하는것

SSR (Server Side Rendering)

  • 이미 만들어져 있는 HTML 파일을 클라이언트에게 넘겨준다.
  • 장점
    - 페이지 로딩이 빨라진다.
    • 이미 데이터가 있으므로 SEO가 CSR보다 좋다.
  • 단점
    - 새로고침이 일어날때마다 전체적인 웹 사이트를 서버에서 다시 새로 받아와야한다.
    • 서버에 과부하가 생길 수 있다.
  • nextJS에서 SSR 모드를 사용하려면 별도의 서버가 돌아가야한다.
  • 서버에서 페이지의 요소들 중 바로 나타나야 하는 것들을 지정하여서 서버에 미리 업로드 한다.
  • 이렇게 하면 첫 로딩은 빠르게 + CSR의 장점을 살리는 코드 작성이 가능하다.

CSR (Client Side Rendering)

  • 모든것을 클라이언트가 처리하는것
  • HTML은 빈 파일이고, 소스코드가 담겨있는 JS와 필요한 데이터인 JSON을 다운받아와서 화면에 그려준다. (사이트의 요소들을 직접 렌더링)
  • 단점
    - 페이지 로딩이 오래걸린다.
    • 동적 렌더링이라 SEO가 좋지않다.
    • 규모 있는 사이트라면 로딩 속도가 느려진다.
  • 장점
    - 필요한 부분만 부분적으로 렌더링 가능

TTV(Time To View) / TTI(Time To Interact)

  • 사용자가 브라우저의 내용을 볼 수 있는 시점과 사용자가 브라우저를 인터랙션 할 수 있는 시점

1) CSR

  1. 브라우저 접속
  2. HTML 로딩 (빈파일)
  3. JS 로딩
  4. TTV & TTI 가능.

즉 웹사이트를 볼 수 있음과 동시에 클릭과 활용이 가능하다.
-> 보여줘야 할 필수적인 요소가 무엇인지 고민하면 좋다.

2) SSR

  1. 브라우저 접속
  2. HTML 로딩 ( TTV 가능)
  3. JS 로딩
  4. TTI 가능

즉 사용자가 보고 난 뒤에 인터렉션 할 수 있는 공백기간이 꽤 길다.
-> 공백 기간의 시간 단차를 줄이는것을 고민하면 좋다.

참고문서
https://www.youtube.com/watch?v=iZ9csAfU5Os
https://www.youtube.com/watch?v=5ILR9Vd_Vos&t=4s

profile
kurly - commerce web development

0개의 댓글