이 글에서는 이전에 논의했던 SSR과 CSR 문제를 더 자세히 살펴보도록 하겠습니다. 렌더링 방법에 대해서는 기사에서 설명하겠습니다.

이 글에서는 제이슨 밀러와 애디 오스마니가 쓴 '웹 렌더링' 글을 검토 하고 이 주제를 설명해보겠습니다.

이 기사는 저의 기사 'HTML 렌더링은 어디에서 해야 할까?'를 바탕으로 작성되었습니다. 제가 얼마 전에 쓴 글입니다. 모든 것은 블로그 게시물의 질문으로부터 시작됩니다.

웹사이트를 개발할 때 로직을 실행하고 렌더링하는 작업이 여러 곳에서 일어날 가능성이 있습니다. 웹 페이지를 개발하는 데는 다양한 방법이 있는데, 개발자들은 어떤 접근 방식을 선호할지 어떻게 결정할까?

이러한 결정을 내리려면 개발자는 렌더링 방법과 그에 따른 성능 저하를 잘 이해해야 합니다.

A.렌더링

렌더링 주제가 무엇인지 궁금하시다면, 이 주제를 설명한 블로그 게시물에서
자세한 내용을 읽을 수 있습니다 .

B. 정적 웹 대 동적 웹

이해해야 할 또 다른 사항은 정적 웹과 동적 웹 의 차이입니다 . 정적 웹 페이지란 서버에서 페이지를 가져온 후 AJAX로 요청을 하지 않고 서버로 돌아가지 않는 페이지(HTML, CSS, JS)로, 사용자에 따라 콘텐츠가 변경되지 않거나 데이터 변경으로 인한 동적 데이터(환율, 날씨 등)를 포함하지 않는 페이지입니다. 예를 들어, 블로그, 뉴스 등이 있습니다. 반면, 동적 페이지 는 AJAX, API, 데이터베이스 등이 필요한 웹 페이지로, 호출된 시간 간격 및 매개변수에 따라 페이지 내용이 변경됩니다.

C. 성과 조건

• TTFB(첫 바이트까지 걸리는 시간): 링크를 클릭한 후 첫 번째 콘텐츠를 받을 때까지의 시간입니다.
• FP(First Paint): 사용자에게 첫 번째 픽셀을 보여주는 데 걸리는 시간.
• FCP(First Contentful Paint): 요청에서 첫 번째 논리적 콘텐츠를 표시하는 데 걸리는 시간입니다.
• TTI Time To Interactive 페이지가 사용자와 상호작용할 준비가 되는 시간(모든 이벤트의 연결)

• SSR(Server Side Rendering): 렌더링 프로세스가 서버 측에서 이루어지고 ASP.Net, JSP, PHP와 같은 방법을 사용하여 데이터베이스에서 검색하여 동적 페이지를 생성하는 방식입니다. 여기에서는 JS가 화면을 만드는 데 있어서 차지하는 역할이 훨씬 적으므로 FP 와 FCP가 매우 빠르지만, TTFB에서는 서버에서 데이터가 도착하는 데 걸리는 시간이 더 깁니다 .
• CSR(클라이언트 사이드 렌더링): Angular, React, Vue, Svelte 등의 메소드를 사용하여 브라우저 측에서 렌더링을 수행하고, 동적 페이지는 AJAX로 가져오고, 템플릿 렌더링 방법으로 템플릿 + 데이터를 결합하여 화면에 화면을 만드는 방식입니다. 이 방법에서는 TTFB와 FP를 더 빠르게 수행하더라도 TTI, 즉 사용자가 해당 웹 페이지와 상호작용하는 데 걸리는 시간을 단축할 수 없습니다 .
• 정적 렌더링: 정적 페이지에 사용되는 이 방법은 페이지가 거의 변경되지 않고 데이터베이스가 필요 없기 때문에 서버로 전송하기 전에 사전 렌더링 방법을 통해 페이지를 최종 상태로 가져오고 CDN 또는 에지 캐싱 환경으로 전송하여 매우 빠르게 제공합니다. 최근에는 Gatsby와 Jekyll 도구를 사용하여 이러한 유형의 페이지를 훨씬 쉽게 제작할 수 있게 되었습니다. 이 페이지에서는 TTFB 와 TTI 시간이 모두 매우 짧습니다. 이러한 페이지의 JS 실행이나 상호작용 요구는 매우 낮고 제한적입니다.
• 하이브리드 렌더링: 콘텐츠 부하에 따라 일부 페이지에 SSR을 생성하는 것이 합리적인 반면, 부하가 높은 일부 페이지에는 지연 CSR을 생성하는 것이 합리적입니다. 이러한 상황을 지원하는 Next, Nuxt, Nest, Sapper와 같은 프레임워크가 등장했습니다. 이 프레임워크는 코드 개발에서 Next – React, Nuxt – Vue, Nest – Angular, Sapper – Svelte 구성 요소 개발 방법을 채택하면서도 유사한 기능을 제공합니다.

참고문헌

• 웹에서 렌더링
• 정적 웹 페이지와 동적 웹 페이지의 차이점
• HTML 렌더링은 어디에서 이루어져야 합니까?

이 링크를 클릭하면 이 기사의 계속본이나 기사 그룹의 다른 기사를 볼 수 있습니다 .