What I Learned
  • Introduction
  • Introduction
  • Javascript
    • 클로저 (closure)
    • 프로토타입 (Prototype)
    • 정규표현식 (RegExp)
    • 날짜 (Date)
    • jQuery 분석
    • 스코프 (this)
    • 성능 최적화 (Optimization)
  • Style
    • CSS
      • Prevent user select
      • Aspect Ratio
      • Sticky Footer
    • SASS
      • for loop
      • mixin example
      • Media Query
  • Web
    • 웹의 동작 과정
    • Cross Browser
    • Document Reflows
    • Open Graph
    • 이미지 압축 (Image optimization)
    • SPA, SSR 비교
  • Algorithm and Data Structure
    • 자료구조 (Data Structure)
      • 큐 (Queue)
      • 스택 (Stack)
      • 링크드 리스트 (Linked List)
    • 기초 이론
      • 복잡도 분석
    • 수학 (Math)
      • factorial (계승)
      • 피보나치 수 (Fibonacci)
    • 정렬 (Sorting)
      • 버블 정렬 (Bubble Sort)
      • 선택 정렬 (Selection Sort)
      • 삽입 정렬 (Insertion Sort)
      • 합병 정렬 (Merge Sort)
      • 퀵 정렬 (Quick Sort)
    • 탐색 (Search)
      • 순차 탐색 (linear search)
      • 이진 탐색 (Banary search)
    • 문제 풀이
      • 땅따먹기
      • 가장 큰 원소의 합 구하기
      • JS with HTML
  • Software Engineering
    • OOP
    • Development Process
    • TDD / BDD
  • Interview
    • HTML
    • CSS
    • Javascript
    • Other
    • General Questions
  • DevOps
    • gulp
  • PHP
    • Basic
Powered by GitBook
On this page
  1. Web

SPA, SSR 비교

SPA (Single Page Application) vs SSR (Server Side Rendering)

SPA (Single Page Appliation)

SSR (Server Side Rendering)

랜더링

정적 소스를 한 번에 다운받아, 클라이언트에서 랜더링하는 방법

페이지를 이동할 때마다 모든 리소스를 다운받는 방식

초기 구동 속

페이지 이동 시 필요한 리소스만 다운받기 때문에 빠르지만, 초기 구동 시 상대적으로 느린 단점. (Code Split 등의 방법으로 해결 가능)

상대적으로 빠르지만, 페이지마다 리소스를 다운받아야 하기 때문에

라우

클라이언트 사이드에서 결정됨. hash, browserHistory 사용

서버에서 정의

SEO

어플리케이션이라면 큰 문제는 아니지만, 클라이언트 랜더링 방식에서 SEO는 단점이다. (라이브러리에서 지원하는 SSR 등의 방법 이용가)

문제 없음

Previous이미지 압축 (Image optimization)NextAlgorithm and Data Structure

Last updated 6 years ago