TL;DR: Schauen Sie sich Tuono an und erleben Sie ein Framework-ähnliches Erlebnis, mit dem Sie React auf einem Multithread-Rust-Server ausführen können. Weitere Details finden Sie weiter unten.
Hier gelangen Sie zum vollständigen Projekt.
In diesem Beispiel verwenden wir Vite.js, um das Projekt einzurichten und den React-Quellcode zu kompilieren.
npm create vite@latest react-rust -- --template react-ts
Das initialisierte Projekt ist ausschließlich für clientseitige Anwendungen konzipiert. Im folgenden Abschnitt werden wir untersuchen, was erforderlich ist, um es für die Full-Stack-Bündelung anzupassen.
React erfordert zwei unterschiedliche Builds, die auf unterschiedliche Umgebungen zugeschnitten sind:
Was unterscheidet diese beiden Ausgänge?
Der Client-Build umfasst die gesamte Hydratationslogik und ermöglicht es React, sich nahtlos mit dem vom Server generierten HTML zu verbinden. Im Gegensatz dazu ist der Server-Build eine schlankere Version, die sich ausschließlich auf die Darstellung von HTML basierend auf den vom Server empfangenen Requisiten konzentriert.
Jetzt erstellen wir eine neue Datei mit dem Namen ./src/server.tsx, die als Einstiegspunkt für den Server-Build dient, und fügen den folgenden Code ein:
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()],
});
Als nächstes sollten wir ein neues Skript zur Datei package.json hinzufügen.
-- "build": "tsc && vite build", ++ "build": "tsc && vite build && vite build --ssr src/server.tsx",
Für dieses Beispiel verwenden wir axum, ein Web-Framework, das auf tokio basiert.
Um zu beginnen, richten wir das Rust-Projekt ein, indem wir im Hauptverzeichnis eine Cargo.toml-Datei erstellen, die die folgenden Details enthält:
[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"]}
Dies ist das Rust-Manifest – ziemlich ähnlich der JavaScript-Datei package.json.
Als nächstes richten wir eine Datei mit dem Namen src/server/server.rs ein, die als Einstiegspunkt für den Start des Rust-Servers dient.
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())
}
Hier entfaltet sich die Magie. Zu Beginn des Programms initialisieren wir die JavaScript V8-Engine mit Ssr::create_platform(); Als nächstes erstellen wir in jedem Thread einen V8-Kontext mit thread_local!. Abschließend rendern wir den HTML-Code mit SSR.with(|ssr| ssr.borrow_mut().render_to_string(None)); und senden Sie es an den Client, wenn die Route http://localhost:3000/ angefordert wird.
Um den Server zu starten, kompilieren Sie einfach die Assets mit Vite und starten Sie dann den Rust-Server.
npm run build && cargo run
? Sie führen eine Full-Stack-React-Anwendung über einen Rust-Server aus. Schließlich läuft React auf einem Multithread-Server (einige Benchmarks finden Sie hier).
Das Verwalten einer Full-Stack-React-Anwendung ist mit Node.js nicht einfach, da im Laufe der Zeit zahlreiche Tools entwickelt wurden, um sie zu unterstützen, und wie Sie bei Rust sehen konnten, ist es sogar noch schwieriger.
Tuono ist ein experimentelles Full-Stack-Framework, das darauf abzielt, die Entwicklung leistungsstarker Rust-Anwendungen zu vereinfachen, wobei der Schwerpunkt sowohl auf Benutzerfreundlichkeit als auch auf Geschwindigkeit liegt.
Das obige ist der detaillierte Inhalt vonSchritt-für-Schritt-Anleitung zum serverseitigen Render React mit Rust. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
