SSR vs CSR( ≒ SPA; 다른 개념이지만 현재 책에선 비슷한 개념으로 작성 ) SSR(Server-Side Rendering) 렌더링과 라우팅에 필요한 대부분의 기능을 서버에 의존하는 방식 ex) Amazon, eBay, Naver, .. CSR(Client-Side Rendering ≒ SPA(Single Page Application) ) 렌더링과 라우팅에 필요한 대부분의 기능을 브라우저의 자바스크립트에 의존하는 방식 ex) Twitter, Gmail, Evernote, Pinterest, … 읽어보기 https://velog.io/@rookieand/CSR-SSR-SPA-MPA-이것들은-뭘까 https://velog.io/@hlna0308/SPA와-CSR은-같을까 ****https://dev-ellachoi.tistory.com/28
4.1.1 싱글 페이지 애플리케이션( SPA; Single Page Application )의 세상
4.1.2 서버 사이드 렌더링이란?
4.1.3 싱글 페이지 애플리케이션과 서버 사이드 렌더링 애플리케이션
- Ω(SPA) vs Ω(SSR)
- 가장 뛰어난 SPA의 성능이 더 좋다
- Θ(SPA) vs Θ(SSR)
- 평균적으로는 SSR의 성능(속도)이 더 좋다
- MPA에서 발생하는 라우팅 이슈를 해결하기 위한 방안 ⇒ 평균적인 경우 SSR에서 더 적용하기 쉽다. ⇒ SPA의 경우 대부분 CSR을 이용해 페이지를 렌더링하기 때문에 자바스크립트뿐 아니라 CSS 등의 도움을 받아야 하기 때문에 상당한 노력이 필요하다.
- 페인트 홀딩(Paint Holding)
- 동일 출처에서 라우팅이 일어날 경우 : 흰 화면이 아니라 이전 페이지를 잠깐 보여주는 기법
- back forword Cache(bfcache)
- 이전, 다음 페이지 이동 시 캐싱된 페이지를 보여주는 기법
- Shared Element Transitions
- 페이지 라우팅 시 동일 요소를 유지하여 컨텍스트를 유지해 부드럽게 전환되게 하는 기법
과거의(LAMP 스택에서) SSR
현대의 SSR( next.js의 경우 ) 최초 진입 시 : SSR; Server Side Rendering : 서버에서 정보를 받아옴 이후 라우팅 : SSG; Static Site Generation : 서버에서 받은 자바스크립트를 바탕으로 SPA처럼 동작 SSG vs SPA SSG : 클라이언트가 요청하는 시점이 아니라 빌드 시에 페이지를 미리 생성해놓음 SPA : 클라이언트가 요청할 때 페이지를 생성해놓음 SSG ⊃ ISR; Incremental-Static-Regeneration
읽어보기
https://velog.io/@bbaa3218/Next-js-SSG-SSR-ISR
https://bigyou98.tistory.com/entry/Nextjs-쓰면-SSR-하고-있는거-아님https://velog.io/@minw0_o/Nextjs에서의-렌더링-방식-CSR-vs-SSR-vs-SSG-vs-ISR
