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
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1382
52
Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri?
Mar 18, 2025 pm 03:12 PM
Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.
Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas?
Mar 18, 2025 pm 03:14 PM
Artikel ini membincangkan strategi untuk mengoptimumkan prestasi JavaScript dalam pelayar, memberi tumpuan kepada mengurangkan masa pelaksanaan dan meminimumkan kesan pada kelajuan beban halaman.
Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan?
Apr 04, 2025 pm 02:42 PM
Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...
Bagaimanakah saya boleh debug kod javascript dengan berkesan menggunakan alat pemaju pelayar?
Mar 18, 2025 pm 03:16 PM
Artikel ini membincangkan debugging JavaScript yang berkesan menggunakan alat pemaju pelayar, memberi tumpuan kepada menetapkan titik putus, menggunakan konsol, dan menganalisis prestasi.
Siapa yang dibayar lebih banyak Python atau JavaScript?
Apr 04, 2025 am 12:09 AM
Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.
Bagaimanakah saya menggunakan peta sumber untuk debug kod JavaScript minified?
Mar 18, 2025 pm 03:17 PM
Artikel ini menerangkan cara menggunakan peta sumber untuk debug JavaScript minifikasi dengan memetakannya kembali ke kod asal. Ia membincangkan membolehkan peta sumber, menetapkan titik putus, dan menggunakan alat seperti Chrome Devtools dan Webpack.
Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript?
Apr 04, 2025 pm 05:09 PM
Bagaimana cara menggabungkan elemen array dengan ID yang sama ke dalam satu objek dalam JavaScript? Semasa memproses data, kita sering menghadapi keperluan untuk mempunyai id yang sama ...
Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza?
Apr 04, 2025 pm 05:12 PM
Perbincangan mendalam mengenai punca-punca utama perbezaan dalam output konsol.log. Artikel ini akan menganalisis perbezaan hasil output fungsi Console.log dalam sekeping kod dan menerangkan sebab -sebab di belakangnya. � ...
