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.
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.
React memerlukan dua binaan berbeza yang disesuaikan untuk persekitaran berbeza:
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",
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.
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).
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
