Как React.js полезен для SEO (React на стороне сервера с ASP.NET)
Проблема с Javascript рамки в том, что они НЕ идеальны дружественный поисковик , Хотя гугл может сканировать и индексировать Ajax контент, но он не такой надежный и должен следовать рекомендациям. Преимущество React.js заключается в том, что вы можете запустить его на сервере, и виртуальный DOM будет отображаться и возвращаться в браузер как обычная веб-страница. В этом посте мы реализуем образец в ASP.NET чтобы предварительно визуализировать начальное состояние ваших компонентов React на стороне сервера, а в результате уже отображается страница разметки. Так что он будет проиндексирован так же, как любая другая статическая страница поисковой системой.
Если вы новичок в React.js Я настоятельно рекомендую прочитать следующий урок:
React.js: Введение и Hello World с ASP.NET MVC 5
Начиная:
Версии программного обеспечения, используемые в руководстве:
Visual Studio 2012
ASP.NET MVC 5.0
React.js 0.12.2
ReactJS.NET 1.3
Настройте проект:
1. Откройте Visual Studio> Файл> Новый проект> ASP.NET MVC 5 Пустой проект, назовите его « ReactSEO »> ОК
2. Установите React.js, выполнив следующую команду в консоли диспетчера пакетов.
Install-Package response.js
Это добавит реагирующие файлы JavaScript в папку Scripts .
3. Аналогичным образом установите ReactJS.NET:
Инсталляционный пакет React.Web.Mvc4
Это добавит ссылки на реагирующие библиотеки в проекте.
контроллер:
4. Добавьте «MVC5 Пустой контроллер» (HomeController.cs), замените содержимое метода Index следующим и добавьте View.
public ActionResult Index () {var employee = new [] {new {id = "1", name = "John", отдел = "IT", phone = "555-1212"}, new {id = "2", name = "Akash", отдел = "Продажи", телефон = "555-1213"}, новый {id = "3", name = "Suman", отдел = "HR", телефон = "123-456"}} ; обратный просмотр (сотрудники); }Для демонстрации я взял анонимный объект данных для отображения.
Компонент сетки:
5. Добавьте файл javascript « Grid.jsx » в папку «Сценарии» и добавьте следующее содержимое:
var Cell = React.createClass ({render: function () {var data = this.props.data; return <div className = "cell"> {this.props.data} </ div>}}); var Row = React.createClass ({render: function () {return (<div className = "row"> <Cell data = {this.props.data.name} /> <Cell data = {this.props.data. отдел} /> <Данные ячейки = {this.props.data.phone} /> </ div>);}}); var Grid = React.createClass ({render: function () {var headerRow = <div className = "row"> <Cell data = "Name" /> <Cell data = "Department" /> <Cell data = "Phone" /> </ div>; var row = this.props.data.map (function (rowData, index) {return <ключ строки = {index} data = {rowData}> Row </ Row>;}); return < div className = "table"> {headerRow} {row} </ div>;}});Это простой компонент для отображения данных в табличной форме.
Рендеринг на стороне сервера:
6. Откройте App_Start \ ReactConfig.cs для ссылки на компоненты Grid:
открытый статический класс ReactConfig {открытый статический void Configure () {ReactSiteConfiguration.Configuration = new ReactSiteConfiguration () .AddScript ("~ / Scripts / Grid.jsx"); }}Это говорит ReactJS.NET загружать все соответствующие файлы JavaScript на стороне сервера. Файлы JavaScript всех компонентов, которые вы хотите загрузить, и все их зависимости должны быть включены сюда.
7. Откройте индексное представление и вызовите Html.React для визуализации компонента на стороне сервера.
@ Html.React ("Сетка", новая {data = Model})Вызовите Html.ReactInitJavaScript внизу, чтобы отобразить сценарии инициализации.
@ Html.ReactInitJavaScript ()Примечание: это не загружает файлы JavaScript для ваших компонентов, а только отображает код инициализации.
Полный код просмотра следующий
<h2> React Demo: </ h2> @ Html.React ("Сетка", новая {data = Model}) <script src = "~ / Scripts / реагировать / реагировать-0.12.2.min.js"> </ script> <script src = "~ / Scripts / Grid.jsx"> </ script> @ Html.ReactInitJavaScript ()Запустив страницу, вы получите следующий вывод
Серверный HTML-код будет автоматически повторно использоваться клиентской стороной React, и его можно будет легко отыскать в поисковых системах.
Заключение:
Мы реализовали рендеринг React.js на стороне сервера, который ускоряет начальную загрузку страниц, поскольку пользователям не нужно ждать загрузки всего JavaScript, прежде чем просматривать веб-страницу, и это SEO дружественный также.
наслаждаться React.js !!