Creé una aplicación de reacción del lado del servidor, donde devolvería html como se muestra a continuación:
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> Leí que mucha gente ha estado usando react-helmet para administrar el contenido en la cabeza. Me pregunto cuál es el beneficio de usarlo, cuando puedo incluirlo directamente como se muestra arriba.
Un beneficio importante o casco de reacción es cuando tiene varios componentes en un árbol con etiquetas <head> y tiene etiquetas <meta> con los mismos atributos/valores.
Por ejemplo, si en su componente de página de índice tiene:
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> Pero luego, en un componente de página hoja , también tiene una etiqueta <head> que contiene etiquetas meta:
<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> Observe que entre nuestros dos componentes de página hay dos etiquetas meta con el mismo valor de atributo name="description" en nuestro árbol. Puede pensar que esto podría conducir a la duplicación, pero react-helmet se encarga de este problema.
Si alguien termina en la página de hoja, react-helmet anula la metaetiqueta de descripción de índice/nivel de sitio y muestra la de nivel inferior, la específica para la página de hoja.
También contendrá la etiqueta meta de la ventana gráfica, ya que no tuvo que sobrescribirse.
Debido a react-helmet , en la página hoja, el <head> aparecería de la siguiente manera:
<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>react-helmet permite establecer metaetiquetas que leerán los motores de búsqueda y los rastreadores de redes sociales. Esto hace que la representación del lado del servidor y React Helmet sean un dúo dinámico para crear aplicaciones compatibles con SEO y redes sociales.
p.ej:
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>Ambos métodos deberían funcionar. Pero con el casco de reacción, la cabeza también se trata como un componente y es más parecida a una reacción. Además, aunque es inusual, puede vincular algunos accesorios o estados con los metadatos para implementar un encabezado dinámico. Un escenario es cambiar entre diferentes idiomas.