Rendu côté serveur (SSR) à l'aide de frameworks JavaScript

Dans l’environnement de développement Web actuel, en évolution rapide, il est crucial de fournir un site Web performant et convivial pour les moteurs de recherche. Un moyen efficace d’y parvenir consiste à utiliser le rendu côté serveur (SSR). Dans cet article, nous explorerons comment implémenter la SSR à l'aide d'un framework JavaScript et fournirons des exemples de code, des explications et des résultats pour vous aider à réaliser tout le potentiel de la SSR dans vos projets.

En savoir plus sur le rendu côté serveur

Le rendu côté serveur consiste à générer du contenu HTML sur le serveur et à l'envoyer au client, où il est immédiatement affiché. Cette approche contraste avec le rendu côté client (CSR), dans lequel le navigateur récupère un minimum de code HTML du serveur, puis restitue le contenu côté client à l'aide de JavaScript.

Avantages du rendu côté serveur

• Performances améliorées − SSR minimise le temps nécessaire au premier tirage significatif car le serveur envoie du HTML pré-rendu au client. Cela améliore les temps de chargement des pages et offre une meilleure expérience utilisateur.

• Optimisation SEO−Les moteurs de recherche peuvent facilement explorer et indexer les pages rendues par le serveur, améliorant ainsi le classement des moteurs de recherche et la visibilité.

• Partage sur les réseaux sociaux − Les pages rendues par le serveur fournissent un contenu riche pour les plateformes de médias sociaux, garantissant que les liens partagés affichent des aperçus précis et engagent efficacement les utilisateurs.

Utilisez le framework JavaScript pour implémenter le rendu côté serveur

Plongeons dans une implémentation pratique de SSR à l'aide de frameworks JavaScript populaires.

React.js et Next.js

Créez un nouveau projet React à l'aide de Create React App. Ouvrez un terminal et exécutez la commande suivante -

npx create-react-app my-ssr-app

Cela créera un nouveau répertoire appelé my-ssr-app qui contient la structure de base du projet React.

Passer au répertoire du projet -

cd my-ssr-app

Installez Next.js en tant que dépendance -

npm install next react react-dom

Exemple

Remplacez le contenu du fichier src/index.js en utilisant le code suivant−

import React from 'react';

const Home = () => {
   return (
      <div>
         <h1>Welcome to SSR with React and Next.js!</h1>
      </div>
   );
};

export default Home;

Créez un nouveau répertoire nommé pages dans le répertoire src du projet−

mkdir src/pages

Déplacez le fichier src/index.js vers le répertoire src/pages−

mv src/index.js src/pages/index.js

Ouvrez le fichier package.json et remplacez la section "scripts" existante par le code suivant -

"scripts": {
   "dev": "next dev"
},

Enregistrez les modifications et exécutez la commande suivante dans le terminal pour démarrer le serveur de développement -

npm run dev

Ouvrez votre navigateur et accédez à http://localhost:3000.

Sortie

Vue.js et Nuxt.js

Semblable à React, Vue.js fournit également un puissant framework SSR appelé Nuxt.js.

Créez un nouveau projet Nuxt.js en ouvrant un terminal et en exécutant la commande suivante -

npx create-nuxt-app my-ssr-app

Cela créera un nouveau répertoire appelé my-ssr-app qui contient la structure de base du projet Nuxt.js.

Passer au répertoire du projet−

cd my-ssr-app

Exemple

Ouvrez le fichier pages/index.vue et remplacez le contenu existant par le code suivant −

<template>
   <div>
      <h1>Welcome to SSR with Vue and Nuxt.js!</h1>
   </div>
</template>

<script>
export default {
   name: 'Home',
};
</script>

Enregistrez les modifications et le serveur de développement se rechargera automatiquement avec le contenu mis à jour.

Démarrez le serveur de développement en exécutant la commande suivante−

npm run dev

Actualisez le navigateur et visitez http://localhost:3000.

Sortie

Angulaire et Angulaire Universel

Angular est un framework JavaScript complet qui fournit Angular Universal pour le rendu côté serveur.

Tout d'abord, installez Angular Universal à l'aide de npm −

npm install --save @nguniversal/express-engine

Exemple

Ensuite, créez un nouveau fichier src/app/ home.component.ts et ajoutez le code suivant -

import { Component } from '@angular/core';

@Component({
   selector: 'app-home',
   template: `
      <div>
         <h1>Welcome to SSR with Angular and Angular Universal!</h1>
      </div>
  `,
})
export class HomeComponent {}

使用以下代码更新 src/app/app.module.ts 文件 − p>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';

@NgModule({
   imports: [BrowserModule],
   declarations: [AppComponent, HomeComponent],
   bootstrap: [AppComponent],
})
export class AppModule {}

最后，运行以下命令启动开发服务器−

npm run dev:ssr

在浏览器中导航到 http://localhost:4000，您将看到服务器渲染的输出。

输出

结论

服务器端渲染在性能、SEO 和社交媒体共享方面提供了显着的优势。 React.js 与 Next.js、Vue.js 与 Nuxt.js 以及 Angular 与 Angular Universal 等 JavaScript 框架提供了强大的 SSR 解决方案。

通过利用 SSR 的强大功能，开发人员可以增强用户体验、提高搜索引擎可见性并提供高度优化的网站。通过本文中提供的代码示例和说明，您现在已经为在项目中使用 JavaScript 框架实现 SSR 奠定了坚实的基础。立即开始探索 SSR 并释放 Web 应用程序的全部潜力。

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!