Rendu côté serveur (SSR) à l'aide de frameworks JavaScript-js tutoriel-php.cn

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

WBOY

Libérer： 2023-08-25 11:05:02

avant

1026 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

Installez Next.js en tant que dépendance -

npm install next react react-dom

Copier après la connexion

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;

Copier après la connexion

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

mkdir src/pages

Copier après la connexion

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

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

Copier après la connexion

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

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

Copier après la connexion

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

npm run dev

Copier après la connexion

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

Sortie

使用 JavaScript 框架的服务器端渲染 (SSR)

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Sortie

使用 JavaScript 框架的服务器端渲染 (SSR)

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

Copier après la connexion

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 {}

Copier après la connexion

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

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 {}

Copier après la connexion

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