Самый простой способ настроить рендеринг бокового сервера с реагированием и Axios

Автор оригинала: FreeCodeCamp Community Member.

Симона Бусоли

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

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

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

? Идея

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

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

Axios Это одна такая библиотека, помимо моей любимой.

⚙️ Реализация

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

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

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

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

Мы используем Rect.Usestate крючок, чтобы сохранить значение ответа Axios, а A Rect.useeffect Крюк для запуска запроса Axios.

Использование этого крючка было бы так же просто, как это:

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

Если вы думаете об этом, какова сложность, участвующая в предварительно загрузках данных на сервере?

Все, что связано:

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

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

? Создание аксиос-крючков

Вы уже можете проверить код уже. Библиотека называется Axios-крючки И вы можете установить его с:

NPM установить Axios-крючки

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

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

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

1. Сервер оказывает дерево компонента, то есть через redertostring Функция React-Dom/Server упаковка
2. Useaxios Крючки срабатывают, а HTTP-запросы начались
3. Axios-крючки Содержит список всех запросов и кэширует ответы, когда они возвращаются
4. Код сервера ждет для этих запросов для завершения и извлечения их сериализационного представления, которые могут быть отображены вместе с разметкой, сгенерированной путем рендеринга дерева компонентов. Это отправлено обратно клиенту
5. Клиент, перед увлажнением дерева компонентов, заполняет Axios-крючки кэш с данными, возвращаемыми сервером
6. Клиент увлажняет компонентное дерево и Useaxios Крючки снова вызваны. Поскольку данные уже есть, фактический запрос HTTP не выполнен на клиенте

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

Проверить ? А XIOS-крючки Сегодня и опубликуйте свой отзыв!

Кредиты

Кредиты для первоначальной идеи использования реактивных крючков в сценариях рендеринга боковых серверов Перейдите в классные парни в Околоформ , кто построил удивительный График-крючки библиотека.