Microsoft FINALLY Improved Global Interactive Render Modes in Blazor with .NET 9 🔥

간단 요약

이 비디오에서는 .NET 9의 새로운 기능인 글로벌 상호 작용이 가능한 Blazer 웹 앱에 정적 서버 측 렌더링(SSR) 페이지를 추가하는 방법을 설명합니다. 이를 통해 개발자는 전체 애플리케이션을 대화형으로 렌더링하는 대신 특정 페이지를 정적으로 렌더링하여 성능을 최적화하고 사용자 경험을 향상시킬 수 있습니다.

.NET 9의 Blazer 웹 앱에서 SSR 페이지를 추가하는 방법
전역 렌더링 모드와 페이지별 렌더링 모드의 차이점
스트림 렌더링을 사용하여 사용자 경험을 개선하는 방법

소개 및 Blazer 렌더링 모드

Net Web Academy의 Patrick은 .NET 9에서 Blazer 웹 앱에 정적 서버 측 렌더링(SSR) 페이지를 추가하는 새로운 기능을 소개합니다. Blazer 서버, 웹 어셈블리, 자동 렌더링 모드 외에도 SSR은 서버에서 HTML을 정적으로 렌더링하여 클라이언트로 전송하는 방식입니다. 상호 작용이 필요한 경우 Blazer는 이를 처리할 수 있습니다.

새 프로젝트 생성 및 렌더링 모드 설정

Visual Studio를 사용하여 새 Blazer 웹 앱 프로젝트를 만들고, .NET 9 프레임워크를 선택합니다. 렌더링 모드를 대화형 서버, 웹 어셈블리 또는 자동으로 설정할 수 있으며, 이를 전역적으로 또는 페이지/구성 요소별로 구성할 수 있습니다. Visual Studio Preview Edition에서 .NET Preview를 사용하여 전역 렌더링 모드를 설정합니다.

라우트 구성 요소 및 렌더링 모드 설정

라우트 구성 요소를 사용하여 특정 페이지 또는 구성 요소에 대한 렌더링 모드를 설정할 수 있습니다. 예를 들어, 홈페이지에 카운터 구성 요소를 추가하고 해당 구성 요소에 대한 렌더링 모드를 설정할 수 있습니다. AB Razer에서 라우트 구성 요소를 사용하여 서버 렌더링 모드를 대화형으로 설정할 수 있습니다.

전역 렌더링 모드 및 SSR

전역 렌더링 모드가 필요한 경우에도 특정 페이지를 서버에서 정적으로 렌더링할 수 있습니다. 예를 들어, 날씨 페이지는 데이터를 가져오는 동안에만 상호 작용이 필요하므로 SSR 모드를 사용할 수 있습니다. 스트림 렌더링을 사용하면 사용자가 결과를 기다릴 필요 없이 페이지를 빠르게 로드할 수 있습니다.

Net 9에서의 변경 및 코드 수정

Net 9에서는 특정 페이지를 정적으로 렌더링하고 다른 페이지는 대화형으로 렌더링할 수 있습니다. 이를 위해 AB Razer에서 코드를 수정해야 합니다. Visual Studio에서 Razer 앱에 코드 블록을 추가하여 페이지 렌더링 모드를 설정하고 경로와 헤드 콘센트에 적용합니다.

스트림 렌더링 및 사용자 경험 개선

스트림 렌더링을 사용하면 페이지를 빠르게 로드하고 데이터를 나중에 제공하여 사용자 경험을 개선할 수 있습니다. 동기식 로딩 시나리오를 시뮬레이션하기 위해 500밀리초의 지연을 추가합니다. 날씨 페이지를 클릭하면 즉시 로드되지만 데이터는 나중에 표시됩니다.

웹 소켓 연결 및 SSR의 장단점

Blazer 서버를 전역적으로 사용하면 웹 소켓 연결이 열립니다. 그러나 SSR을 사용하면 웹 소켓 연결이 필요하지 않지만 전체 페이지를 다시 로드해야 합니다. 이는 Blazer에서 일반적으로 피하고 싶은 상황이지만, 특정 경우에는 SSR이 더 나은 사용자 경험을 제공할 수 있습니다.