Vue.js-рендеринг на стороне сервера с помощью Asp.Net Core

Рендеринг на стороне сервера (SSR) гарантирует лучший уровень SEO, чем рендеринг на стороне клиента. Есть несколько инструментов, которые позволяют запускать Vue.js на сервере, например, Nuxt.js, что позволяет нам отображать часть содержимого наших компонентов на стороне сервера.

В большинстве случаев это хорошее решение, но в нашем случае оно не сработало. Мы хотели отображать и обслуживать компоненты в Vue.js, используя MVC, созданный с помощью Asp.Net Core. Мы собираемся показать вам, как вы можете визуализировать отдельные файловые компоненты с помощью экосистемы .Net Core.

Мы использовали следующие инструменты:

MVC в Asp.Net Core 2.1

Пакет Nuget Microsoft.AspNetCore.NodeServices (последняя версия)

Как запустить:

NodeServices позволяет нам запускать узел в асинхронной форме, а также вводить его.

Здесь мы можем увидеть, что делает dotnetAdapter.js

Единственное, что мы добавляем, это ссылка на RenderEngine, где у нас есть вся логика запуска функции рендеринга. Таким образом мы можем отделить .NET от nodeServices.

RenderEngine берет на себя ответственность за возврат последней строки, импортирующей наш пакет, которую мы получаем в момент запуска webpack и вызова vue-server-renderer. Эта библиотека позволяет нам отображать строку, которая нам нужна.

Webpack и наши компоненты в Vue.js

Пакет - это сумма наших компонентов + инициализатор (entry-server.js):

App.vue

Здесь у нас есть простой компонент, который одновременно импортирует другой компонент.

HelloWorld.vue

И для завершения шаблона страницы:

Следуя рекомендациям, которые дает нам ssr.vuejs.org, мы оставляем комментарий vue-ssr-Out в теле, который позже будет заменен нашим кодом.