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

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></app>);
    return `

    
        <title>React + Rust = ❤️</title>
        <script type="module" crossorigin src="/index.js"></script>
    
    
        <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>> = 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())
}

</string></ssr>

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

サーバーを実行する

サーバーを起動するには、Vite でアセットをコンパイルし、Rust サーバーを起動するだけです。

npm run build && cargo run

? Rust サーバーを使用してフルスタックの React アプリケーションを実行しています。最後に、React はマルチスレッド サーバー内で実行されます (ここでいくつかのベンチマークを見つけることができます)。

最後の言葉

Node.js ではフルスタックの React アプリケーションを管理するのは簡単ではありません。これをサポートするために多くのツールが時間をかけて構築されていますが、Rust の場合はさらに困難です。

Tuono は、使いやすさと速度の両方に重点を置き、高性能 Rust アプリケーションの開発を簡素化することを目的とした実験的なフルスタック フレームワークです。