Web-Frontend
js-Tutorial
Schritt-für-Schritt-Anleitung zum serverseitigen Render React mit Rust
Schritt-für-Schritt-Anleitung zum serverseitigen Render React mit Rust
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.
Anforderungen
- Node.js (wird nur zum Erstellen des Projekts mit Vite verwendet)
- NPM (Knotenpaketmanager)
- Rustup (Rust-Sprach-Toolchain)
- Fracht (Rust-Paketmanager)
Erste Schritte
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.
Reaktionssetup
React erfordert zwei unterschiedliche Builds, die auf unterschiedliche Umgebungen zugeschnitten sind:
- Der clientseitige Build
- Der serverseitige Build
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",
Bereiten Sie den Rust-Server vor
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.
Führen Sie den Server aus
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).
Letzte Worte
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1382
52
Wie erstelle ich meine eigenen JavaScript -Bibliotheken?
Mar 18, 2025 pm 03:12 PM
In Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.
Wie optimiere ich den JavaScript -Code für die Leistung im Browser?
Mar 18, 2025 pm 03:14 PM
In dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.
Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße?
Apr 04, 2025 pm 02:42 PM
Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...
Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools?
Mar 18, 2025 pm 03:16 PM
In dem Artikel werden effektives JavaScript -Debuggen mithilfe von Browser -Entwickler -Tools, der Schwerpunkt auf dem Festlegen von Haltepunkten, der Konsole und der Analyse der Leistung erörtert.
Wer bekommt mehr Python oder JavaScript bezahlt?
Apr 04, 2025 am 12:09 AM
Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.
Wie verwende ich Quellkarten zum Debuggen, um den JavaScript -Code zu debuggen?
Mar 18, 2025 pm 03:17 PM
In dem Artikel wird erläutert, wie Quellkarten zum Debuggen von JavaScript verwendet werden, indem er auf den ursprünglichen Code zurückgegeben wird. Es wird erläutert, dass Quellenkarten aktiviert, Breakpoints eingestellt und Tools wie Chrome Devtools und WebPack verwendet werden.
Wie fusioniere ich Arrayelemente mit derselben ID mit JavaScript in ein Objekt?
Apr 04, 2025 pm 05:09 PM
Wie fusioniere ich Array -Elemente mit derselben ID in ein Objekt in JavaScript? Bei der Verarbeitung von Daten begegnen wir häufig die Notwendigkeit, dieselbe ID zu haben ...
Der Unterschied in der Konsole.log -Ausgabeergebnis: Warum unterscheiden sich die beiden Anrufe?
Apr 04, 2025 pm 05:12 PM
Eingehende Diskussion der Ursachen des Unterschieds in der Konsole.log-Ausgabe. In diesem Artikel wird die Unterschiede in den Ausgabeergebnissen der Konsolenfunktion in einem Code analysiert und die Gründe dafür erläutert. � ...
