Menguasai Perenderan Sisi Pelayan (SSR) dalam React dengan Vite: Panduan Terbaik untuk Pembangun-tutorial js-php.cn

Menguasai Perenderan Sisi Pelayan (SSR) dalam React dengan Vite: Panduan Terbaik untuk Pembangun

DDD

Lepaskan： 2024-12-25 19:24:10

asal

556 orang telah melayarinya

Mastering Server-Side Rendering (SSR) in React with Vite: The Ultimate Guide for Developers

React sentiasa menjadi pengubah permainan dalam pembangunan bahagian hadapan, dan dengan keluaran React 19, ia menjadi lebih berkuasa dan cekap. Dalam blog ini, kami akan menyelidiki pemaparan sisi pelayan (SSR) dalam React 19 menggunakan Vite, alat binaan yang sangat pantas. Sama ada anda seorang pemula atau pembangun lanjutan, panduan ini direka untuk menjadikan SSR mudah didekati dan boleh diambil tindakan.

Apa yang Baharu dalam React 19?

React 19 memperkenalkan beberapa kemas kini penting:

Komponen Pelayan yang Diperbaiki: Cara baharu untuk membina aplikasi dengan penyepaduan lancar komponen yang diberikan pelayan dan yang diberikan oleh pelanggan.
Penstriman Rendering: Prestasi dipertingkatkan melalui keupayaan React untuk menstrim kandungan ke penyemak imbas.
Perenderan Serentak: Membolehkan antara muka pengguna yang lebih lancar dengan mengutamakan tugas secara dinamik.

Ciri-ciri ini menjadikan React 19 calon yang ideal untuk melaksanakan SSR dengan alatan moden seperti Vite.

Memahami Rendering Sisi Pelayan (SSR)

Perenderan sisi pelayan melibatkan pemaparan komponen React pada pelayan dan menghantar HTML kepada klien. Tidak seperti pemaparan sisi klien (CSR), di mana penyemak imbas mengendalikan pemaparan, SSR menyediakan:

Muatan Awal yang Lebih Cepat: Penyemak imbas menerima halaman HTML yang dipaparkan sepenuhnya.
Faedah SEO: Kandungan tersedia untuk perangkak enjin carian serta-merta.
Pengalaman Pengguna yang Dipertingkat: Pengguna melihat kandungan lebih cepat, walaupun pada sambungan yang lebih perlahan.

Bagaimanakah SSR Berfungsi dalam React 19?

Dengan penstriman React 19 dan ciri serentak, SSR menjadi lebih cekap. Komponen distrim apabila ia sedia, mengurangkan masa tindak balas pelayan dan meningkatkan interaktiviti.

Mengapa Menggunakan Vite untuk SSR?

Vite ialah alat binaan moden yang terkenal dengan kelajuan dan kesederhanaannya. Dengan ciri canggihnya seperti resolusi modul pantas dan penggantian modul panas (HMR), Vite ialah pilihan terbaik untuk menyepadukan SSR dalam projek React 19.

Faedah Utama Vite dalam SSR:

Binaan Sepantas Kilat: Aliran kerja pembangunan dan pengeluaran yang dioptimumkan.
Konfigurasi Mudah: Persediaan plat dandang minimum.
Sokongan Asli untuk React: Sokongan terbina dalam untuk JSX, TypeScript dan perpustakaan moden.
Seni Bina Boleh Skala: Mengendalikan projek besar dengan cekap.

Panduan Langkah demi Langkah untuk Menyediakan SSR dalam React 19 dengan Vite

Mari bina apl React 19 yang didayakan SSR dengan Vite dari awal. Ikuti langkah ini untuk bermula:

1. Mulakan Projek

npm create vite@latest my-react-ssr-app --template react
cd my-react-ssr-app
npm install

Salin selepas log masuk

2. Pasang Ketergantungan yang Diperlukan

npm install express @vitejs/plugin-react react-dom/server

Salin selepas log masuk

3. Sediakan Konfigurasi Vite

Edit vite.config.js untuk mendayakan SSR:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    ssr: true,
    rollupOptions: {
      input: './server/index.js',
    },
  },
});

Salin selepas log masuk

4. Buat Komponen Reaksi Mudah

Buat src/App.jsx:

function App() {
  return (
    <div>
      <h1>Welcome to React 19 SSR with Vite</h1>
      <p>This page is server-side rendered!</p>
    </div>
  );
}
export default App;

Salin selepas log masuk

5. Sediakan Pelayan Ekspres

Buat pelayan/index.js:

import express from 'express';
import { renderToString } from 'react-dom/server';
import App from '../src/App';

const app = express();

app.use('/static', express.static('dist'));

app.get('*', (req, res) => {
  const appHtml = renderToString(<App />);

  const html = `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>React 19 SSR with Vite</title>
    </head>
    <body>
      <div>



<h3>
  
  
  6. Build and Run
</h3>

<p>To build and serve your SSR app:<br>
</p>

<pre class="brush:php;toolbar:false">npm run build
node server/index.js

Salin selepas log masuk

Lawati http://localhost:3000 untuk melihat apl SSR React anda sedang beraksi.

Contoh dan Amalan Terbaik

Contoh SSR penstriman

React 19's renderToPipeableStream membenarkan penstriman:

import { renderToPipeableStream } from 'react-dom/server';

app.get('*', (req, res) => {
  const stream = renderToPipeableStream(<App />, {
    onShellReady() {
      res.status(200).setHeader('Content-Type', 'text/html');
      stream.pipe(res);
    },
    onError(err) {
      console.error(err);
      res.status(500).send('Internal Server Error');
    },
  });
});

Salin selepas log masuk

Pendekatan ini menjadikan kandungan secara progresif, meningkatkan prestasi.

Pertimbangan SEO

Gunakan tag untuk penerangan dan kata kunci.
Laksanakan peta laman untuk halaman dinamik.

Nota dan Petua

Sentiasa uji prestasi SSR menggunakan alatan seperti Rumah Api.
Pastikan logik pelayan minimum untuk memastikan kebolehskalaan.
Gunakan pembolehubah persekitaran untuk mengurus data sensitif.

Kesimpulan

Dengan ciri lanjutan React 19 dan keupayaan binaan moden Vite, pemaparan bahagian pelayan menjadi lancar dan cekap. Sama ada anda mengoptimumkan SEO atau meningkatkan pengalaman pengguna, SSR dengan React 19 dan Vite ialah gabungan yang menang.

Seronok membaca? Jika anda mendapati artikel ini bernas atau membantu, pertimbangkan untuk menyokong kerja saya dengan membelikan saya kopi. Sumbangan anda membantu memacu lebih banyak kandungan seperti ini. Klik di sini untuk menjamu saya dengan kopi maya. Ceria!

Atas ialah kandungan terperinci Menguasai Perenderan Sisi Pelayan (SSR) dalam React dengan Vite: Panduan Terbaik untuk Pembangun. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!