Весь мир уже вовсю использует JavaScript фреймворки и серверный рендеринг с использованием Node.js. Но если в вашей компании по тем или иным причинам не могут использовать SSR, а портить жизнь seo-шникам, своими фреймворками, не хочется, можно сделать почти серверный рендер на PHP.
Meta информация
В первую очередь нам необходимо вернуть всю мета информацию по текущей странице:
<?php
$title = 'Заголовок страницы - Название сайта';
$description = 'Очень классное описание страницы сайта 🔥';
$keywords = 'крутой сайт, инфоцыганство, заработок в интернет';
?>
<!DOCTYPE html>
<html>
____<head>
________<title>
____________<?=$title?>
________</title>
________<meta name="description" content="<?=$description?>" />
________<meta name="keywords" content="<?=$keywords?>" />
...
____</head>
____<body>
________<div id="root">
________</div>
________<script src="/js/main.min.js?v=1" async></script>
____</body>
</html>
В данном фрагменте кода мы задали базовую HTML разметку и вывели мета информацию из переменных PHP, которые вы можете получить из вашей базы данных при помощи любого из PHP фреймворков, функций вашей CMS или самым обычным mysqli -> query.
Также внутри тега body мы указали стандартный для большинства React приложений контейнер с идентификатором root и скрипт с собранным React приложением.
То, что вместо ... в примере выше мы можем указать абсолютно любые дополнительные данные, будь то скрипт метрики или Open Graph разметка объяснять думаю не нужно 👌🏻
Маршрутизация
Маршрутизация – это пожалуй самый простой пункт из всех, которые вам предстоит реализовать. Здесь всё сводится к тому, что в вашем приложении React вам необходимо воссоздать тот же роутинг, который был в вашем проекте ранее.
Всё это легко настраивается с помощью React Router и в интернете, помимо официальной документации, есть большой выбор материалов с инструкциями по его настройке.
Если же проект новый, то вам просто необходимо на backend’е и в React Router определить одинаковые пути до каждой страницы.
А как быть с данными при загрузке?
Чтобы не ждать загрузку страницы из-за отправленных на старте xhr/fetch запросов мы можем вшить начальный стейт с необходимыми данными внутрь нашего HTML файла.
...
<?php
$data = [ "hello" => "Hello world 👋🏻" ];
?>
<script>
____window.initialState = JSON.parse(`<?=json_encode($data)?>`);
</script>
...
После этого уже внутри React приложения мы можем обратиться к нашему initialState, передать его в Redux или просто использовать по месту.
import { useState } from "react";
const MyAmazingView = () => {
____const initialState = useState(initialState ? initialState : {
________hello: 'Hello world 👋🏻'
____});
____return (
________<h1>{initialState.hello}</h1>
____);
}
А что в таком случае по безопасности? Глобально – ничего. Доступ к initialState в вашем HTML файле такой же лёгкий, как и к данным в панели разработчика с асинхронными запросами.
Где это работает?
Такой вариант подойдёт если вы хотите перевести ваш фронт на React или любой другой JS фреймворк и у вас нет возможности запустить JS на сервере.
Ваш backend может быть написан как на чистом PHP, так и на любом из PHP фреймворков. Также такой вариант можно использовать в сочетании с различными CMS и лучшим вариантом тут будет WordPress, который из коробки имеет хороший Rest API для ваших xhr/fetch запросов.