서버 측 렌더링

서버 측 렌더링은 서버가 페이지의 전체 마크업을 생성하여 브라우저로 전송하는 방식입니다. 기존 방식에서는 자바스크립트가 채워 넣을 최소한의 문서만 전송했지만, 서버 측 렌더링에서는 브라우저가 응답을 받는 즉시 의미 있는 콘텐츠를 표시할 수 있습니다. 즉, 번들을 다운로드하고, 파싱하고, 실행하고, 데이터를 가져오는 과정을 기다릴 필요가 없습니다.

이 기술은 순수 클라이언트 측 렌더링의 구체적이고 잘 알려진 약점을 해결합니다. 특히 JavaScript 실행 비용이 많이 드는 저사양 기기나 연결 환경에서 콘텐츠가 훨씬 빠르게 표시됩니다. 검색 엔진 및 기타 자동화된 콘텐츠 소비 엔진은 지연되거나 불완전할 수 있는 렌더링 단계를 거치지 않고 콘텐츠를 직접 수신합니다. 소셜 공유 미리보기 기능도 특별한 처리 없이 작동합니다. 또한 JavaScript 로드 또는 실행 실패 시(대부분의 팀이 생각하는 것보다 더 자주 발생함)에도 사용자 경험이 더욱 원활하게 저하됩니다.

페이지 로딩에 수반되는 비용은 흔히 과소평가됩니다. 서버에서 렌더링된 마크업이 표시된 후, 클라이언트 측 프레임워크는 이벤트 핸들러를 연결하고 내부 상태를 재구성하여 페이지를 상호 작용 가능하게 만들어야 합니다. 이 기간 동안 페이지는 준비된 것처럼 보이지만 응답하지 않으므로 방문자가 보이는 부분을 클릭해도 아무 반응이 없는 명백한 오류가 발생합니다. 페이지 크기가 크거나 속도가 느린 기기에서는 이 시간이 상당히 길어질 수 있습니다.

이러한 비용을 줄이기 위해 여러 가지 접근 방식이 등장했습니다. 부분적 및 선택적 하이드레이션은 페이지 전체가 아닌 상호작용 가능한 부분만 상호작용 가능하게 만듭니다. 스트리밍은 마크업을 점진적으로 전송하여 전체 페이지가 생성되기 전에 콘텐츠가 표시되도록 합니다. 아일랜드 아키텍처는 상호작용 구성 요소를 정적인 마크업 내에서 독립적인 단위로 처리합니다. 이러한 각 방식은 초기 렌더링 후 클라이언트 측에서 필요한 작업량을 줄여줍니다.

요청 시 콘텐츠가 변경되지 않는 경우, 정적 사이트 생성은 우선적으로 고려할 만한 대안입니다. 페이지는 빌드 시점에 렌더링되어 파일로 제공되므로 요청 시 렌더링보다 빠르고, 서비스 비용이 저렴하며, 복원력이 뛰어나고, 엣지 서버에서 캐싱하기도 쉽습니다. 방문자별로 콘텐츠가 변경되지 않는 경우에는, 점진적 재생성 전략을 통해 영향을 받는 페이지를 예약된 일정에 따라 또는 요청 시에 다시 빌드하여 전체 재구축 없이도 대부분의 이점을 누릴 수 있습니다.

운영 측면에서 정적 호스팅과는 다른 점이 많으며, 계획 수립이 필수적입니다. 요청별 렌더링은 트래픽에 비례하여 서버 리소스를 소모하므로, 정적 파일에는 없는 확장성과 비용 문제를 야기합니다. 캐싱이 중요해지는데, 특히 개인화된 콘텐츠가 포함된 페이지를 캐싱할 때는 사용자별로 달라지는 요소와 그렇지 않은 요소를 신중하게 구분해야 합니다. 또한, 서버 오류가 데이터 로딩뿐 아니라 페이지 렌더링에도 영향을 미칠 수 있습니다.

데이터 가져오기 전략은 실제 성능 향상에 큰 영향을 미칩니다. 서버 렌더링은 페이지에 필요한 데이터가 빠르게 제공될 때만 효과적이며, 여러 개의 느린 내부 서비스를 기다리는 서버 렌더링은 셸을 즉시 표시하는 클라이언트 렌더링보다 첫 번째 바이트 수신 속도가 느릴 수 있습니다. 종속성 문제로 인해 렌더링 속도가 느려지는 경우, 나머지가 해결되는 동안 준비된 부분을 스트리밍하는 방식이 서버 렌더링의 이점을 유지하는 데 도움이 됩니다.

결정은 프레임워크 방식보다는 콘텐츠와 대상 고객을 따라야 합니다. 검색 순위가 높고 연결 상태가 좋지 않은 환경에서도 빠르게 로드되어야 하는 콘텐츠 중심 페이지는 이러한 방식의 이점을 크게 누릴 수 있습니다. 반면, 검색 가시성이 중요하지 않고 사용자가 이미 애플리케이션을 로드한 상태인 인증 관련 고인터랙티브 애플리케이션은 이러한 방식의 이점이 훨씬 적으며, 복잡성을 도입할 만한 가치가 없을 수도 있습니다. 많은 제품들이 각기 다른 영역에 대해 서로 다른 접근 방식을 사용하는 것이 합리적입니다.

이 선택은 인프라, 전달 및 검색 성능에 동시에 영향을 미치기 때문에 프런트엔드 선호도라기보다는 아키텍처 결정입니다. 실제로 이는 내부적으로 평가됩니다. 웹 성능 측정된 현장 데이터에 대한 작업, 다음을 통해 구현됨 방열판 열 관리용그리고 검색의 의미는 다음과 같이 평가됩니다. 마케팅 서비스인덱싱 동작이 변경을 위한 가장 강력한 근거가 되는 경우가 많기 때문입니다.