Pratique de rendu côté serveur React : Comment améliorer l'effet SEO des applications frontales
Aperçu :
Avec le développement rapide de la technologie front-end, de plus en plus de sites Web et d'applications utilisent React comme front-end cadre. Cependant, en raison des caractéristiques de React, les moteurs de recherche rencontrent certaines difficultés pour indexer et analyser son contenu. Afin d'améliorer l'effet d'optimisation des moteurs de recherche (SEO) du site Web, le rendu côté serveur (SSR) est devenu une solution importante.
Cet article présentera la pratique de l'utilisation de React pour le rendu côté serveur et fournira des exemples de code spécifiques pour aider les développeurs à améliorer l'effet SEO des applications frontales.
1. Avantages du rendu côté serveur
1.1 Améliorer l'effet SEO :
Le rendu côté serveur peut permettre aux moteurs de recherche de mieux analyser et explorer le contenu du site Web, et d'améliorer le classement et l'exposition du site Web. Par rapport au rendu côté client (CSR) traditionnel, le rendu côté serveur peut restituer entièrement la structure et le contenu de la page lors de la première visite, réduisant ainsi la difficulté pour les robots des moteurs de recherche d'analyser le contenu de la page.
1.2 Améliorer la vitesse de chargement du premier écran :
Étant donné que le rendu côté serveur peut générer le contenu complet de la page à l'avance, les utilisateurs peuvent obtenir directement la page rendue lors de leur première visite, réduisant ainsi le besoin de télécharger des fichiers JS et de les analyser au préalable. lors du rendu côté client. Le processus améliore la vitesse de chargement du premier écran du site Web et augmente l'expérience utilisateur.
2. Pratique du rendu côté serveur
2.1 Utilisation de React.js
React.js est un excellent framework front-end avec les caractéristiques de composantisation et de DOM virtuel efficace, et convient au rendu côté serveur. Lorsque vous utilisez React.js pour le rendu côté serveur, il y a deux concepts fondamentaux à comprendre : les composants React et le routage côté serveur.
2.1.1 Composant React
Le composant React est l'unité la plus basique pour créer une interface utilisateur. Vous pouvez créer différentes parties de la page en définissant des composants. Lors du rendu côté serveur, vous devez vous assurer que tous les composants React peuvent s'exécuter dans des environnements côté serveur et côté client.
Par exemple, nous pouvons définir un simple composant React :
import React from 'react';
class Hello extends React.Component {
render() {
return <h1>Hello, World!</h1>;
}
}
export default Hello;2.1.2 Routage côté serveur
Le rendu côté serveur doit restituer différents contenus de page en fonction de différents chemins d'accès, le routage côté serveur doit donc être utilisé pour traiter les demandes. Dans React, vous pouvez utiliser React-Router comme bibliothèque de routage côté serveur.
Par exemple, nous pouvons définir une route simple côté serveur :
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter, matchPath } from 'react-router-dom';
import App from './App';
function renderApp(req, res) {
const context = {};
const content = renderToString(
<StaticRouter location={req.url} context={context}>
<App />
</StaticRouter>
);
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<div id="root">${content}</div>
<script src="bundle.js"></script>
</body>
</html>
`);
}
export default renderApp;2.2 Optimiser les effets SEO
2.2.1 Générer des pages statiques
En plus de fournir un contenu HTML complet lors du rendu côté serveur, nous pouvons également restituer le résultats du serveur Enregistrez-le en tant que fichier statique pour une exploration directe par les robots des moteurs de recherche. De cette manière, les moteurs de recherche peuvent analyser et indexer plus facilement le contenu des pages et améliorer les effets de référencement.
Par exemple, nous pouvons utiliser express.js pour générer des pages statiques :
import fs from 'fs';
import express from 'express';
import renderApp from './renderApp';
const app = express();
app.get('/', (req, res) => {
const content = renderApp(req, res);
fs.writeFileSync('index.html', content);
res.send(content);
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});2.2.2 Optimiser les méta-informations
Les méta-informations sont très importantes pour le référencement, et vous pouvez améliorer l'effet SEO du site Web en définissant des balises méta pour différentes pages. Dans React, vous pouvez utiliser la bibliothèque React-helmet pour modifier dynamiquement les méta-informations de chaque page.
Par exemple, nous pouvons définir un simple composant Meta :
import React from 'react';
import { Helmet } from 'react-helmet';
class Meta extends React.Component {
render() {
return (
<Helmet>
<title>{this.props.title}</title>
<meta name="description" content={this.props.description} />
</Helmet>
);
}
}
export default Meta;Ensuite, utilisez ce composant dans la page pour définir les informations Meta :
import React from 'react';
import Meta from './Meta';
class Home extends React.Component {
render() {
return (
<div>
<Meta title="首页" description="这是我的首页" />
{/* 页面内容 */}
</div>
);
}
}
export default Home;Résumé :
Grâce au rendu côté serveur, nous pouvons améliorer l'effet SEO du front-end candidatures. Cet article présente la pratique de l'utilisation de React pour le rendu côté serveur et fournit des exemples de code spécifiques. J'espère qu'il sera utile aux développeurs pour améliorer l'effet SEO des applications frontales. Bien sûr, le rendu côté serveur est un sujet complexe, et il existe de nombreuses autres méthodes et considérations d'optimisation à prendre en compte.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
