웹 성능 및 SEO 향상

수년간 SEO와 상호작용해 왔다면 이미 SSR(Server Side Rendering)이라는 개념을 접했을 것입니다. 클라이언트측 렌더링 대신 서버측 렌더링(SSR)을 선택하는 이유는 무엇입니까?

이 가이드에서는 서버 측 렌더링(SSR)의 개념과 현대 웹 개발에서의 중요성을 소개하고 서버 측 렌더링과 클라이언트 측 렌더링을 구별합니다. 또한 서버 측 렌더링을 지원하는 프레임워크와 라이브러리와 이를 수행하는 방법을 소개합니다.

서버 측 렌더링(SSR)이란 무엇입니까?

SSR(서버 측 렌더링)은 웹 페이지의 콘텐츠가 클라이언트 브라우저 대신 서버에서 렌더링되는 웹 개발 기술입니다.

이를 위해 서버는 완전히 렌더링된 HTML 페이지를 생성하여 클라이언트 브라우저로 보냅니다. 이는 서버가 무거운 작업을 수행한다는 의미입니다. 브라우저는 표시할 준비가 된 페이지를 수신하여 초기 로딩 시간을 단축합니다.

서버 측 렌더링은 어떻게 작동합니까?

사용자가 웹페이지를 요청할 때마다 서버는 필요한 모든 JavaScript, HTML 및 CSS 코드를 조합한 다음 완전한 형태의 페이지를 사용자의 브라우저에 보냅니다.

따라서 클라이언트 측 렌더링에서 발생하는 것처럼 브라우저는 처음부터 페이지를 구성할 필요가 없습니다. SSR은 빠른 초기 로드 페이지로 이어지며 SEO에도 좋습니다.

서버 측 렌더링은 Vue.js 및 Gatsby.js와 같은 웹 프레임워크를 백그라운드에서 사용하여 완전한 기능을 갖춘 HTML 페이지를 동적으로 생성합니다.

이러한 프레임워크는 API 또는 데이터베이스에서 데이터를 가져온 다음 구성 요소 또는 템플릿을 사용하여 기능적인 HTML 문서를 작성합니다. 서버가 페이지 생성을 완료하면 추가 처리 없이 이를 클라이언트 브라우저로 보냅니다.

이미지 출처: 반응

서버 측 렌더링이 작동하는 방식은 다음과 같습니다.

클라이언트는 HTTP 요청을 보냅니다. 사용자는 브라우저의 주소 표시줄에 주소를 입력합니다. 브라우저는 HTTP 연결을 설정하고 서버에 요청을 보냅니다.
데이터 가져오기: 서버는 API 또는 데이터베이스에서 데이터를 가져옵니다.
사전 렌더링: 서버는 필요한 모든 JavaScript 구성 요소를 정적 HTML로 컴파일하고 이 HTML을 클라이언트 브라우저로 보냅니다.
페이지 로드 및 렌더링: 클라이언트는 서버에서 HTML을 다운로드하고 표시합니다.
수화: 클라이언트는 최종적으로 모든 JavaScript 코드를 다운로드하여 HTML 페이지에 상호 작용 기능을 추가합니다.

서버 측 렌더링과 클라이언트 측 렌더링

클라이언트 측 렌더링은 서버 측 렌더링과 반대입니다. 기본적으로 브라우저는 사용자에게 표시되는 HTML 문서를 생성합니다. 두 접근 방식의 차이점은 다음과 같습니다.

기능서버 측 렌더링(SSR)클라이언트 측 렌더링(CSR)초기 로드 시간빠른 초기 로드 시간클라이언트 측 로딩에 의존하므로 느릴 수 있음사용자 경험첫 번째 방문 시 사용자 경험이 향상되고 개선됨때때로 속도가 느려질 수 있음 첫 번째 상호 작용에서는 사용자 경험을 제공하지만 후속 방문에서는 증가합니다접근성 모든 필수 콘텐츠는 서버에서 렌더링된 초기 HTML 문서와 함께 로드됩니다. 특히 사용자가 JavaScriptSEO 성능을 비활성화한 경우 접근성이 문제가 될 수 있습니다.SSR은 SEO에 대한 모든 올바른 상자를 선택합니다. 일부 검색 엔진에서는 이를 발견할 수 있습니다. 클라이언트 측에서 동적으로 생성된 일부 페이지를 색인화하기 어려움확장성서버 측 렌더링을 사용하는 트래픽이 많은 웹 사이트를 확장하기 쉽습니다. 개발자는 클라이언트 측 렌더링을 실행하는 웹 사이트를 확장하기 위해 신중한 접근 방식을 제시해야 합니다.보안서버를 줄이기 쉽습니다. -페이지가 서버에 로드될 때 발생하는 측 취약성. XSS(교차 사이트 스크립팅) 및 클라이언트 측 렌더링과 관련된 기타 취약성과 같은 공격에 취약합니다.

SEO를 위한 서버 측 렌더링의 이점

빠른 초기 로드 시간: 페이지를 로드하는 데 걸리는 시간은 웹사이트 방문자가 고려하는 요소 중 하나입니다. SSR을 사용하면 웹사이트 사용자는 완전히 로드된 HTML 페이지를 거의 즉시 볼 수 있습니다. 즉시 로딩은 사용자가 웹페이지와 상호작용하기 전에 기다리는 시간을 줄여줍니다.
느린 장치/네트워크에서의 빠른 성능: 사용자가 웹페이지에 액세스하는 데 사용하는 네트워크가 느릴 수 있거나 빠르지 않은 운영 체제에서 실행되는 장치를 사용하고 있을 수 있습니다. 서버 측 렌더링은 사용자 장치가 너무 많은 JavaScript를 실행할 필요가 없어 성능이 향상된다는 것을 의미합니다. 이러한 네트워크나 장치에는 로드된 HTML 페이지를 표시하기 위해 더 이상 많은 대역폭이나 처리 능력이 필요하지 않습니다.
일관된 사용자 경험: SSR을 사용하면 TTFP(Time to First Paint)를 통해 좋은 첫인상을 만들 수 있습니다. 이러한 사용자는 서버측 렌더링 덕분에 HTML 페이지가 빠르게 로드될 때 귀하의 웹사이트를 첫 번째로 인식할 것입니다.
향상된 SEO: Google, Bing, YouTube와 같은 검색 엔진은 웹 페이지 순위를 매길 때 많은 사항을 고려합니다. 예를 들어 사용자 경험, 사람들이 페이지에서 보내는 시간, 로딩 속도 등을 확인합니다. SSR은 이러한 모든 영역을 개선하므로 앱이 검색 엔진에서 더 높은 순위를 차지할 가능성이 높습니다.
동적 콘텐츠 처리 용이: 검색 엔진은 동적 콘텐츠를 좋아합니다. SSR을 통해 개발자는 이제 동적 콘텐츠를 쉽게 처리하고 사용자 입력 및 선호도에 따라 콘텐츠를 개인화/맞춤화할 수 있습니다.
확장성 및 캐싱: SSR에서는 서버가 초기 로딩을 수행하므로 클라이언트가 처리해야 하는 처리량이 줄어들고 확장성이 향상됩니다. SSR은 또한 서버 수준 및 콘텐츠 전달 네트워크(CDN) 캐싱을 사용하여 서버 로드를 줄이고 성능을 향상시킬 수 있습니다.

일부 다양한 도구와 프레임워크가 SSR을 구현합니다. 일부는 서버측 렌더링만 지원하도록 설계된 반면 다른 일부는 클라이언트측 및 서버측 렌더링을 지원하도록 구축되었습니다. 다음은 웹 개발 세계에서 상호 작용할 가능성이 있는 가장 일반적인 것 중 일부입니다.

Vue.js

Vue.js 사용자 인터페이스 구축을 위한 JavaScript 프레임워크이며 표준 JavaScript, HTML 및 CSS를 기반으로 구축되었습니다. 이 프레임워크를 사용하면 구성 요소 기반 및 선언적 프로그래밍 모델을 사용하여 간단하고 복잡한 UI를 구축할 수 있습니다.

Vue 구성 요소는 기본적으로 브라우저에서 DOM(문서 개체 모델)을 출력으로 생성하고 조작합니다. 그러나 이 프레임워크는 SSR을 사용하여 이러한 구성 요소를 서버의 HTML 문자열로 렌더링하고 브라우저에 직접 보냅니다. 서버에서 렌더링된 Vue 앱은 대부분의 코드가 서버와 클라이언트에서 실행되므로 ‘범용’으로 간주됩니다.

React.js

반응하다 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. 이 라이브러리는 애플리케이션을 재사용 가능한 작은 구성 요소로 분할할 수 있는 구성 요소 기반 프로그래밍 모델을 사용합니다. React는 또한 선언적이므로 코드를 쉽게 예측하고 디버그할 수 있습니다.

React는 기본적으로 클라이언트 측 렌더링과 서버 측 렌더링을 모두 구현하도록 설계되었습니다. React 앱에서 서버 측 렌더링을 구현해야 하는 경우 Express.js와 같은 Node.js 앱 프레임워크를 사용하여 설정해야 합니다. Express 서버에서 앱이 ‘시작’되도록 하려면 package.json 파일의 스크립트도 업데이트해야 합니다.

개츠비

개츠비 웹사이트 구축을 위한 React 기반 프레임워크입니다. 이 오픈 소스 프레임워크는 개발자가 빠른 웹 애플리케이션을 구축할 수 있도록 설계되었습니다. Gatsby는 Drupal 및 WordPress와 같은 다양한 콘텐츠 관리 시스템과 통합되어 데이터를 쉽게 가져올 수 있습니다.

설정하려면 Node.js 서버가 필요합니다. Gatsby의 서버 측 렌더링. SSR은 Gatsby Cloud에서 실행되며, 여기서 모든 요청은 getServerData 함수의 작업자 프로세스로 전송됩니다. 작업자 프로세스의 모든 데이터는 HTML 문서를 반환하는 React 구성 요소로 전달됩니다.

모난

모난 TypeScript를 사용하여 구축된 개발 플랫폼입니다. 이 플랫폼에는 웹 애플리케이션을 구축하는 데 사용할 수 있는 구성 요소 기반 프레임워크가 있습니다. Angular를 사용하여 소규모 및 엔터프라이즈급 애플리케이션을 구축할 수 있습니다.

React와 마찬가지로 Angular는 기본적으로 SSR을 구현하지 않습니다. 하지만 Angular 애플리케이션을 node.js 백엔드 프레임워크인 Express.js와 결합하여 서버측 렌더링을 구현하도록 설정할 수 있습니다. Angular Universal을 사용하면 서버에서 Angular 구성 요소를 렌더링하고 초기 로드 시간을 줄일 수 있습니다.

웹 사이트가 SSR 또는 CSR을 사용하는지 확인하는 방법

개발자나 마케팅 담당자라면 웹 사이트를 방문할 때 해당 웹 사이트가 서버 측 렌더링을 사용하는지 아니면 클라이언트 측 렌더링을 사용하는지 판단하기 어렵습니다. 다행히 웹사이트를 검사하여 웹사이트에서 사용하는 렌더링 접근 방식을 확인할 수 있습니다. 우리는 웹사이트 koreantech.org를 검사하여 시연할 수 있습니다. 아무 페이지나 마우스 오른쪽 버튼으로 클릭한 다음 ‘페이지 소스 보기’를 선택하겠습니다.

서버 측 렌더링의 한계

코드 복잡성 증가: 서버 측 렌더링을 구현하려면 서버 측에 추가 구성이 필요할 수 있습니다. 이러한 접근 방식은 서버 측의 코드 기반을 증가시켜 유지 관리를 어렵게 만들 수 있습니다.
서버 로드 증가: SSR이 로드 시간을 향상시킬 수 있다는 점을 강조했지만 트래픽이 많은 경우 성능 병목 현상이 발생할 수도 있습니다. 서버는 HTML 콘텐츠 렌더링을 담당하며, 이로 인해 서버에 과부하가 걸리거나 충돌이 발생할 수도 있습니다.

서버측 렌더링은 서버측 태그 지정과 동일합니까?

아니요. 서버 측 렌더링은 서버가 완전히 로드된 HTML 페이지를 브라우저에 보내는 웹 개발 접근 방식입니다. SSR은 빠른 초기 로드 시간을 늘리고 SEO를 개선하기 위한 것입니다.

클라이언트 측 태그 지정은 모든 분석 및 추적이 서버 측에서 수행되는 곳입니다. 태그가 서버에서 처리되면 클라이언트 브라우저는 더 이상 이러한 프로세스를 처리할 필요가 없으므로 보안이 강화되고 성능이 향상됩니다. 더 잘 이해하려면 서버 측 태그 지정에 대해 알아보세요.

결론

서버 측 렌더링은 로드 시간 증가와 사용자 경험 개선을 통해 앱 성능을 향상시키려는 모든 웹 개발자에게 좋은 선택입니다.

반면, 잘 구현되지 않으면 SSR은 코드 유지 관리가 어려워지기 때문에 어려울 수 있습니다. 그러나 SSR의 이점은 문제보다 훨씬 크기 때문에 많은 조직에서 SSR을 채택하고 있습니다.

다음으로, 클라이언트측 태그 대신 서버측 태그를 사용하는 이유에 대해 읽어볼 수도 있습니다.