Blazor Render Modes EXPLAINED 🔥 Which One Should You Use in .NET 9 - SSR, Server, WebAssembly, Auto?

간략한 요약

이 비디오는 Blazor 렌더링 모드에 대해 설명하고, 각 모드의 특징과 사용 시점을 분석합니다. 주요 내용은 다음과 같습니다.

Blazor SSR (정적 서버 측 렌더링): 웹 소켓이나 웹 어셈블리 없이 서버에서 모든 것을 렌더링하여 HTML을 클라이언트로 전송합니다. SEO에 유리하지만, 동적 데이터 로딩 시 스트림 렌더링을 통해 초기 로딩 속도를 개선할 수 있습니다.
Blazor Server: 웹 소켓을 사용하여 서버와 클라이언트 간의 실시간 통신을 지원합니다. 대화형 UI에 적합하지만, 항상 온라인 연결이 필요합니다.
Blazor WebAssembly: 웹 어셈블리에서 실행되는 Blazor 앱을 만듭니다. 초기 로딩 시간이 길지만, 서버 부하를 줄이고 오프라인에서도 작동할 수 있습니다.
Auto Render Mode: 초기에는 서버에서 렌더링하고, 이후에는 웹 어셈블리로 전환하여 두 가지 모드의 장점을 결합합니다.

각 렌더링 모드는 특정 시나리오에 따라 유연하게 선택하여 사용할 수 있으며, 구성 요소별로 렌더링 모드를 설정할 수도 있습니다.

Blazor SSR (정적 서버 측 렌더링) with Streamed Rendering

Visual Studio 2022에서 Blazor 웹 앱을 만들 때, 렌더링 모드를 선택할 수 있습니다. None을 선택하면 정적 서버 측 렌더링 모드가 됩니다. 이 모드는 웹 소켓이나 웹 어셈블리를 사용하지 않고, 서버가 모든 것을 렌더링한 후 완성된 HTML을 클라이언트로 보냅니다. Razor 구성 요소 등록에 필요한 서비스가 추가되며, 페이지 구성 요소가 지정된 어셈블리에 매핑되어 경로가 일치할 때 해당 구성 요소를 렌더링합니다. Net 8 이전에는 전역적으로 렌더링 모드를 설정해야 했지만, 이제는 각 구성 요소별로 렌더링 모드를 설정할 수 있습니다. 정적 서버 측 렌더링은 스트림 렌더링과 결합하여 사용할 수 있습니다. 스트림 렌더링은 데이터가 필요한 시점에 데이터를 가져와 페이지에 스트리밍하는 방식으로, 초기 로딩 속도를 개선할 수 있습니다. 스트림 렌더링을 사용하지 않으면 전체 데이터가 로드될 때까지 사용자가 기다려야 합니다. 정적 서버 측 렌더링은 빠르면서도 동적 데이터를 사용할 수 있는 옵션을 제공하므로 블로그 등에 유용합니다.

Blazor Server

Blazor Server는 웹 소켓을 사용하여 서버와 클라이언트 간의 실시간 통신을 지원합니다. 이를 사용하려면 먼저 Program.cs 파일에 대화형 서버 구성 요소를 추가해야 합니다. 템플릿으로 시작하여 서버 렌더링 모드를 사용하려면 이 과정이 필요합니다. 날씨 페이지에서 스트림 렌더링을 제거하고, 렌더링 모드를 대화형 서버로 설정하면 웹 소켓 연결이 생성됩니다. 이 연결은 각 구성 요소에 대해 작동하며, 웹 소켓을 사용하려는 각 구성 요소에 대해 실제로 작동합니다. 항상 온라인 연결이 필요한 채팅이나 AI 챗봇 등에 유용합니다. 페이지가 완성되었지만 특정 구성 요소에 대해서만 렌더링 모드를 다시 사용할 수 있습니다. 공유 폴더에 다른 Razor 구성 요소를 추가하여 특정 구성 요소에 대해서만 렌더링 모드를 설정할 수 있습니다. 예를 들어, 버튼 구성 요소에 대화형 서버 렌더링 모드를 설정하면 해당 버튼을 클릭할 때만 웹 소켓 연결이 열립니다.

Blazor WebAssembly

Blazor WebAssembly는 웹 어셈블리에서 실행되는 Blazor 앱을 만듭니다. 나중에 추가하려면 추가 클라이언트 프로젝트를 추가해야 합니다. Blazer 웹 어셈블리 독립 실행형 앱은 웹 어셈블리에서 실행되는 Blazer 앱을 만드는 프로젝트 템플릿입니다. 이 템플릿은 풍부한 동적 사용자 인터페이스가 있는 웹 앱에 사용할 수 있습니다. 클라이언트 프로젝트를 추가한 후, 서버 프로젝트에 클라이언트 프로젝트에 대한 프로젝트 참조를 추가해야 합니다. 또한, 웹 어셈블리 서버 패키지도 필요합니다. Program.cs 파일에서 HTTP 클라이언트가 필요하지 않지만, 웹 서비스 호출을 하려면 HTTP 클라이언트가 필요합니다. Blazer 서버 프로젝트는 웹 API이고, 웹 어셈블리 클라이언트 프로젝트가 프런트 엔드입니다. Blazer 웹 어셈블리를 사용하려면 버튼을 클라이언트 프로젝트로 이동해야 합니다. 홈페이지에서 대화형 웹 어셈블리를 사용하려면 Program.cs 파일에 대화형 웹 어셈블리 구성 요소를 추가해야 합니다. 또한, 추가 어셈블리를 추가해야 합니다.

Auto Render Mode

Auto Render Mode는 초기에는 서버에서 렌더링하고, 이후에는 웹 어셈블리로 전환하여 두 가지 모드의 장점을 결합합니다. Program.cs에서 아무것도 구성할 필요가 없습니다. 애플리케이션을 다시 시작하면 웹 소켓 연결이 열려 있지만, 동시에 백그라운드에서 웹 어셈블리 파일을 다운로드합니다. 날씨 페이지로 이동하면 여전히 웹 소켓 연결이 있지만, 홈으로 돌아가서 페이지를 다시 로드하면 웹 소켓 연결이 사라지고 웹 어셈블리만 남습니다. 이제 버튼이 웹 어셈블리로 실행되고 모든 것이 예상대로 작동합니다. 모든 렌더링 모드의 요약이지만, 모든 렌더링 모드의 매우 중요한 함정이 하나 있습니다.