Panduan untuk Rendering Sisi Pelayan (SSR) dengan Vite dan React.js

Mari kita mendalami konsep pemaparan sisi pelayan (SSR) dan cara ia boleh meningkatkan pengalaman pengguna aplikasi web anda.

Konsep Rendering Sebelah Pelayan

Apabila pengguna melawat tapak web anda, mereka biasanya menerima HTML kosong pada mulanya, yang kemudian mencetuskan pemuatan aset tambahan seperti JavaScript (cth., App.js) dan CSS (cth., style.css). Pendekatan tradisional ini, sering dirujuk sebagai pemaparan sisi klien, bermakna pengguna mesti menunggu sumber ini untuk memuat turun dan melaksanakan sebelum melihat sebarang kandungan yang bermakna. Kelewatan ini boleh membawa kepada pengalaman pengguna yang tidak optimum, terutamanya untuk pengguna pada sambungan atau peranti yang perlahan.

Perenderan sisi pelayan menangani isu ini dengan menghantar halaman HTML yang diberikan sepenuhnya kepada pengguna sebagai tindak balas kepada permintaan awal mereka. HTML pra-diberikan ini termasuk penanda lengkap, membolehkan pengguna melihat kandungan serta-merta tanpa menunggu JavaScript dimuatkan dan dilaksanakan.

Faedah utama SSR termasuk:

• Masa Dikurangkan kepada Cat Kandungan Terbesar (LCP): Pengguna melihat kandungan dengan lebih pantas kerana pelayan menghantar dokumen HTML yang lengkap.

• SEO dipertingkatkan: Enjin carian boleh mengindeks kandungan anda dengan lebih berkesan memandangkan kandungan tersebut tersedia dalam HTML.

• Pengalaman Pengguna Awal yang Lebih Baik: Pengguna boleh mula membaca dan berinteraksi dengan kandungan lebih awal, yang membawa kepada kadar penglibatan yang lebih tinggi.

Mengimbangi Metrik Prestasi

Walaupun SSR boleh mengurangkan LCP, ia mungkin meningkatkan masa Interaksi ke Cat Seterusnya (INP). Ini ialah masa yang diperlukan untuk pengguna berinteraksi dengan halaman selepas ia dimuatkan. Matlamatnya adalah untuk memastikan bahawa pada masa pengguna memutuskan untuk berinteraksi dengan tapak, seperti mengklik butang, JavaScript yang diperlukan telah dimuatkan di latar belakang, menjadikan interaksi lancar dan lancar.

Pelaksanaan SSR yang lemah boleh membawa kepada senario di mana pengguna melihat kandungan tetapi tidak dapat berinteraksi dengannya kerana JavaScript belum dimuatkan lagi. Ini boleh menjadi lebih mengecewakan daripada menunggu seluruh halaman dimuatkan pada mulanya. Oleh itu, adalah penting untuk memantau dan mengukur metrik prestasi secara berterusan untuk memastikan SSR benar-benar meningkatkan pengalaman pengguna.

Menyediakan SSR dalam Vite dan React.js

Kami akan membahagikan perkara ini kepada beberapa langkah:

1. Buat Komponen ClientApp
2. Kemas kini index.html
3. Buat Komponen ServerApp
4. Sediakan Skrip Binaan
5. Konfigurasikan Pelayan Nod

1. Buat Komponen ClientApp

Kami akan mulakan dengan mencipta fail ClientApp.jsx, yang akan mengendalikan semua fungsi khusus penyemak imbas.

// ClientApp.jsx
import { hydrateRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

Di sini, kami mengimport hydrateRoot daripada react-dom/client, BrowserRouter daripada react-router-dom dan komponen Apl utama kami.

// ClientApp.jsx
// Hydrate the root element with our app
hydrateRoot(document.getElementById('root'), 
  <browserrouter>
    <app></app>
  </browserrouter>
);

Kami menggunakan hydrateRoot untuk memaparkan apl kami pada bahagian pelanggan, menyatakan elemen akar dan membungkus Apl kami dengan BrowserRouter. Persediaan ini memastikan semua kod khusus penyemak imbas kekal di sini.

Seterusnya, kami perlu mengubah suai App.jsx kami.

// App.jsx
import React from 'react';

// Exporting the App component
export default function App() {
  return (
    <div>
      <h1 id="Welcome-to-My-SSR-React-App">Welcome to My SSR React App!</h1>
    </div>
  );
}

Di sini, kami memastikan komponen Apl kami mudah untuk tujuan demonstrasi. Kami mengeksportnya supaya ia boleh digunakan dalam kedua-dua persekitaran pelanggan dan pelayan.

2. Kemas kini index.html

Seterusnya, kami perlu mengemas kini index.html untuk memuatkan ClientApp.jsx dan bukannya App.jsx dan juga menambah token parsing untuk memisahkan fail HTML dalam pelayan, supaya kami boleh menstrim kandungan dalam div akar.

  
    <meta charset="UTF-8">
    <link rel="icon" type="image/svg+xml" href="./vite.svg">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite + React + TS</title>
  
  
    <div id="root"><!--not rendered--></div>
    <script type="module" src="./src/ClientApp.jsx"></script>
  

3. Buat Komponen ServerApp

Sekarang, mari buat fail ServerApp.jsx untuk mengendalikan logik pemaparan sebelah pelayan.

// ServerApp.jsx
import { renderToPipeableStream } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom/server';
import App from './App';

// Export a function to render the app
export default function render(url, opts) {
  // Create a stream for server-side rendering
  const stream = renderToPipeableStream(
    <staticrouter location="{url}">
      <app></app>
    </staticrouter>,
    opts
  );

  return stream;
}

4. Sediakan Skrip Binaan

Kami perlu mengemas kini skrip binaan kami dalam package.json untuk membina bundle klien dan pelayan.

{
  "scripts": {
    "build:client": "tsc vite build --outDir ../dist/client",
    "build:server": "tsc vite build --outDir ../dist/server --ssr ServerApp.jsx",
    "build": "npm run build:client && npm run build:server",
    "start": "node server.js"
  },
  "type": "module"
}

Di sini, kami mentakrifkan skrip binaan yang berasingan untuk klien dan pelayan. Skrip build:client membina bundle klien, manakala skrip build:server membina bundle pelayan menggunakan ServerApp.jsx. Skrip binaan menjalankan kedua-dua langkah binaan dan skrip mula menjalankan pelayan menggunakan server.js (yang akan dibuat dalam langkah seterusnya).

∴ Alih keluar tsc daripada binaan klien dan pelayan jika anda tidak menggunakan TypeScript.

5. Konfigurasikan Pelayan Nod

Akhir sekali, mari kita konfigurasi pelayan Nod kami dalam server.js.

// server.js
import express from 'express';
import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';
import renderApp from './dist/server/ServerApp.js';

const __dirname = path.dirname(fileURLToPath(import.meta.url));
const PORT = process.env.PORT || 3001;

// Read the built HTML file
const html = fs.readFileSync(path.resolve(__dirname, './dist/client/index.html')).toString();
const [head, tail] = html.split('<!--not rendered-->');

const app = express();

// Serve static assets
app.use('/assets', express.static(path.resolve(__dirname, './dist/client/assets')));

// Handle all other routes with server-side rendering
app.use((req, res) => {
  res.write(head);

  const stream = renderApp(req.url, {
    onShellReady() {
      stream.pipe(res);
    },
    onShellError(err) {
      console.error(err);
      res.status(500).send('Internal Server Error');
    },
    onAllReady() {
      res.write(tail);
      res.end();
    },
    onError(err) {
      console.error(err);
    }
  });
});

app.listen(PORT, () => {
  console.log(`Listening on http://localhost:${PORT}`);
});

In this file, we set up an Express server to handle static assets and server-side rendering. We read the built index.html file and split it into head and tail parts. When a request is made, we immediately send the head part, then pipe the stream from renderApp to the response, and finally send the tail part once the stream is complete.

By following these steps, we enable server-side rendering in our React application, providing a faster and more responsive user experience. The client receives a fully rendered page initially, and the JavaScript loads in the background, making the app interactive.

Conclusion

By implementing server-side rendering (SSR) in our React application, we can significantly improve the initial load time and provide a better user experience. The steps involved include creating separate components for client and server rendering, updating our build scripts, and configuring an Express server to handle SSR. This setup ensures that users receive a fully rendered HTML page on the first request, while JavaScript loads in the background, making the application interactive seamlessly. This approach not only enhances the perceived performance but also provides a robust foundation for building performant and scalable React applications.

Atas ialah kandungan terperinci Panduan untuk Rendering Sisi Pelayan (SSR) dengan Vite dan React.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!