Для чего нужен React-шлем?

Я создал приложение для реакции на стороне сервера, в котором он будет возвращать html, как показано ниже:

const html = renderToString(<App />);
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>A Cool Page</title>
    <link rel="stylesheet" href="${ROOT}/static/index.css">
  </head>
  <body>
    <div id="root">${html}</div>
    <script src="${ROOT}/client-bundle.js"></script>
  </body>
</html>

Я читал, что многие люди использовали React-Helmet для управления контентом в голове. Мне интересно, в чем польза от его использования, если я могу просто напрямую включить, как показано выше.


reactjs react-helmet
person PBandJen    schedule 07.10.2018    source источник
comment
как изменить его содержимое таким образом во время выполнения?   -  person azium    schedule 07.10.2018
comment
Вы имеете в виду изменение содержания в голове? В каком сценарии я бы хотел изменить контент? Вы имеете в виду, что на стороне сервера мне может понадобиться другой контент в голове по сравнению с тем, что на стороне клиента? @azium   -  person PBandJen    schedule 07.10.2018
comment
Возможно, вы не совсем понимаете, как работает React в этом случае: ваш сервер отправит реальную страницу, когда использование впервые попадает в реальный URL-адрес, который включает скрипт, который загрузит приложение. После загрузки приложения ваш сервер не будет вызываться снова, и все, что может загрузить другую страницу, определенно не работает: React (при правильной настройке) использует библиотеки, такие как React-Router, чтобы сделать это смотрите на пользователя, как будто он меняет один URL-адрес на другой через API истории, с <title> обновлениями, используя helmet, но ваши пользователи никогда не фактически уходят с этой первой страницы.   -  person Mike 'Pomax' Kamermans    schedule 07.10.2018
comment
Прочитав все ответы на исходный вопрос, я все еще не понимаю. Большинство ответов, кажется, бросают в SSR. Что делать, если IDGAF о SSR?   -  person joedotnot    schedule 20.12.2020

Ответы (5)


arrow_upward
54
arrow_downward

Основным преимуществом или защитным шлемом является то, что у вас есть несколько компонентов в дереве с тегами <head> и у вас есть теги <meta> с одинаковыми атрибутами / значениями.

Например, если в компоненте страницы index у вас есть:

const html = renderToString(<App />);
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="This is the index page description"> 
    <title>A Cool Index Page</title>
  </head>
</html>

Но в компоненте листовой страницы у вас также есть тег <head>, содержащий метатеги:

<html>
  <head>
    <meta name="description" name="This is the unique leaf page description"> 
    <title>A Cool Leaf Page</title>
    <link rel="stylesheet" href="${ROOT}/static/index.css">
  </head>
</html>

Обратите внимание, что между двумя нашими компонентами страницы есть два метатега с одинаковым значением атрибута name="description" в нашем дереве. Вы можете подумать, что это может привести к дублированию, но react-helmet решает эту проблему.

Если кто-то попадает на конечную страницу, react-Helve отменяет метатег index / site-description и отображает тег нижнего уровня, предназначенный специально для конечной страницы.

Он также будет содержать метатег области просмотра, поскольку его не нужно было перезаписывать.

Из-за react-helmet на конечной странице <head> будет выглядеть следующим образом:

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" name="This is the unique leaf page description"> 
    <title>A Cool Leaf Page</title>
    <link rel="stylesheet" href="${ROOT}/static/index.css">
  </head>
</html>
person Lexis Hanson    schedule 07.10.2018
comment
Если приложение не использует рендеринг на стороне сервера, метатеги не подходят для сканеров? или они? - person Akber Iqbal; 26.02.2020
comment
@AkberIqbal Нет, большинство сканеров не ждут, пока javascript установит метатеги или отобразит страницу вообще, за исключением популярных, например. Google и др. - person Tero; 06.03.2020
comment
@AkberIqbal Google ожидает рендеринга javascript, как и bing, yahoo и duckduckgo, но в случае социальных платформ, таких как facebook, twitter и reddit, я думаю, они не поддерживают его и требуют обходных решений. - person Pooya Estakhri; 18.03.2021

arrow_upward
19
arrow_downward

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

eg:

import { Helmet } from 'react-helmet';

<Helmet>
    <title>Turbo Todo</title>
    <meta name="description" content="test on react-helmet" />
    <meta name="theme-color" content="#ccc" />
</Helmet>
person Sajin M Aboobakkar    schedule 16.07.2019

arrow_upward
5
arrow_downward

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

person Van    schedule 07.10.2018

arrow_upward
2
arrow_downward

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

Например, если вы хотите динамически изменить свой тег <body>, вы можете сделать следующее:

<Helmet>
    <body className="dynamic-class-for-body-on-this-view" />
</Helmet>
person Alberto Ruiz    schedule 19.05.2020

arrow_upward
2
arrow_downward

React Helmet - это многоразовый компонент React, который будет управлять всеми вашими изменениями в заголовке документа.

Например, если вы хотите изменить заголовок и мета-описание каждой страницы в соответствии с вашим SEO, вы можете сделать следующее:

<Helmet>
    <title>Your Title</title>
    <meta name="description" content="Description of your page" />
</Helmet>
person Raghav Jindal    schedule 22.08.2020