React Helm: Beherrschen Sie den Kopf Ihrer React -Site

der Abschnitt Ihrer Website ist zwar oft übersehen, ist jedoch für SEO, Social -Media -Integration und Laden von wesentlichen Assets wie Stylesheets und Analytics -Bibliotheken von entscheidender Bedeutung. Dies dynamisch in einer React -Anwendung zu bewältigen, kann eine Herausforderung sein. Dieses Tutorial zeigt, wie man den Inhalt von React Helm mit React-Helm effizient umgeht, um das Server-Seiten-Rendering (SSR) mit Gatsby zu nutzen.

manipulieren document.title

componentDidmount sind umständlich und fehleranfällig. React Helm bietet eine optimierte Lösung. Um seine Macht jedoch vollständig zu nutzen, insbesondere für SEO (Suchmaschinen haben Probleme mit dem Kunden, das Inhalte gerendert), ist SSR unerlässlich. Daher verwenden wir Gatsby, einen reag-basierten statischen Site-Generator, der integrierte SSR. anbietet. Einrichten von Gatsby und React Helm

Installieren Sie Gatsby Cli:

1. npm i -g gatsby -cli

   npm i -g gatsby-cli

Erstellen Sie ein neues Gatsby -Projekt:

2. gatsby New my-gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

   npm i -g gatsby-cli

install React Helm und Gatsby Plugin:

3. npm i-Save React-Helmet Gatsby-Plugin-React-Helmet

   npm i -g gatsby-cli

konfigurieren Sie Gatsby:
4. das Plugin zu

   gatsby-config.js : module.exports = { Plugins: [`Gatsby-Plugin-React-Helmet`], };

   npm i -g gatsby-cli

   Erstellen einer dynamischen Layoutkomponente

components/layout.js

import reagieren aus "reagt"; Helm von "React-Helmet" importieren; {link} aus "gatsby" importieren; Import "../css/main.css"; Exportieren Sie Standard ({Pagemeta, Kinder}) => (

import React from "react";
import Helmet from "react-helmet";
import { Link } from "gatsby";
import "../css/main.css";

export default ({ pageMeta, children }) => (
  
    
      
      
      
      
      
      
       {/* Add language support */}
      

. Slick { Hintergrundfarbe: Gelb; Farbe: Limegreen; Schriftfamilie: "Comic Sans MS", Cursive, Sans-Serif; }

npm i -g gatsby-cli

src/pages/index.js

import reagieren aus "reagt"; Layout aus "../Components/Layout" importieren; Exportieren Sie default () => (

import React from "react";
import Layout from "../components/layout";

export default () => (
  
    
Welcome to Cars4All!
  
);

import reagieren aus "reagt"; Layout aus "../Components/Layout" importieren; Exportieren Sie default () => (

import React from "react";
import Layout from "../components/layout";

export default () => (
  
    
Our Cars
    {/* ... car listings ... */}
  
);

gatsby Build

gatsby serve , um die Ergebnisse mit SSR zu sehen. Überprüfen Sie den Quellcode, um zu überprüfen, ob der Inhalt von React Helm korrekt gerendert wird. Die Lang Attribut und benutzerdefinierte CSS -Klasse werden wie erwartet angewendet. Denken Sie daran, die strukturierten Platzhalterdaten durch Ihre tatsächlichen Daten zu ersetzen. Dieser Ansatz stellt sicher, dass die Metadaten Ihrer Reaktionsanwendung ordnungsgemäß von Suchmaschinen und Social -Media -Crawlern indiziert werden.