GigaOM Radar Edge Platform Leader & Outperformer 2024 | 
Edgio 사이트의 홀을 럼 타기 (데이터와 함께!)
Edgio Sites(프런트엔드 클라우드 플랫폼)에 구축된 Next.js 웹사이트와 사용자가 상호 작용하는 방식에 대해 심도 있는 통찰력을 얻고 싶으십니까? RUM(Real User Monitoring)을 활성화하면 사용자 경험에 대한 중요한 데이터를 수집하여 성능 병목 현상을 식별하고 사용자 참여를 개선하기 위해 사이트를 최적화할 수 있습니다.
이 가이드는 Edgio 사이트에 배포된 Next.js 프로젝트에서 RUM을 활성화하는 단계별 접근 방식을 제공합니다. 특정 코드 예제는 Next.js를 대상으로 하지만 일반적인 개념은 다른 JS 프레임워크에도 적용됩니다.
다이빙하기 전에:
이 가이드에서는 Next.js 웹 사이트가 Edgio 조직에 이미 배포되어 있다고 가정합니다. 이에 대한 재검토를 원하신다면 Edgio Sites 에 Next.js를 배포하는 방법에 대한 설명서를 참조하시기 바랍니다. 또한 프로젝트 폴더 구조와 RUM 코드는 사용 중인 JS 프레임워크에 따라 약간 다를 수 있습니다.
RUM 활성화 단계:
- 고유한 RUM 토큰 찾기: Edgio Console에 로그인한 후 >>Edgio 대시보드에서 Property Specific Environment Real User Monitoring으로 이동합니다. 자산에 대해 생성된 고유한 토큰을 찾을 수 있습니다.
- RUM 패키지 설치: 터미널을 열고 프로젝트 디렉토리로 이동합니다. npm 또는 yarn을 사용하여 @edgio/rum 패키지를 설치합니다.
npm 설치 @edgio/rum
또는
Yarn @edgio/rum 추가 - 설치를 다시 확인합니다. @edgio/rum 패키지가 package.json 종속성에 나열되어 있고 node_modules 디렉토리에 있는지 확인합니다.
- RUM 구성 파일 만들기: 프로젝트의 src/app 폴더 내에 rum.ts라는 새 파일을 만듭니다.
- RUM 메트릭 수집을 구현합니다. rum.ts 파일에 다음 코드를 추가합니다.
자바스크립트
'use client';
import { useEffect } from 'react';
import { Metrics } from '@edgio/rum';
const RumMetrics = () => {
useEffect(() => {
console.log('Initializing RUM metrics...');
new Metrics({
token: 'REPLACE_WITH_YOUR_TOKEN', // Replace with your unique token from Edgio
}).collect();
console.log('RUM metrics initialized');
}, []);
return null;
};
export default RumMetrics;
‘replace_with_your_token’을 Edgio에서 가져온 실제 토큰으로 바꿔야 합니다.
- 레이아웃으로 RUM 메트릭스 가져오기: src/app/layout.tsx 파일(또는 기본 레이아웃 파일)로 이동하고 5단계에서 생성한 RumMetrics 구성 요소를 가져옵니다.
자바스크립트 –
‘./rum’에서 RumMetrics 가져오기;
- 레이아웃에 RUM 추가: 레이아웃 구성 요소의 내보내기 기능(일반적으로 레이아웃 또는 이와 유사한 함수) 내에서 <RumMetrics / 를 추가하여 >레이아웃이 로드될 때마다 RUM 초기화가 수행되도록 합니다. 그러면 Next.js 애플리케이션 내의 모든 페이지 로드 또는 탐색 이벤트에 RUM이 삽입됩니다.
예를 들면 다음과 같습니다.
자바스크립트
export default function RootLayout({ children }) {
return (
<html>
<head />
<body>
<RumMetrics /> {/* RUM initialization */}
{children}
</body>
</html>
);
}
확인:
- 웹 사이트 시작: Next.js 웹 사이트를 실행하고 브라우저 개발자 콘솔을 엽니다.
- RUM 콘솔 로그를 찾습니다. RUM이 성공적으로 초기화되면 콘솔에 “RUM 메트릭 초기화 중…” 및 “RUM 메트릭 초기화”와 같은 메시지가 표시됩니다.
Edgio Sites Next.js 웹 사이트에서 RUM을 활성화했습니다. 사전 정의된 위치 및 장치에서 사용자 상호 작용을 시뮬레이션하는 합성 모니터링과 달리 RUM은 다양한 장치, 네트워크 및 지리적 위치에 걸쳐 실제 사용자 상호 작용에서 데이터를 캡처합니다.
이 데이터를 사용하여 다음을 수행할 수 있습니다.
- 실시간 영향 보기: 사이트의 변경이 핵심 웹 바이탈 및 전반적인 사용자 경험에 미치는 영향을 실시간으로 관찰할 수 있으므로 보다 신속한 응답과 조정을 가능하게 합니다.
- Web Vitals와 애플리케이션 라우트 상관 관계 분석: RUM을 사용하면 핵심 Web Vitals와 애플리케이션 라우트의 상관 관계를 분석하여 애플리케이션의 여러 부분의 성능을 파악할 수 있습니다.
- 다양한 차원의 성능 분석: RUM을 사용하면 국가, 장치 유형 및 연결 유형과 같은 다양한 차원의 성능을 분석하여 최적화가 필요할 수 있는 특정 영역을 식별할 수 있습니다.
- 검색 순위에 미치는 영향 파악: 핵심 웹 바이탈은 검색 엔진의 순위 요소이므로 RUM은 검색 순위에 부정적인 영향을 줄 수 있는 페이지를 식별하여 가장 필요한 위치에 최적화를 우선 순위로 지정할 수 있도록 도와줍니다.
지금 바로 Edgio Sites 프로젝트에서 RUM을 활성화하여 귀중한 사용자 통찰력을 얻으십시오! RUM에 대한 자세한 내용은 Edgio RUM 설명서 – RUM(Real User Monitoring)을 참조하십시오.
