Самый простой способ настроить рендеринг на стороне сервера с помощью React и axios

Рендеринг на стороне сервера (SSR) - это обоюдоострый меч. Это ужасно важно для определенных приложений, которые требуют поддержки SEO и отвечают определенным требованиям к производительности, но это плохо для правильной реализации.

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

При создании SPA часто вы используете JWT для аутентификации пользователя, отправляемой через HTTP-заголовки на сервер. Вместо этого для загрузки данных вы можете использовать React-компоненты, такие как componentWillMount. Но ничего из этого не работает при рендеринге вашего дерева компонентов на сервере.

Идея

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

Если перехваты выполняются при визуализации компонента, который их использует, это означает, что они выполняются как при рендеринге на клиенте, так и на сервере. Как следствие этого, если хук выполняет HTTP-запрос и используемую нами библиотеку, которая работает как на клиенте, так и на сервере, это означает, что мы получаем HTTP-запросы на клиенте и на сервере! 🍻

Axios - одна из таких библиотек, кроме того, что она моя любимая.

Реализация

Оказывается, идея имеет достаточно простую реализацию.

Предположим, что вы уже внедрили рендеринг на стороне сервера в своем приложении React.

Если вы еще этого не сделали, существует множество учебных пособий и примеров. Мой любимый находится в документации Redux.

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

function useAxios(url) {
 const [response, setResponse] = React.useState()
 
 React.useEffect(() => {
   axios(url)
     .then(response => setResponse(response))
     .catch(error => setResponse(error))
 }, [url])
 
 return response
}

Если вы использовали хуки, это не должно выглядеть слишком сложно.

Мы используем хук React.useState, чтобы сохранить значение ответа axios, и хук React.useEffect, чтобы инициировать запрос axios.

Использовать этот хук так же просто:

function App() {
 const response = useAxios('{your http api}')
 
 return (
   
{JSON.stringify(response.data)}
 )
}

Если вы думаете, что это круто, подождите, пока вы не поймете - как я это сделал - что этот подход упрощает загрузку данных во время рендеринга на стороне сервера.

Если подумать, какова сложность предварительной загрузки данных на сервер?

Все, что вовлечено, является:

• запуск HTTP-запросов
• жду ответов
• отправка данных клиенту вместе с созданной разметкой
• заставить клиента загружать данные так, чтобы он больше не выполнял эти HTTP-запросы, а просто связывал данные с компонентами, которые в них нуждаются

Теперь, хотя концепция проста, она требует немного кодирования, поэтому я и создал библиотеку, в которой заключена вся эта логика. По сути, это расширение простой реализации, показанной выше, но не дюжина строк кода, а ~ 100. Учитывая возможности, которые он предоставляет, и то, что его использование все еще в значительной степени однострочное, я нахожу это очень захватывающим!

Сборка axios-хуков

Библиотека называется axios-hooks, и вы можете установить ее с помощью:

npm install axios-hooks

В документации вы найдете несколько примеров с сопровождающими демонстрациями codeandbox.io, которые помогут вам быстро начать работу. Использование очень простое, но меня больше интересует объяснение того, как оно работает, особенно потому, что его можно применять ко многим другим хукам.

Использование его на клиенте уже полезно, поскольку избавляет от необходимости использовать хуки жизненного цикла React и состояние компонента. Это если вы не используете библиотеку управления состояниями более высокого порядка, и в этом случае вы, вероятно, решаете эту проблему совсем по-другому.

Самое большое преимущество, тем не менее, это объединение его с рендерингом на стороне сервера. Вот как это работает:

1. Сервер рендерит дерево компонентов, т.е. через функцию renderToString пакета react-dom/server
2. Хуки useAxios выполняются и запускают HTTP-запросы
3. axios-hooks хранит список всех запросов и кэширует ответы по мере их возвращения
4. Код сервера ожидает выполнения этих запросов и извлекает их сериализуемое представление, которое может быть отображено вместе с разметкой, созданной путем рендеринга дерева компонентов. И отправляет их обратно на клиент.
5. Клиент, прежде чем рендерить дерево компонентов, заполняет кэш axios-hooks данными, возвращаемыми сервером
6. Клиент рендерит дерево компонентов, и перехватчики useAxios снова запускаются. Поскольку данные уже есть, фактический HTTP-запрос не выполняется на клиенте

Концепция удивительно проста, как и реализация.

В заключении
Авторы оригинальной идеи использования хуков React в сценариях рендеринга на стороне сервера крутые парни из NearForm, которые создали потрясающую библиотеку graphql-hooks.

Перевод статьи: The easiest way to set up server-side rendering with React and axios