🔗 참조
📌 SPA(Single Page Application)
SPA는 최초 한번 페이지 전체를 로딩한 후부터 데이터만 변경해서 사용할 수 있는 웹 애플리케이션입니다. → 하나의 페이지에서 실행됩니다.
SPA에서 HTML, JavaScript, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나, 적절한 자원들을 동적으로 불러들여 문서에 추가하는데, 보통 사용자의 동작에 응답하는 방식이다.
전통적인 웹 방식은 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되고 전체 페이지를 다시 렌더링하는 방식을 사용하므로 새로고침이 발생되어 사용성이 좋지 않으며, 변경이 필요없는 부분을 포함하여 전체 페이지를 갱신하므로 비효율적이다.
🔗 자세한 내용은 다음의 블로그를 통해서 알아 볼 수 있습니다! → velog: SPA
📌 CSR(Client Side Rendering)
여기서 클라이언트는 브라우저를 의미한다.
클라이언트인 브라우저가 렌더링을 도맡아 처리하는 방식이다. 서버에서 필요한 데이터를 한 번에 받아오고 받은 데이터를 브라우저가 주체가 되어 그린다. (+) SPA는 처음 한번 페이지 전체를 로딩한 후 필요 시 데이터만 바꿔 화면을 그려주는 것을 말한다. 따라서 SPA는 클라이언트 사이드 렌더링 방식이다.
최초 로드시 필요한 파일들을 전부 받고, 사용자의 인터렉션에 따라서 클라이언트단에서 받아와 랜더링을 해주는 방식입니다. → 기본 틀만 받고, 브라우저에서 동작으로 DOM을 그립니다.
- 단점: 초반에 뼈대만 다운받기 때문에, SEO에 취약, 초기 화면의 렌더링 속도가 느림.
- 장점: 렌더링 속도가 빠름.
📌 SSR(Server Side Rendering)
서버 쪽에서 렌더링을 하여 화면을 보여주는 방식을 말한다. 서버로부터 완전하게 만들어진 HTML 파일을 받아와 화면을 그리기 때문에 첫 화면 로딩 속도가 빠르다.
요청 시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식 → 이미 다 만들어진 DOM을 받습니다.
전통적인 웹은 대부분 서버 사이드 렌더링 방식이었다. 하지만 요즘은 웹에 제공되는 정보가 너무 많고 이를 매번 서버에서 요청하는 방식은 성능적 문제를 낳았다. SSR 방식은 서버에 정보를 요청할 때마다 새로고침이 일어나고 페이지를 로딩할때마다 서버로부터 리소스를 전달받아 이를 읽고 화면에 렌더링하는 방식이기 때문이다.
- 단점: 매 랜더링마다 서버를 거침으로 속도가 느림.
- 장점: 초기 화면의 렌더링 속도가 빠르며, SEO에 최적화되어 있다.
