Pendekatan Mudah untuk SSR dengan React dan esbuild

Blog ini meneroka cara mencipta aplikasi React yang ringan dan fleksibel dengan alatan dan rangka kerja yang minimum dengan memanfaatkan ciri terkini React. Walaupun rangka kerja seperti Next.js dan Remix sangat baik untuk banyak kes penggunaan, panduan ini adalah untuk mereka yang berminat untuk mempunyai kawalan penuh sambil mengekalkan fungsi yang serupa.

Dengan React 19 dikeluarkan dan ciri baharunya untuk menyokong SSR, saya memutuskan untuk bereksperimen dengan mencipta aplikasi React yang menyokong SSR dengan alatan yang minimum tetapi mari kita terokai ciri penting Next.js yang perlu kita pertimbangkan:

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.

Berdasarkan ciri ini, kami akan membuat persediaan minimum; berikut ialah panduan langkah demi langkah:

Jadual Kandungan

• Persediaan
• Mengkonfigurasi esbuild
• Apl Ekspres dan Penghalaan
• Apl React
• Lari
• Langkah Seterusnya
• Rujukan

Nota: Anda boleh menemui kandungan tutorial ini dalam repo saya https://github.com/willyelm/react-app

Persediaan

Sebagai prasyarat persediaan kami, kami memerlukan Node.js dipasang dan pakej berikut:

• bertindak balas: Pustaka UI berasaskan komponen dan interaktif.
• react-dom: Menghidrat kandungan SSR dengan fungsi React.
• react-router-dom: Kendalikan Laluan dengan React.
• ekspresi: Pelayan ringkas Node.js untuk API statik dan REST.
• esbuild: Transpile TypeScript dan berkas JS, CSS, SVG dan fail lain.
• skrip taip: Menambahkan Penaipan pada kod sumber kami.

Persediaan kami akan mengendalikan penghalaan dengan ekspres untuk menyampaikan fail statik, fail awam dan API REST. Kemudian kendalikan semua permintaan dengan react-router-dom. Sebaik sahaja dimuatkan dalam penyemak imbas bungkusan pelanggan kami akan menghidratkan kandungan pra-diberikan kami dan menjadikan komponen kami interaktif. Berikut ialah perwakilan gambarajah idea ini:

Rajah menggambarkan cara apl ekspres akan mengendalikan permintaan dengan pra-pemarahan komponen React pada pelayan dan mengembalikan HTML. Di sisi pelanggan, React menghidratkan komponen yang telah diberikan ini untuk membolehkan interaktiviti.

Dengan mengambil kira gambar rajah ini, mari buat struktur folder:

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

Mari tambah kebergantungan kami dan sediakan pakej kami.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"
  }
}

Nota: sifat "type": "module" diperlukan untuk membenarkan node.js menjalankan skrip ESM.

Memandangkan kami akan menggunakan Typescript, Kami akan mengkonfigurasi fail 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"
  ]
}

Mengkonfigurasi esbuild

Kenapa esbuild? berbanding dengan alatan lain esbuild mengekalkan perkara yang minimum, ia sangat pantas (pengikat terpantas setakat hari ini) dan menyokong skrip taip dan esm secara lalai.

Dalam persediaan ini, kami akan menggunakan esbuild untuk mencipta skrip pembangun dan membina kami serta mentranspile kedua-dua berkas klien dan pelayan. Dalam bahagian ini kami akan bekerja dalam folder skrip ruang kerja kami.

scripts/config.js: Fail ini akan mengandungi konfigurasi asas untuk bundle klien dan pelayan yang akan dikongsi untuk skrip kami.

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

skrip/dev.js: Skrip ini menggabungkan kedua-dua klien dan apl pelayan serta menjalankan skrip pelayan utama dalam mod tontonan.

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

Dengan skrip ini, kita sepatutnya dapat menjalankan npm run dev seperti yang dikonfigurasikan dalam package.json dalam ruang kerja kita.

scripts/build.js: Sama seperti dev tetapi kami hanya perlu mendayakan 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"
  }
}

Skrip ini akan menjana berkas dist kami yang sedia untuk pengeluaran dengan menjalankan binaan npm run dan menjalankan apl menggunakan npm start.

Sekarang kami telah mengkonfigurasi esbuild untuk menggabungkan kedua-dua nod kami dan apl pelanggan kami, mari mula mencipta pelayan ekspres dan melaksanakan React SSR.

Apl Ekspres dan Penghalaan

Ini ialah aplikasi mudah menggunakan pendekatan statik dan middleware Express untuk menyampaikan fail statik, mengendalikan laluan pelayan dan laluan menggunakan react-router-dom.

src/main.tsx: Ini ialah aplikasi Node.js utama yang memulakan pelayan, mengendalikan laluan dengan Express dan melaksanakan 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"
  ]
}

Apl React

Apl react akan mengendalikan laluan menggunakan react-router-dom, aplikasi kami akan terdiri daripada halaman Utama dan halaman NotFound untuk menguji penghidratan, kami akan menambah butang kaunter pada halaman utama dan mengambil kesempatan daripada React 19 kami akan kemas kini tajuk dan penerangan tag meta.

src/App/Home.tsx: FunctionComponent yang sangat minimum.

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: Default FunctionComponent apabila halaman tidak ditemui.

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: Sediakan Apl kami menggunakan 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();

Lari

Akhir sekali, dengan skrip esbuild dikonfigurasikan, pelayan ekspres disediakan dan SSR bertindak balas dilaksanakan. kami boleh menjalankan pelayan kami:

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(
    
      
        <meta charset="UTF-8">
        <link rel="stylesheet" href="%7B%60/static/style.css%60%7D">
      
      
        <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></app>
  </browserrouter>
);

Ini akan menunjukkan mesej [apl] mendengar pada port 3000. navigasi ke
http://localhost:3000 untuk menyemaknya.

Menguji teg meta SSR dan SEO:

Anda juga boleh mencari kod sumber tutorial ini dalam repo willyelm/react-app saya

willyelm / react-app

Persediaan apl reaksi mudah dengan SSR dan esbuild

Projek ini memanfaatkan ciri terkini react@19, react-router-dom@7 dan lain-lain untuk mengkonfigurasi SSR.

Tanggungan

• bertindak balas: Pustaka UI berasaskan komponen dan interaktif.
• react-dom: Menghidrat kandungan SSR dengan fungsi React.
• react-router-dom: Kendalikan Laluan dengan React.
• ekspresi: Pelayan ringkas Node.js untuk API statik dan REST.
• esbuild: Skrip Jenis Transile dan berkas JS, CSS, SVG dan fail lain.
• skrip taip: Menambahkan Penaipan pada kod sumber kami.

Struktur Projek

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

…

Lihat di GitHub

Langkah Seterusnya

Dalam panduan ini, kami membina apl React dengan SSR menggunakan esbuild dan Express, memfokuskan pada persediaan yang minimum dan fleksibel. Menggunakan alatan moden seperti React 19, React Router DOM 7 dan esbuild, kami mencapai aliran kerja yang pantas dan cekap sambil mengelakkan overhed rangka kerja yang lebih besar.

Kami boleh meningkatkan pelaksanaan ini untuk memasukkan perkara berikut:

• TailwindCSS: Konfigurasikan PostCSS dan esbuild untuk menyokong tailwindcss untuk penggayaan.
• Jest: Tambahkan ujian unit dengan Jest dan @testing-library.
• Penulis drama: Konfigurasikan ujian End to End dengan penulis drama.
• SSG: Laksanakan SSG(Penjanaan tapak statik) untuk meningkatkan prestasi dan pemuatan pelayan.
• HMR: Sokong HMR(Penggantian Modul Panas) dengan esbuild dalam mod pembangunan untuk meningkatkan kecekapan.

Terima kasih kerana membaca dan selamat mengekod.

Rujukan

• React 19
• DOM Penghala Reaksi
• Bertindak balas SSR
• Express.js
• Skrip Jenis
• esbuild