소개

일반적으로 Blazor WebAssembly의 인터넷 검색 결과는 좋지 않습니다.
많은 경우, 결과는 단지 "로드..."일 뿐이다.

다행히도 우리는 서버 측의 사전 렌더링을 통해 이런 상황을 피할 수 있다.

Aside: I heard in some rumors that the Google search crawler process WebAssembly process such as a Blazor WebAssembly app. But I don't have any information sources, any evidence.

사전 요구 사항에 따라 ASP를 실행해야 합니다.NET는 Blazor 응용 프로그램의 숙주 모델이 WebAssembly일지라도 서버 측에서 미리 렌더링하는 핵심 과정을 실현한다.
그러나 이 제한에 문제가 없다면 서버 측의 사전 렌더링을 쉽게 실현할 수 있다.
네가 해야 할 일은 단지 아래의 절차를 따를 뿐이다.

미리 렌더링할 Razor 페이지(.cshtml 파일) 만들기

후퇴 페이지로 Razor 페이지 지정

ASP의 특수 태그인 <component .../> 태그를 작성합니다.NET Core Tag 보조 객체RenderMode="Static" 속성이 지정됩니다.

예, 코드가 서버 쪽에서 미리 렌더링되는 동안 서버 프로세스에서 실행되기 때문에 실현 문제를 고려해야 할 수도 있습니다.
그러나 어쨌든 서버 측의 사전 렌더링의 기본적인 실현은 위에서 말한 바와 같이 매우 간단하다.

정적 컨텐츠 관리 환경

그러나 ASP를 사용할 수 없는 경우Blazor WebAssmebly 응용 프로그램과 같은 NET 핵심 서버 프로세스를 GitHub 페이지에 배치하려면 어떻게 해야 합니까?
다행히도 우리는 사전 렌더링을 할 기회가 한 번 더 있다.
발표 과정 후, 우리는 미리 보여준 HTML 세션 index.html 을 주입할 수 있으며, 이 세션은 발표 후 처리로 발표할 수 있다.
Blazor 구성 요소의 미리 렌더링된 HTML 문자열을 가져오는 방법을 생각해 냈습니다.
그 중 하나는 ASP를 시작하는 것이다.NET 코어 호스트는 프리젠테이션에 임시로 사용되며 HTTP GET 요청을 전송하여 프리젠테이션된 HTML 내용을 가져옵니다.
나는 지금까지 이런 방법을 시도해 본 적이 없지만, 나는 그것이 매우 잘 일할 것이라고 생각한다.
그러나 이런 방법은 실현하기 어려울 수도 있고 ASP와 같은 몇 가지 문제를 고려해야 할 수도 있다.NET Core 호스트.
한편, 내가 주목하는 것은 <component .../> ASP이다.NET Core 태그 도우미.
나는 <component .../> ASP의 출력에서 미리 렌더링된 HTML 문자열을 얻을 수 있을 것이라고 추측한다.NET Core Tag Assistance 는 전체 ASP를 시작하는 것보다 더 효과적일 수 있습니다.NET Core 호스트.
그래서 한번 해봤어요. 그리고...성공했어!

<component.../>를 통해 Blazor 구성 요소를 HTML 문자열로 표시ASP。NET Core 태그 지원

<component .../>ASP.NET Core 태그 도우미는 ComponentTagHelper 클래스로 Microsoft.AspNetCore.Mvc.TagHelpers 이름 공간에 있습니다.ComponentTagHelper 클래스를 사용하여 Blazor 구성 요소를 HTML 문자열로 표시하려면 ComponentTagHelper 의존하는 대상을 설정해야 합니다.
이러한 종속 객체의 클래스/인터페이스 목록은 다음과 같습니다.

서비스 수집

IServiceProvider(Logger 및 Razor Pages 서비스 추가)

IServiceScope

FeatureCollection

IHttpRequestFeature

HttpResponseFeature

기본 HTTPContextFactory

HttpContext

TagHelperAttributeList

TagHelperContext

TagHelperOutput

DefaultTagHelperContent

이 대상의 코드를 약 35줄로 설정합니다.
상술한 의존 대상의 인코딩을 설정하는 것은 그리 어렵지 않다.
기록되지 않은 API를 사용할 필요가 없으며 반사 기술과 같은 심도 있는 해킹도 필요하지 않습니다.
이러한 대상(HttpContext, TagHelperContext, TagHelperOutput 등)을 설정한 후에 나는 다음과 같은 코드와 같이 ComponentTagHelper 클래스의 실례를 만들 수 있다.

var componentTagHelper = new ComponentTagHelper
{
    // 👇 Specify the Blazor component class to render to HTML strings here.
    ComponentType = typeof(App),
    RenderMode = RenderMode.Static,
    ViewContext = new ViewContext { HttpContext = httpContext }
};

ComponentTagHelper 대상을 만든 후 ProcessAsync() 방법을 호출합니다.

await componentTagHelper.ProcessAsync(tagHelperContext, tagHelperOutput);

ProcessAsync() 방법을 호출한 후 TagHelperOutput 방법의 매개 변수 중 하나로 전달된 ProcessAsync() 대상은 Blazor 구성 요소를 HTML 세션으로 표현한 결과를 포함한다.
마지막으로, 나는 TagHelperOutput 대상에서 HTML 문자열을 얻을 수 있다.

var content = tagHelperOutput.Content;
var stringWriter = new StringWriter();
content.WriteTo(stringWriter, HtmlEncoder.Default);

// 👇 This is the result of rendering the Blazor component to HTML strings.
var html = stringWriter.ToString();

이를 통해 미리 렌더링된 내용을 발표 후 처리로 주입할 수 있습니다index.html!

결론

"최풍의 서류 가방 사이트"Blazor Web Assembly 응용 프로그램의 원본 코드에서 본고의 모든 실현을 볼 수 있습니다. 이 응용 프로그램은 GitHub 페이지 숙주에 배치됩니다.
소스 코드는 GitHub 저장소에 있습니다.

https://github.com/jsakamoto/jsakamoto.github.io

본고에서 설명한 방식은 Blazor 구성 요소 외부에서 미리 렌더링할 수 없습니다. 예를 들어 <title> 및 <meta name="ogp:..."...> 입니다.
만약 당신이 이 요소들을 미리 과장해야 한다면, 그렇습니다. 당신은 이렇게 할 수 있지만, 더 많은 추가 실현이 필요하거나, 다른 기술을 선택해야 할 수도 있습니다.
어쨌든 우리는 이 기술을 사용하여 GitHub 페이지에서 위탁 관리하는 Blazor WebAssembly 응용 프로그램의 인터넷 검색 결과를 개선할 수 있습니다!

즐거운 코드!:)