[network] SSR,CSR

[young-02]

SPA

Single Page Application 하나의 HTML 페이지에서 새로운 페이지를 불러오지 않고, 필요한 부분만 동적으로 컨텐츠를 바꾸는 어플리케이션

MPA

Multiple Page Application 여러개의 페이지로 이루어져 있으며, 사용자가 페이지를 요청할 때마다 서버에서 렌더링된 HTML를 받아와서 컨텐츠를 변경하는 어플리케이션

SPA는 첫페이지만 서버에서 받아오고, 필요한 부분만 동적으로 변경 MPA는 여러페이지로 이루어져 있으며 페이지가 달라질 때마다 서버에서 렌더링 된 파일을 받아온다.

CSR

Client Side Rendering SPA가 사용하는 렌더링 방식 첫 구동 시에 HTML, JS 파일을 받아오고, 사용자의 상호작용에 따라 js를 이용하여 동적으로 렌더링 진행

장점

• 동적으로 빠르게 렌더링 : 사용자 경험이 좋다
• 서버 요청 횟수가 적다: 서버의 부담이 덜한다.

  단점

• 첫 화면을 보기까지 오랜시간이 걸린다.(FP,FCP속도 느림) : 초기 렌더링에 필요한 js파일의 크키가 크기 때문에 코드분할(code splitting)을 고려해야한다.
• 낮은 SEO 성능 : JS 중심이기 때문에 크롤링이 어려움

  SSR

  Server Side Rendering MPA구현할때 사용 서버측에서 렌더링을 담당하는 방식 새로운페이지로 이동할 때 마다 서버에서 렌더링을 마친 HTML 파일을 받아와서 렌더링

  장점

• 빠른 화면 로딩 (FP, FCP 빠름) : HTML파일을 먼저 서버에서 제공해 주기 때문에 사용자가 기다리지 않아도 된다.
• 빠른 TTI(Time To Interactive): 서버에서 페이지 로직 및 렌더링을 사전에 실행한 경우 js파일을 많이 보낼 필요가 없기 때문에 TTI또한 빠르게 수행도니다.
• 향상된 SEO : HTML 타이틀, 태그 등으로 검색 엔진에 노출되기 훨씬 쉬워진다.

  단점

• 보이지만 작동 하지 않는 기능: html파일만 제공하기 때무에 화면에 보이지만 실제로 동적인 기능을 수행하기 위해서 js파일을 다운받아야 한다.
• 서버 과부하 위험: 페이지 요청시 마다 새로고침과 파일을 요청하기 때문에 서버부하가 크다
• 느린 TTFB(Time to First Byte) : 페이지 요청마다 html을 받아야 하므로 서버로부터 첫번째 byte가 오기까지 걸리는 시간이 csr보다 느리다.
• CDN 캐싱전략:-요청에 대한 HTML 파일을 받아올 때마다 렌더링을 해야하기 때문에 CDN을 활용한 캐싱 전략을 사용할 수 없다.