Какой фронтенд выбрать в пару к бэку на laravel, чтобы был как SPA, но с SEO индексацией?

Есть несложный сайт-статейник, с магазином и корзиной. Клиент хочет, чтобы страницы открывались максимально быстро без перезагрузок. Т.е. SPA. Однако ему очень важно SEO. Поэтому смотрим в сторону SSR. Однако насколько я вижу, если прикрутить к inertia (работаем через нее) SSR-свистоперделки, то появляется необходимость в установленном node.js на сервере. Однако в нашем случае это простой хостинг и клиент переходить на VPS не хочет, потому что этот хостинг у него проплачен на годы вперед и вообще хочет остаться у них. Есть какой-то выход из этого?

Думаю в сторону livewire. Мне лично эта технология не нравится, потому что мешает фронт с бэком в одних файлах, потом черт ногу сломит. Но может это выход? Как у него с SEO? Насколько я читаю из водяных статей (а они все плюс-минус одинаковые) пишут, что после blade вообще мол разницы не почуешь, все там точно так же и мол логика работы такая же, только ajax запросы по каждому пуку появляются.

Кто что посоветует? Бэк полностью написан на ларе, фронт пока на старинном jquery с тучей виджетов-плагинов. В общем, чтобы в идеале работало как SPA, при этом отдавало сгенеренный html или типа того (для SEO) и при этом работало на обычном хостинге (не vps).

Мне пришла в голову даже супер костыльная идея, но которая бы сильно облегчила весь процесс. Что если не ставить никакие инерции, а пойти таким путем: навесить на все ссылки на сайте js обработчики, которые будут запрашивать у бэка данные для конкретной страницы, к которой обращаются. На бэке возвращать отрендеренный шаблон и вставлять его на клиентской части вместо текущего. Получится тоже самое SPA со статичными шапкой, футером и сайдбаром, но с динамическим контентом. При этом если поисковик или браузер не поддерживают js - для них сайт будет работать как и прежде. В теории, таким образом получится реализовать задачу за пару дней, заказчик получит то, что хочет, SEO не пострадает. Никакой хостинг с node.js не нужен. Одни плюсы, за исключением костыльности способа. Может делал кто-то так и знает какую-то проблему?

Дополнительно:

Livewire https://livewire.laravel.com/

Как у него с SEO?

Отлично. Как в обычном html

только ajax запросы по каждому пуку появляются

При первой загрузке страницы она отдается в чистом html. Аякс запрос будут уже потом идти. Так что поисковик всегда будет получать чистый html.

На бэке возвращать отрендеренный шаблон и вставлять его на клиентской части вместо текущего.

Получится тот же самый Livewire, только хуже.

  • Думаю в сторону livewire. Мне лично эта технология не нравится, потому что мешает фронт с бэком в одних файлах, потом черт ногу сломит.

    Почему в одном файле? Есть файл компонента (бек) и есть шаблон (фронт). Если опыта мало, то можно конечно намешать что угодно, но это не проблема технологии.

  • YepBro, Благодарю. Вы мне и в прошлом вопросе отвечали. Скажите главное, потому что этот вопрос опять будет во главе угла. Мне нужно будет разделить шаблон на компоненты (хедер, футер, сайдбар, контент). Динамичной должна быть только контентная часть. Остальное все одинаковое на всех страницах, поэтому должно быть статично (загружаться при заходе на сайт, и далее оставаться без изменений (без доп запросов) весь оставшийся период, пока юзер не покинет сайт). Но в этих статичных компонентах есть куча инфы из бэка, начиная с меню, заканчивая различными списками категорий, юзеров и прочего. Получится их загружать лишь один раз, и больше не запрашивать? Иначе теряется весь смысл SPA.

    В теории то я могу сам костыльно это все обыграть. Не знаю, в локалсторейдж сохранять или в куки или даже где-нибудь в хедер зашивать. С постоянными проверками при заходе на каждую страницу. Если есть сохраненное - отлично, если нет - запросить. Но меня интересует именно поддержка такого из коробки, чтобы я свои костыли не городил.

  • есть хостинги с поддержкой ноды, так к сведению
  • lolrofl01

    Но в этих статичных компонентах есть куча инфы из бэка, начиная с меню, заканчивая различными списками категорий, юзеров и прочего.

    Нет, переход между страницами будет через подгрузку полного html. Но он будет грузиться через ajax и заменяться незаметно для пользователя.

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

    1) если страница открывается не по клику на ссылку, то надо грузить полный хтмл... то есть у тебя на одну страницу будет два контроллера (один отдает только контентную часть, а второй полную страницу с мастер-шаблоном)... ну или одни контроллер с условиями

    2) Надо менять метатеги и тайтлы страницы при загрузке только блока контента

    3) Часто надо отображать активный пункт меню.

    4) Тебе очень повезет если все остальные блоки одинаковые, но как только надо будет в шапку/футер/сайдбар добавить уникальный блок для определенной страницы сразу начнуться танцы с бубнами.

    Иначе теряется весь смысл SPA.

    В этом не весь смысл spa. Он был придуман что бы пользователю предоставить более удобный интерфейсы, увеличить скорость отклика и работы со страницей. То что какие-то блоки остаются статичными при переходе между страницы следствие.

Ответы:

HTMX, Hotwire Turbo примерно тоже самое.

 

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

 

    • Какой фронтенд выбрать в пару к бэку на laravel, чтобы был как SPA, но с SEO индексацией?Есть ответ
    • 08.04.2024
    Ответить

    Для создания приложения, которое было бы одностраничным приложением (SPA) с возможностью SEO индексации, можно использовать фреймворк Vue.js в паре с бэкендом на Laravel.

    Vue.js предоставляет возможность создания интерактивных пользовательских интерфейсов, а также позволяет делать приложение SPA-friendly. Однако, по умолчанию SPA приложения не очень хорошо индексируются поисковыми системами из-за отсутствия прямой навигации и обновления контента на одной странице.

    Для решения этой проблемы можно использовать технику SSR (Server-Side Rendering) вместе с Vue.js. SSR позволяет генерировать HTML на сервере и отправлять его уже с заполненным контентом на клиент, что делает страницу более подходящей для индексации поисковыми системами.

    С Laravel можно легко настроить SSR, используя пакеты, такие как "spatie/laravel-server-side-rendering". Этот пакет позволяет рендерить Vue компоненты на сервере и отправлять готовый HTML клиенту.

    Таким образом, выбрав Vue.js в паре с Laravel и настроив SSR, вы получите SPA приложение, которое будет хорошо индексироваться поисковыми системами и обеспечит хорошее пользовательское взаимодействие.

    Пример использования Vue.js с Laravel и SSR:

    // Laravel Controller
    use AppHttpControllersController;
    use SpatieSsrRenderer;
     
    class VueController extends Controller
    {
        public function index(Renderer $renderer)
        {
            return $renderer->render('MyVueComponent', [
                'props' => [
                    'data' => 'some data',
                ],
            ]);
        }
    }

    Такой подход позволит создать эффективное и SEO-дружелюбное приложение, сочетающее в себе преимущества SPA и возможность индексации контента поисковыми системами.

Оставить комментарий