입력하다
형기 선배님과의 오전 스터디 시간에 SSR을 활용한 pxd 웹접근성 프로젝트를 만들었습니다.
혜택이 무엇인지 물으셨습니다.
SSR이라 SEO가 좋습니다.
하지만 왜 좋은지는 설명할 수 없었다.
인터넷 업무를 할 때 상식적으로 알아야 할 지식!
그럼 우리가 배운 CSR과 SSR의 차이점을 살펴보겠습니다.
온천? MPA?
CSR과 SSR을 바로 설명하기 전에 먼저 SPA와 MPA의 개념을 알아야 합니다.
밀접하게 관련되어 있음을 알 수 있습니다!
더 잘 알려진 SPA부터 시작합시다!
SPA(단일 페이지 애플리케이션)
SPA 단일 페이지 애플리케이션은 단일 페이지, 즉 하나의 페이지로 구성된 홈 페이지입니다.
CSR에 적합한 한 페이지로만 구성되어 있습니다.
데이터가 변경되거나 검색되면 페이지가 새로 고쳐지거나 다른 페이지로 이동되지 않도록 페이지가 동적으로 구성됩니다.
우리가 알고 있는 Vue, Angular 및 React 프레임워크로 구축된 대부분의 홈페이지가 여기에 속합니다.
그러나 모든 SPA가 CSR을 사용하는 것은 아닙니다.
PHP 또는 JAVA의 정적 페이지로만 구성된 웹 사이트도 SPA입니다.
다중 페이지 애플리케이션(MPA)
다중 페이지 MPA 애플리케이션이란 무엇입니까?
이것은 다중 페이지 웹 사이트입니다.
PHP 또는 JAVA가 이 범주에 속합니다.
여러 페이지를 구성해야 하므로 SSR은 요청 시 서버에서 렌더링하고 클라이언트에 응답하는 방식에 적합합니다.
SPA와 달리 업데이트가 수행됩니다.
CSR
이제 CSR과 SSR에 대해 살펴보겠습니다.
CSR은 클라이언트 측 렌더링을 의미합니다.
구동방식은 초기충전시
모든 논리와 함께 빈 HTML 및 자바스크립트를 다운로드합니다.
그 후 HTML과 DOM이 자바스크립트로 빈 HTML에 동적으로 생성되고 그려집니다.
클라이언트에서의 이 렌더링을 클라이언트측 렌더링이라고 합니다.
이것은 앞서 논의한 SPA에 적합한 환경입니다.
장점
이러한 방식으로 작동하는 CSR의 이점은 다음과 같습니다.
DOM은 Javascript를 통해 동적으로 그려지기 때문에
원하는 항목만 업데이트할 수 있습니다.
예를 들어 링크를 클릭할 때
머리글 및 바닥글과 같은 중복 콘텐츠는 그대로 둡니다.
그 안에 있는 콘텐츠만 업데이트하고 로드할 수 있습니다.
불리
또한 단점은 HTML 파일만 받아 동작하기 때문에 각 페이지에 대한 정보를 포함하기가 어려워 SEO에 취약하다는 점입니다.
다운로드됩니다.
SSR
SSR은 서버 사이드 렌더링을 의미합니다.
구동 방식은 서버에서 렌더링하고 완성된 HTML 파일을 로드합니다.
클라이언트가 요청할 때마다 상황별 HTML 파일 즉, 페이지가 전달됩니다.
여러 가지 일 것입니다.
따라서 MPA 구동방식과 밀접한 관련이 있다.
장점
CSR은 모든 로직이 포함된 javascript 파일을 다운로드했지만
SSR은 클라이언트가 요청한 페이지의 HTML을 다운로드하기 때문입니다.
로드는 첫 번째 항목에서 CSR보다 빠릅니다.
각 페이지는 서버에서 랜더링 후 전달되기 때문에 각 페이지에 대한 정보 입력이 용이합니다.
검색엔진 최적화가 매우 좋습니다!
불리
이동 링크를 클릭하면 새로운 HTML 파일 자체가 서버에서 다운로드되면서 화면이 깜박입니다.
부분적으로 업데이트되는 CSR과 달리 클릭 시 새로운 HTML을 받기 때문이다.
또한 머리글 및 바닥글과 같은 중복 콘텐츠를 다시 렌더링하고 수신합니다.
따라서 초기 입력은 CSR보다 빠를 수 있지만 SSR은 페이지 이동이 느립니다.
또한 SSR은 완성된 HTML을 javascript 파일보다 먼저 받기 때문에 완성된 HTML로 화면이 확인됩니다.
자바스크립트 다운로드가 지연되면 기능이 작동하지 않을 수 있습니다.
CSR + SSR
그렇다면 CSR과 SSR 중 하나를 선택해야 합니까?
그게 아닙니다.
우리는 최근 리팩토링 프로젝트에 Nuxt를 사용했습니다.
Nuxt를 사용하여 Vue 애플리케이션의 정적 페이지를 만들고 서버에 배포할 수 있습니다.
그래서 성공적으로 SEO를 챙길 수 있었습니다!
나는 아직 다른 것을 시도하지 않았다
리액트 + 개츠비
반응 + Next.js
앵귤러+유니버설
등.
마지막으로
이번에는 CSR과 SSR을 공부하면서 기초지식을 많이 배울 수 있는 기회였습니다.
현재의 기술을 배우는 것도 좋지만, 기본을 다지면 시야가 넓어지고 이미 알고 있던 것까지 알게 됩니다.
더 깊이 이해할 수 있는 뜻깊은 시간이 될 것 같습니다.
이 기사 XE 그룹의 pxd 블로그그곳에서도 볼 수 있다