ASP를 사용한 서버 측 렌더링 Vue.NET Core 2

ASP를 사용한 서버 측 렌더링 Vue.NET Core 2

aspnet core를 사용할 때 vuej를 사용한 서버 측 렌더링의 사용 방법과 제한 사항을 이해하려고 합니다.

이 스타터 키트를 aspnet core 및 vuej에 사용하여 간단한 vue 사이트를 셋업했습니다.이 사이트는 다음 코드를 기반으로 실행됩니다.https://github.com/selaromdotnet/aspnet-vue-ssr-test/tree/master

그런 다음 프로젝트를 수정하여 aspnet 프리렌더를 업데이트하고 vue-server-renderer를 추가했습니다.이 업데이트를 정리하기 위한 소스들의 잡지를 컴파일했습니다.https://github.com/selaromdotnet/aspnet-vue-ssr-test/tree/ssr

이 프로젝트를 실행하면 사이트가 정상적으로 로드되고 브라우저에서 javascript를 끄면 서버 측 렌더링이 실행되어 html 결과를 채운 것으로 나타납니다.

그러나 JavaScript가 비활성화되어 있기 때문에 콘텐츠는 돔으로 이동되지 않습니다.

서버 사이드 렌더링은 HTML 전체를 채우고 완성된 페이지를 사용자에게 제공할 수 있기 때문에 JS가 비활성화되어 있더라도 적어도 페이지를 볼 수 있습니다(특히 SEO용).내가 틀렸나요?

현재 최신 검색 엔진은 콘텐츠를 얻기 위해 이와 같은 간단한 스크립트를 실행할 것이라고 생각합니다만, js가 비활성화되어 있는 경우에도 빈 페이지를 렌더링하고 싶지 않습니다.

이것이 서버측 렌더링의 제한입니까, 아니면 vue 및/또는 aspnet core를 사용하는 sr의 제한입니까?

아니면 제가 어딘가에서 한 발짝이라도 헛디딘 걸까요?

편집: 상세

이 섹션의 프레렌더링 방법이라고 생각되는 소스 코드를 https://github.com/aspnet/JavaScriptServices/blob/dev/src/Microsoft.AspNetCore.SpaServices/Prerendering/PrerenderTagHelper.cs에서 확인했습니다.

회선

output.Content.SetHtmlContent(result.Html); 

결과값이 null입니다.Html. 단, 테스트 값을 입력하기 위해 이 값을 수동으로 편집해도 출력 html로 렌더링되지 않고 앱 div 태그가 아직 비어 있습니다.

만약 내가 결과를 반영하기 위해 뭔가 잘못된 일을 하고 있다면.Html value와 예상되는 출력은 그것뿐입니다.특히 출력 html은 바로 다음 스크립트에 있기 때문에 그 처리에 도움이 됩니다.

단, 값을 수동으로 변경해도 생략되는 것처럼 보입니다.이게 코드의 버그인가요, 아니면 제가 잘못하고 있는 건가요, 아니면 둘 다일까요?

정확히 알아차리셨듯이, 프로젝트를 위해result.Html태그 도우미 내부는 늘입니다.따라서 이 라인은 출력이 생성되는 장소가 될 수 없습니다.프리렌더링 스크립트의 HTML 출력에는,script태그, 뭔가가 그것을 생성해야 한다는 것은 확실합니다.이를 실행할 수 있는 다른 행은 에서 다음 행뿐입니다.

output.PostElement.SetHtmlContent($"<script>{globalsScript}</script>");

관측된 출력과 일치합니다. 그래서 우리는 그 정보가 어디에 있는지 알아내야 합니다.globalsScript출신이다.

실장을 보면, 이 실장이 콜 하는 것을 알 수 있습니다.Prerenderer.RenderToString그러면 가 반환됩니다.이 결과 개체는 노드 스크립트를 호출한 후 JSON에서 역직렬화됩니다.

여기에는 다음 두 가지 속성이 있습니다.Html,그리고.Globals전자는 태그 도우미 내에 최종적으로 렌더링되는 HTML 출력을 저장하는 역할을 합니다.후자는 클라이언트 측에 설정할 필요가 있는 추가 글로벌 변수를 포함하는 JSON 개체입니다.이것들은 그 안에 그려질 것이다.script태그를 붙입니다.

프로젝트에서 렌더링된 HTML을 보면 두 개의 글로벌이 있음을 알 수 있습니다.window.html그리고.window.__INITIAL_STATE__이 두 가지는 코드 어딘가에 설정되어 있습니다만,html글로벌해서는 안 됩니다.

범인은 바로renderOnServer.js파일:

vue_renderer.renderToString(context, (err, _html) => {
    if (err) { reject(err.message) }
    resolve({
        globals: {
            html: _html,
            __INITIAL_STATE__: context.state
        }
    })
})

보시는 바와 같이, 이 작업은 다음 항목을 포함하는 결과를 해결합니다.globals양쪽에 반대하다html그리고.__INITIAL_STATE__특성.그게 바로 그 안에 그려지는 거야script태그를 붙입니다.

하지만 대신 하고 싶은 건html일부로서가 아니다globals위의 레이어에서는 디시리얼라이즈 됩니다.RenderToStringResult.Html속성:

resolve({
    html: _html,
    globals: {
        __INITIAL_STATE__: context.state
    }
})

이렇게 하면 초기 보기에 JavaScript가 필요 없이 프로젝트가 서버 측 렌더링을 적절하게 수행합니다.

언급URL : https://stackoverflow.com/questions/50746185/server-side-rendering-vue-with-asp-net-core-2