copal
@copal
𝄞 ...оооо baby

Как создать изоморфное приложение — индексируемое поисковыми роботами spa?

Самым первым пунктом я очень прошу читающих подумать подумать прежде чем пройти мимо.
Если набрать в гугле, то появится тысячу статей о индексируемых изоморфных spa приложениях и каждый из Вас хоть раз да читал об этом статью. И наверняка, каждый из Вас задумывался над тем, как у строен процесс и как Вы однажды сделаете такое приложение. Вот и я повелся на все эти рассказы и сейчас сижу с открытой ide и минимальным приложением из нескольких страниц, которое может собраться и на сервере и на клиенте.
И теперь я прошу Вас ответить - что мне нужно делать, чтобы они было и spa и имело обычные не якорные ссылки и индексировалось поисковиками? Я не знаю что делать. Я возвращался к статьям и оказывается, что там либо написаны оды, либо опять лишь оды. Там из реальной жизни нет ничего.
  • Вопрос задан
  • 2974 просмотра
Решения вопроса 3
Laiff
@Laiff
Front-end developer
Например вот каркас для такого приложения, для ссылок используется historyApi

https://github.com/erikras/react-redux-universal-h...
Ответ написан
Комментировать
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
Вот и я повелся на все эти рассказы и сейчас сижу с открытой ide и минимальным приложением из нескольких страниц, которое может собраться и на сервере и на клиенте.


ну так в чем проблема?

что мне нужно делать, чтобы они было и spa и имело обычные не якорные ссылки и индексировалось поисковиками?


оно и там и там SPA, изоморфность же, структура и принципы работы с большего одинаковые что на сервере что на клиенте.

- что бы избавить от "не якорные" ссылки надо включить html5mode у $locationProvider
- что бы страничка отрендрилась на сервере надо что бы на сервере была настроена маршрутизация (например у меня nginx пробрасывает запросы к node.js и там уже творится магия)
- что бы оно все индексировалось поисковиками - отключаем JS и смотрим что именно будут видеть поисковики.

К сожалению с angular 1.x "изоморфность" построить весьма сложно так как приложение завязано на DOM. А это значит что на серваке надо поднять phantomjs и через него генерить странички.
Ответ написан
@zagamay_ru
Я пробую писать приложение на AngularJs и Yii2, роутеры должны быть идентичными что на сервере, что на клиенте.

ангулар хавает template .php без проблем, поэтому можно сделать public папку с шаблонами.
На сервере я проверяю только одну переменную

function renderView( $view ) {
		if ( strstr($_SERVER['HTTP_ACCEPT'], 'application/json') ) {
            echo json_encode( $this->Datas );
            Jbase::end();
        } else {
        	return $this->lang->getTemplate( $this->render('../../../public/frontend/app/template/' . $view, [
                'datas' => $this->Datas
            ]));
        }
	}


В общем-то и всё. Шаблоны получаются общие, конечно писать в шаблоне придётся так:

<h1 class="page-header" ng-bind="datas.meta.title | t:Phrase"><ml:ru><?= $datas['meta']['title'] ?></ml></h1>


На клиенте - ng-bind="datas.meta.title | t:Phrase"
На сервере - <?= $datas['meta']['title'] ?>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
virtyaluk
@virtyaluk
Ответ написан
Комментировать
kirill89
@kirill89
Это же очень сильно зависит от фреймворка, который вы используете. У нас изоморфное приложение написано таким образом, что запросы по HTTP рендерятся на сервере, а по RPC на клиенте. Все шаблоны есть и там и там. Если будуте разбираться в рамках конкретного фреймворка и напишите свою статью, с удовольствием почитаю.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы