Une approche simple de la RSS avec React et esbuild

Ce blog explique comment créer une application React légère et flexible avec un minimum d'outils et de frameworks en tirant parti des dernières fonctionnalités de React. Bien que les frameworks comme Next.js et Remix soient excellents pour de nombreux cas d'utilisation, ce guide s'adresse à ceux qui souhaitent avoir un contrôle total tout en conservant des fonctionnalités similaires.

Avec la sortie de React 19 et ses nouvelles fonctionnalités pour prendre en charge SSR, j'ai décidé d'expérimenter la création d'une application React prenant en charge SSR avec un minimum d'outils, mais explorons d'abord les fonctionnalités essentielles fournies par Next.js que nous devons prendre en compte :

Feature	Next.js
SSR (Server-Side Rendering)	Built-in with minimal setup.
SSG (Static Site Generation)	Built-in with getStaticProps.
Routing	File-based routing.
Code Splitting	Automatic.
Image Optimization	Built-in with next/image.
Performance Optimizations	Automatic (e.g., prefetching, critical CSS).
SEO	Built-in tools like next/head.

Sur la base de ces fonctionnalités, nous allons créer une configuration minimale ; voici le guide étape par étape :

Table des matières

• Configuration
• Configuration d'esbuild
• Application Express et routage
• Application Réagir
• Courir
• Prochaines étapes
• Références

Remarque : Vous pouvez retrouver le contenu de ce tutoriel dans mon repo https://github.com/willyelm/react-app

Installation

Comme condition préalable à notre configuration, nous aurons besoin d'installer Node.js et les packages suivants :

• react : bibliothèque d'interface utilisateur interactive et basée sur des composants.
• react-dom : hydrate le contenu SSR avec la fonctionnalité React.
• react-router-dom : Gérer les routes avec React.
• express : serveur simple Node.js pour API statiques et REST.
• esbuild : transpilez TypeScript et regroupez des fichiers JS, CSS, SVG et autres.
• typescript : Ajout de la saisie à notre code source.

Notre configuration gérera le routage avec express pour servir les fichiers statiques, les fichiers publics et les API REST. Gérez ensuite toutes les requêtes avec React-Router-dom. Une fois chargé dans le navigateur, notre ensemble client hydratera notre contenu pré-rendu et rendra nos composants interactifs. Voici une représentation schématique de cette idée :

Le diagramme illustre comment l'application express gérera les requêtes en pré-rendu les composants React sur le serveur et en renvoyant le HTML. Côté client, React hydrate ces composants pré-rendus pour permettre l'interactivité.

En gardant ce schéma à l'esprit, créons une structure de dossiers :

react-app/             # This will be our workspace directory.
  - public/            
  - scripts/           
    - build.js         # Bundle our server and client scripts.
    - config.js        # esbuild config to bundle.
    - dev.js           # Bundle on watch mode and run server.
  - src/
    - App/             # Our components will be here.
      - App.tsx        # The main application with browser routing.
      - Home.tsx.      # Our default page component.
      - NotFound.tsx   # Fallback page for unmatched routes.
    - index.tsx        # Hydrate our pre-rendered client app.
    - main.tsx         # Server app with SSR components.
    - style.css        # Initial stylesheet.   
  package.json
  tsconfig.json

Ajoutons nos dépendances et configurons notre package.json :

{
  "name": "react-app",
  "type": "module",
  "devDependencies": {
    "@types/express": "^5.0.0",
    "@types/node": "^22.10.2",
    "@types/react": "^19.0.2",
    "@types/react-dom": "^19.0.2",
    "esbuild": "^0.24.2",
    "typescript": "^5.7.2"
  },
  "dependencies": {
    "express": "^4.21.2",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router-dom": "^7.1.0"
  },
  "scripts": {
    "build": "node scripts/build",
    "dev": "node scripts/dev",
    "start": "node dist/main.js"
  }
}

Remarque : la propriété "type": "module" est requise pour permettre à node.js d'exécuter des scripts ESM.

Puisque nous utiliserons Typescript, nous allons configurer un fichier tsconfig.json :

{
  "compilerOptions": {
    "esModuleInterop": true,
    "verbatimModuleSyntax": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "target": "ES2022",
    "module": "ES2022",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "src": [
        "./src/"
      ]
    }
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

Configuration d'esbuild

Pourquoi esbuild ? par rapport à d'autres outils, esbuild garde les choses au minimum, il est très rapide (le bundler le plus rapide à ce jour) et prend en charge typescript et esm par défaut.

Dans cette configuration, nous utiliserons esbuild pour créer nos scripts de développement et de construction et transpiler les bundles client et serveur. Dans cette section, nous travaillerons dans le dossier scripts de notre espace de travail.

scripts/config.js : ce fichier contiendra une configuration de base pour le bundle client et serveur qui sera partagé pour nos scripts.

import path from 'node:path';
// Working dir
const workspace = process.cwd();
// Server bundle configuration
export const serverConfig = {
  bundle: true,
  platform: 'node', 
  format: 'esm',        // Support esm packages
  packages: 'external', // Omit node packages from our node bundle
  logLevel: 'error',
  sourcemap: 'external',
  entryPoints: {
    main: path.join(workspace, 'src', 'main.tsx') // Express app
  },
  tsconfig: path.join(workspace, 'tsconfig.json'),
  outdir: path.join(workspace, 'dist')
};

// Client bundle configuration
export const clientConfig = {
  bundle: true,
  platform: 'browser',
  format: 'esm',
  sourcemap: 'external',
  logLevel: 'error',
  tsconfig: path.join(workspace, 'tsconfig.json'),
  entryPoints: {
    index: path.join(workspace, 'src', 'index.tsx'), // Client react app
    style: path.join(workspace, 'src', 'style.css')  // Stylesheet
  },
  outdir: path.join(workspace, 'dist', 'static'),    // Served as /static by express
};

scripts/dev.js : ce script regroupe à la fois l'application client et l'application serveur et exécute le script du serveur principal en mode surveillance.

react-app/             # This will be our workspace directory.
  - public/            
  - scripts/           
    - build.js         # Bundle our server and client scripts.
    - config.js        # esbuild config to bundle.
    - dev.js           # Bundle on watch mode and run server.
  - src/
    - App/             # Our components will be here.
      - App.tsx        # The main application with browser routing.
      - Home.tsx.      # Our default page component.
      - NotFound.tsx   # Fallback page for unmatched routes.
    - index.tsx        # Hydrate our pre-rendered client app.
    - main.tsx         # Server app with SSR components.
    - style.css        # Initial stylesheet.   
  package.json
  tsconfig.json

Avec ce script, nous devrions pouvoir exécuter npm run dev tel que configuré dans le package.json dans notre espace de travail.

scripts/build.js : similaire à dev mais il suffit d'activer minify.

{
  "name": "react-app",
  "type": "module",
  "devDependencies": {
    "@types/express": "^5.0.0",
    "@types/node": "^22.10.2",
    "@types/react": "^19.0.2",
    "@types/react-dom": "^19.0.2",
    "esbuild": "^0.24.2",
    "typescript": "^5.7.2"
  },
  "dependencies": {
    "express": "^4.21.2",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router-dom": "^7.1.0"
  },
  "scripts": {
    "build": "node scripts/build",
    "dev": "node scripts/dev",
    "start": "node dist/main.js"
  }
}

Ce script générera notre bundle dist prêt pour la production en exécutant npm run build et en exécutant l'application à l'aide de npm start.

Maintenant que nous avons configuré esbuild pour regrouper à la fois notre nœud et notre application client, commençons à créer un serveur express et à implémenter React SSR.

Application Express et routage

Il s'agit d'une application simple utilisant l'approche statique et middleware Express pour servir des fichiers statiques, gérer les routes du serveur et acheminer à l'aide de React-Router-dom.

src/main.tsx : il s'agit de l'application principale Node.js qui initialise le serveur, gère les routes avec Express et implémente React SSR.

{
  "compilerOptions": {
    "esModuleInterop": true,
    "verbatimModuleSyntax": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "target": "ES2022",
    "module": "ES2022",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "src": [
        "./src/"
      ]
    }
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

Application Réagir

L'application React gérera les itinéraires en utilisant React-Router-dom, notre application sera composée d'une page d'accueil et d'une page NotFound pour tester l'hydratation nous ajouterons un bouton compteur sur la page d'accueil et profiterons de React 19 nous le ferons mettre à jour le titre et la description des balises méta.

src/App/Home.tsx : un FunctionComponent très minimal.

import path from 'node:path';
// Working dir
const workspace = process.cwd();
// Server bundle configuration
export const serverConfig = {
  bundle: true,
  platform: 'node', 
  format: 'esm',        // Support esm packages
  packages: 'external', // Omit node packages from our node bundle
  logLevel: 'error',
  sourcemap: 'external',
  entryPoints: {
    main: path.join(workspace, 'src', 'main.tsx') // Express app
  },
  tsconfig: path.join(workspace, 'tsconfig.json'),
  outdir: path.join(workspace, 'dist')
};

// Client bundle configuration
export const clientConfig = {
  bundle: true,
  platform: 'browser',
  format: 'esm',
  sourcemap: 'external',
  logLevel: 'error',
  tsconfig: path.join(workspace, 'tsconfig.json'),
  entryPoints: {
    index: path.join(workspace, 'src', 'index.tsx'), // Client react app
    style: path.join(workspace, 'src', 'style.css')  // Stylesheet
  },
  outdir: path.join(workspace, 'dist', 'static'),    // Served as /static by express
};

src/App/NotFound.tsx : FunctionComponent par défaut lorsque la page est introuvable.

import { spawn } from 'node:child_process';
import path from 'node:path';
import { context } from 'esbuild';
import { serverConfig, clientConfig } from './config.js';
// Working dir
const workspace = process.cwd();
// Dev process
async function dev() {
  // Build server in watch mode
  const serverContext = await context(serverConfig);
  serverContext.watch();
  // Build client in watch mode
  const clientContext = await context(clientConfig);
  clientContext.watch();
  // Run server
  const childProcess = spawn('node', [
    '--watch',
    path.join(workspace, 'dist', 'main.js')
  ], {
    stdio: 'inherit'
  });
  // Kill child process on program interruption
  process.on('SIGINT', () => {
    if (childProcess) {
      childProcess.kill();
    }
    process.exit(0);
  });
}
// Start the dev process
dev();

src/App/App.tsx : Configuration de notre application à l'aide de React-Router-dom.

import { build } from 'esbuild';
import { clientConfig, serverConfig } from './config.js';
// build process
async function bundle() {
  // Build server
  await build({
    ...serverConfig,
    minify: true
  });
  // Build client
  await build({
    ...clientConfig,
    minify: true
  });
}
// Start the build process
bundle();

Courir

Enfin, avec les scripts esbuild configurés, le serveur express est configuré et React SSR est implémenté. nous pouvons faire fonctionner notre serveur :

import path from 'node:path';
import express, { type Request, type Response } from 'express';
import { renderToPipeableStream } from 'react-dom/server';
import { StaticRouter } from 'react-router';
import { App } from './App/App';

const app = express(); // Create Express App
const port = 3000; // Port to listen
const workspace = process.cwd(); // workspace
// Serve static files like js bundles and css files
app.use('/static', express.static(path.join(workspace, 'dist', 'static')));
// Server files from the /public folder
app.use(express.static(path.join(workspace, 'public')));
// Fallback to render the SSR react app
app.use((request: Request, response: Response) => {
  // React SSR rendering as a stream
  const { pipe } = renderToPipeableStream(
    <html lang="en">
      <head>
        <meta charSet="UTF-8" />
        <link rel='stylesheet' href={`/static/style.css`} />
      </head>
      <body>
        <base href="/" />
        <div>


<p>src/index.tsx: On the client side to activate our components and make them interactive we need to "hydrate".<br>
</p>
<pre class="brush:php;toolbar:false">import { hydrateRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router';
import { App } from './App/App';
// Hydrate pre-renderer #app element
hydrateRoot(
  document.getElementById('app') as HTMLElement,
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Cela affichera un message [app] en écoute sur le port 3000. accédez à
http://localhost:3000 pour le vérifier.

Test des balises méta SSR et SEO :

Vous pouvez également retrouver le code source de ce tutoriel dans mon repo willyelm/react-app

Willylm / réagir-application

Une configuration simple de l'application React avec SSR et esbuild

Ce projet exploite les dernières fonctionnalités de réagir@19, réagir-router-dom@7 et d'autres pour configurer SSR.

Dépendances

• react : bibliothèque d'interface utilisateur interactive et basée sur des composants.
• react-dom : hydrate le contenu SSR avec la fonctionnalité React.
• react-router-dom : Gérer les routes avec React.
• express : serveur simple Node.js pour API statiques et REST.
• esbuild : Transile TypeScript et regroupez des fichiers JS, CSS, SVG et autres.
• typescript : Ajout de la saisie à notre code source.

Structure du projet

react-app/             # This will be our workspace directory.
  - public/            
  - scripts/           
    - build.js         # Bundle our server and client scripts.
    - config.js        # esbuild config to bundle.
    - dev.js           # Bundle on watch mode and run server.
  - src/
    - App/             # Our components will be here.
      - App.tsx        # The main application with browser routing.
      - Home.tsx.      # Our default page component.
      - NotFound.tsx   # Fallback page for unmatched routes.
    - index.tsx        # Hydrate our pre-rendered client app.
    - main.tsx         # Server app with SSR components.
    - style.css        # Initial stylesheet.   
  package.json
  tsconfig.json

…

Voir sur GitHub

Prochaines étapes

Dans ce guide, nous avons construit une application React avec SSR à l'aide d'esbuild et Express, en nous concentrant sur une configuration minimale et flexible. En utilisant des outils modernes tels que React 19, React Router DOM 7 et esbuild, nous avons obtenu un flux de travail rapide et efficace tout en évitant la surcharge des frameworks plus grands.

Nous pouvons améliorer cette mise en œuvre pour inclure les éléments suivants :

• TailwindCSS : configurez PostCSS et esbuild pour prendre en charge tailwindcss pour le style.
• Jest : Ajoutez des tests unitaires avec Jest et @testing-library.
• Playwright : configurez les tests de bout en bout avec le dramaturge.
• SSG : implémentez SSG (génération de site statique) pour améliorer les performances et le chargement du serveur.
• HMR : prend en charge HMR (Hot Module Remplacement) avec esbuild en mode développement pour améliorer l'efficacité.

Merci d'avoir lu et bon codage.

Références

• Réagir 19
• Réagir au routeur DOM
• Réagissez SSR
• Express.js
• TypeScript
• esbuild

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!