TIL_56_230116

56일 차 회고

• 면접질문1

SPA와 MPA 차이점

SPA(Single Page Application)

• 하나의 페이지로 구성된 애플리케이션
• 한 번만 리소스(HTML,CSS,JS)로딩하고 그 후에는 데이터를 받아올 때만 서버와 통신한다.CSR(Client Side Rendering) 방식
• 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 화면을 갱신한다.

장점

• 전체 페이지를 업데이트 할 필요가 없기 때문에 빠르고 ‘깜빡’ 거림이 없어 자연스러운 사용자 경험
• 서버에게 정적리소스를 한 번만 요청하고 받은 데이터는 전부 저장(캐시=Cache)

단점

• 검색엔진최적화(SEO)가 어려움
• SSR에서는 사용자에 대한 정보를 서버측에서 세션으로 관리를 하지만 CSR 방식에서는 클라이언트측의 쿠키말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다.

MPA(Multy Page Application)

• 여러 개(Single)의 Page로 구성된 애플리케이션
• 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(HTML, CSS, JavaScript)가 다운로드SSR(Server Side Rendering) 방식

장점

• SEO 관점에서 유리하다.(검색엔진이 페이지를 크롤링하기에 적합)
• 서버에서 이미 렌더링해 가져오기 때문에 첫 로딩 매우 짧다.

단점

• 매 페이지 요청마다 리로딩(새로고침) 발생한다.새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링하기 때문에

SSR/CSR

SSR(Server side Render)

-MPA는 페이지를 이동할 때마다 새로운 페이지를 요청한다. 모든 템플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다.

• 브라우저에서 JavaScript 코드가 동작하기 전에도 완성된 형태의 템플릿 (HTML에 데이터가 삽입된 상태)을 서버로 부터 전달받는다. 이 때문에 검색로봇이 페이지를 크롤링하기에 매우 적합하다.

CSR(Client side Render)

• 최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다, 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링하는 방식이다. SEO가 어렵다는 큰 단점이 있다.

출처 및 참고