ESR이 무엇인가요?
모든 개발자가 알고 있듯이, CSR과 SSR의 차이는 잘 이해되고 있습니다.
그러나, 많은 사람들이 ESR을 모르고 있는 것 같습니다.
ESR (Edge Side Rendering)은 사용자에게 가까운 엣지 서버에서 콘텐츠를 렌더링하는 방법입니다.
SSR와 비슷하지만, SSR은 배포 서버 (origin 서버)에서 주로 수행되는 반면, ESR은 물리적으로 클라이언트에 더 가까운 엣지 네트워크에서 렌더링됩니다.
ESR은 서버에 캐시된 데이터가 없을 때 데이터 검색 시간이 길어지는 문제를 해결하기 위해 등장한 기술입니다.
또한, 많은 사용자가 사이트에 접속할 때, 서버 과부하가 발생할 수 있지만, ESR을 사용하면 사용자 분산을 통해 대규모 트래픽을 효과적으로 처리할 수 있습니다.
따라서, 다음과 같이 SSR과 ESR의 차이를 간략하게 정리해보겠습니다.
| Feature | SSR | ESR |
|---|---|---|
| 렌더링 위치 | 배포 서버 | 엣지 서버 |
| 초기 로드 속도 | 일반 | 빠름 |
| SEO 성능 | 좋음 | 좋음 |
Nuxt3에서 ESR을 사용하는 방법
Nuxt3에서 ESR을 사용하는 방법을 확인해봅시다.
ESR은 실제 렌더링 모드보다 배포 대상임을 유의하세요.
엣지 사이드 렌더링은 Nitro, Nuxt 3를 구동하는 서버 엔진 덕분에 가능합니다.
Node.js, Deno, Cloudflare Workers 등 다양한 플랫폼에 대한 크로스 플랫폼 지원을 제공합니다.
ESR을 사용하면, 렌더링 프로세스는 네트워크 - CDN의 엣지 서버에 푸시됩니다.
따라서, 실제로 Nuxt3 소스에서 추가 작업이 필요합니다.
그러나, Nuxt3 소스에서 하이브리드 렌더링 환경을 설정해야 합니다.
이는 사이트 캐시가 이미 존재하면, 서버에서 미리 생성된 캐시를 사용하여 빠르게 표시되기 때문입니다.
사이트 캐시가 없으면, HTML을 렌더링하기 위해 배포 서버에서 데이터를 요청합니다.
다음 다이어그램은 ESR이 작동하는 방식을 보여줍니다.
Vercel에서 ESR 설정
앞서 언급한 것처럼, Nuxt3 소스에서 추가 작업이 필요합니다.
Vercel에 배포할 때, 다음 빌드 명령어를 추가합니다.
// package.json
...
"scripts": {
"build": "NITRO_PRESET=vercel-edge nuxt build",
}
...위와 같이 빌드 명령어를 추가하고 배포하면, 다음 그림과 같이 Vercel-edge 환경이 자동으로 설정됩니다.
이제 프로젝트를 만들어봅시다!
ESR을 Nuxt3와 Vercel에서 사용하는 방법을 확인해봤습니다.
다음에 봐요!
