Rumah >hujung hadapan web >tutorial js >Panduan Langkah demi Langkah untuk Render Sisi Pelayan Bertindak balas dengan Rust

Panduan Langkah demi Langkah untuk Render Sisi Pelayan Bertindak balas dengan Rust

DDDasal: 2024-12-04 02:18:10647semak imbas

Step-by-Step Guide to Server-Side Render React with Rust

TL;DR: Lihat Tuono untuk pengalaman seperti rangka kerja yang membolehkan anda menjalankan React pada pelayan Rust berbilang benang. Anda boleh mendapatkan butiran lanjut di bawah.

Akses projek lengkap di sini.

Keperluan

Node.js (digunakan hanya untuk membina projek dengan vite)
NPM (pengurus pakej nod)
Rustup (rantai alat bahasa Karat)
Kargo (Pengurus pakej Karat)

Bermula

Untuk contoh ini, kami akan menggunakan Vite.js untuk menyediakan projek dan menyusun kod sumber React.

npm create vite@latest react-rust -- --template react-ts

Projek yang dimulakan direka untuk aplikasi pihak pelanggan secara eksklusif. Dalam bahagian berikut, kami akan meneroka perkara yang perlu untuk menyesuaikannya untuk himpunan tindanan penuh.

Persediaan bertindak balas

React memerlukan dua binaan berbeza yang disesuaikan untuk persekitaran berbeza:

Binaan sebelah pelanggan
Binaan sebelah pelayan

Apakah yang membezakan kedua-dua keluaran ini?

Binaan klien menggabungkan semua logik penghidratan, membolehkan React menyambung dengan lancar dengan HTML yang dijana oleh pelayan. Sebaliknya, binaan pelayan ialah versi yang lebih diperkemas yang tertumpu semata-mata pada pemaparan HTML berdasarkan prop yang diterima daripada pelayan.

Sekarang, mari buat fail baharu bernama ./src/server.tsx, yang akan berfungsi sebagai titik masuk untuk binaan pelayan dan masukkan kod berikut:

import "fast-text-encoding"; // Mandatory for React18
import { renderToString } from "react-dom/server";
import App from "./App";

export const Server = () => {
    const app = renderToString(<App />);
    return `<!doctype html>
<html>
    <head>
        <title>React + Rust = ❤️</title>
        <script type="module" crossorigin src="/index.js"></script>
    </head>
    <body>
        <div>



<blockquote>
<p>If you're working with React 18 or a newer version, it's essential to run npm install fast-text-encoding. This step is necessary because the Rust server lacks the Node.js objects and functions and the Web APIs. As a result, we need to provide a polyfill for TextEncoder, which is required by react-dom/server (in fact it is declared beforehand).</p>
</blockquote>

<p>We need to modify the vite.config.ts file to include the two outputs:<br>
</p>

<pre class="brush:php;toolbar:false">import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        format: "iife",
        dir: "dist/",
      },
    },
  },
  ssr: {
    target: "webworker",
    noExternal: true,
  },
  plugins: [react()],
});

Seterusnya, kita harus menambah skrip baharu dalam fail package.json.

-- "build": "tsc && vite build",
++ "build": "tsc && vite build && vite build --ssr src/server.tsx",

Sediakan pelayan Rust

Untuk contoh ini, kami akan menggunakan axum, rangka kerja web yang berfungsi di atas tokio.

Untuk bermula, mari sediakan projek Rust dengan mencipta fail Cargo.toml dalam direktori utama, yang mengandungi butiran berikut:

[package]
name = "react-rust-ssr-example"
version = "0.1.0"
edition = "2021"

[[bin]]
name = "ssr"
path = "src/server/server.rs"

[dependencies]
ssr_rs="0.7.0"
tokio = { version = "1", features = ["full"] }
axum = "0.7.4"
tower-http = {version = "0.6.0", features = ["fs"]}

Ini ialah manifes Rust - hampir serupa dengan fail package.json JavaScript.

Seterusnya, kami akan menyediakan fail bernama src/server/server.rs, yang akan berfungsi sebagai titik masuk untuk melancarkan pelayan Rust.

use axum::{response::Html, routing::get, Router};
use ssr_rs::Ssr;
use std::cell::RefCell;
use std::fs::read_to_string;
use std::path::Path;
use tower_http::services::ServeDir;

thread_local! {
    static SSR: RefCell<Ssr<'static, 'static>> = RefCell::new(
            Ssr::from(
                read_to_string(Path::new("./dist/server.js").to_str().unwrap()).unwrap(),
                ""
                ).unwrap()
            )
}

#[tokio::main]
async fn main() {
    Ssr::create_platform();
    // build our application with a single route
    let app = Router::new()
        .route("/", get(root))
        .fallback_service(ServeDir::new("dist"));

    // run our app with hyper, listening globally on port 3000
    let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
    axum::serve(listener, app).await.unwrap();
}

async fn root() -> Html<String> {
    let result = SSR.with(|ssr| ssr.borrow_mut().render_to_string(None));
    Html(result.unwrap())
}

Di sinilah keajaiban berlaku. Pada permulaan program, kami memulakan sesuatu dengan memulakan enjin JavaScript V8 dengan Ssr::create_platform(); Seterusnya, kami mencipta konteks V8 dalam setiap utas menggunakan thread_local!. Akhir sekali, kami memberikan HTML dengan SSR.with(|ssr| ssr.borrow_mut().render_to_string(None)); dan hantarkannya kepada pelanggan apabila laluan http://localhost:3000/ diminta.

Jalankan pelayan

Untuk memulakan pelayan, cuma kumpulkan aset dengan Vite dan kemudian lancarkan pelayan Rust.

npm run build && cargo run

? Anda menjalankan aplikasi React timbunan penuh menggunakan pelayan Rust. Akhirnya, React berjalan dalam pelayan berbilang benang (anda boleh menemui beberapa penanda aras di sini).

Kata akhir

Mengurus aplikasi React tindanan penuh bukanlah mudah dengan Node.js kerana banyak alatan telah dibina lebih masa untuk menyokongnya, dan seperti yang anda lihat dengan Rust, ia lebih sukar.

Tuono ialah rangka kerja tindanan penuh percubaan yang bertujuan untuk memudahkan pembangunan aplikasi Rust berprestasi tinggi, dengan tumpuan yang kuat pada kebolehgunaan dan kelajuan.

Atas ialah kandungan terperinci Panduan Langkah demi Langkah untuk Render Sisi Pelayan Bertindak balas dengan Rust. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript rust json html npm for Directory thread_local using finally Thread JS this http Access

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimanakah Saya Menyalurkan Argumen kepada Skrip npm?Artikel seterusnya：Bagaimanakah Saya Menyalurkan Argumen kepada Skrip npm?

Artikel berkaitan

Lihat lagi