Rust を使用したサーバーサイドレンダー React のステップバイステップガイド-jsチュートリアル-php.cn

Rust を使用したサーバーサイドレンダー React のステップバイステップガイド

DDD

リリース： 2024-12-04 02:18:10

オリジナル

642 人が閲覧しました

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

TL;DR: マルチスレッド Rust サーバー上で React を実行できるフレームワークのようなエクスペリエンスについては、Tuono をチェックしてください。詳細については以下をご覧ください。

ここから完全なプロジェクトにアクセスしてください。

要件

Node.js (vite でプロジェクトをビルドするためにのみ使用)
NPM (ノードパッケージマネージャー)
Rustup (Rust 言語ツールチェーン)
Cargo (Rust パッケージマネージャー)

はじめる

この例では、Vite.js を使用してプロジェクトをセットアップし、React ソースコードをコンパイルします。

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

ログイン後にコピー

初期化されたプロジェクトは、クライアント側アプリケーション専用に設計されています。次のセクションでは、フルスタックバンドルに適応させるために何が必要かを検討します。

反応のセットアップ

React には、異なる環境に合わせて調整された 2 つの異なるビルドが必要です。

クライアント側のビルド
サーバー側のビルド

これら 2 つの出力の違いは何ですか?

クライアントビルドにはすべてのハイドレーションロジックが組み込まれており、React がサーバーによって生成された HTML にシームレスに接続できるようになります。対照的に、サーバービルドは、サーバーから受信した props に基づいて HTML をレンダリングすることだけに焦点を当てた、より合理化されたバージョンです。

次に、サーバービルドのエントリポイントとして機能する ./src/server.tsx という名前の新しいファイルを作成し、次のコードを挿入しましょう。

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()],
});

ログイン後にコピー

次に、package.json ファイルに新しいスクリプトを追加する必要があります。

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

ログイン後にコピー

Rustサーバーを準備する

この例では、tokio 上で動作する Web フレームワークである axum を使用します。

まず、メインディレクトリに次の詳細を含む Cargo.toml ファイルを作成して、Rust プロジェクトをセットアップしましょう。

[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"]}

ログイン後にコピー

これは Rust マニフェストです - JavaScript の package.json ファイルによく似ています。

次に、src/server/server.rs という名前のファイルを設定します。これは、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())
}

ログイン後にコピー

ここで魔法が繰り広げられます。プログラムの開始時に、Ssr::create_platform(); を使用して JavaScript V8 エンジンを初期化することで作業を開始します。次に、thread_local! を使用して各スレッドに V8 コンテキストを作成します。最後に、SSR.with(|ssr| ssr.borrow_mut().render_to_string(None)); を使用して HTML をレンダリングします。ルート http://localhost:3000/ が要求されたときに、それをクライアントに送信します。