[렌더링] feat. SSR+MPA, CSR+SPA

순서
1. 렌더링
2. SSR with MPA 
3. CSR with SPA

✅ 렌더링

- HTTP, CSS, JS 등 개발자가 작성한 문서들로 브라우저가 화면에 그려주는 과정

- 브라우저는 렌더링을 하기 위해 각각의 렌더링 엔진을 보유

ex) 크롬, 엣지 등 ➞ 블링크(Blink) 엔진,

       사파리 ➞ 웹킷(WebKit)

---

✅ SSR(Server Side Rendering)

- 동작과정

  1. 클라이언트가 매번 새로운 페이지를 요청

  2. 서버에서 렌더링하여 완성된 페이지 형태로 응답

      

- 장점 : 초기 렌더링 속도가 빠름

            한 페이지에 모든 컨텐츠가 저장되어 있기 때문에 검색 엔진 최적화(SEO) 가능

- 단점 : 새로운 페이지를 요청할 때 마다 새로고침 발생

             간단한 데이터 수정도 서버를 거쳐야하는 등 서버 과부화

 

✅ MPA(Multiple Page Application)

- 웹 애플리케이션을 개발하는 전통적인 방법

- 여러 페이지로 구성된 애플리케이션

- 일반적으로 SSR 방식으로 렌더링하는 애플리케이션

- ex) https://www.nytimes.com/

        https://www.amazon.com/

 

- 장점 : SEO 친화적

            페이지 확장성

- 단점 : 페이지 이동 시 느린 속도

            복잡한 개발

            보안 및 유지보수 어려움

---

✅ CSR(Client Side Rendering)

- 동작 과정

  1. 클라이언트가 초기에 새로운 페이지를 요청하면, 서버에서 빈 html 만 응답

  2. 이 후 클라이언트가 필요한 데이터를 요청하면, 서버에서 리소스만 응답

  3. 클라이언트가 동적으로 렌더링

 

- 장점 : 초기 렌더링 속도가 느림

            한 페이지에 모든 컨텐츠가 저장되어 있기 때문에 검색 엔진 최적화(SEO) 가능

- 단점 : 새로운 페이지를 요청할 때 마다 새로고침 발생

             간단한 데이터 수정도 서버를 거쳐야하는 등 서버 과부화

 

✅ SPA(Single Page Application)

- Angular, React, Vue 등 프론트엔드 기술이 발전하면서 현재 유행하는 방법

- 한 개의 페이지로 구성된 애플리케이션

- 일반적으로 CSR 방식으로 렌더링하는 애플리케이션

- ex) https://react.dev/

        https://www.google.co.kr/maps

 

- 장점 : 빠른 이용 속도 및 응답 시간

            모바일 친화적

            간단한 개발

            로컬 저장소 캐시 사용

- 단점 : 느린 초기 구동 속도

            검색 엔진 최적화 문제

            보안 문제