使用 Rust 進行伺服器端渲染 React 的逐步指南

TL;DR: 查看 Tuono 以獲得類似框架的體驗，它允許您在多執行緒 Rust 伺服器上執行 React。您可以在下面找到更多詳細資訊。

在此處存取完整的項目。

要求

• Node.js（僅用於使用 vite 建置專案）
• NPM（節點套件管理器）
• Rustup（Rust 語言工具鏈）
• Cargo（Rust 套件管理器）

入門

在這個範例中，我們將使用 Vite.js 來建立專案並編譯 React 原始碼。

初始化的專案專為客戶端應用程式而設計。在下一節中，我們將探討使其適應全端捆綁的必要條件。

反應設定

React 需要針對不同環境定制的兩個不同的構建：

• 客戶端建置
• 伺服器端建置

這兩個輸出有什麼差別？

客戶端建置包含所有水合邏輯，使 React 能夠與伺服器產生的 HTML 無縫連接。相較之下，伺服器建置是一個更精簡的版本，僅專注於根據從伺服器接收的 props 渲染 HTML。

現在，讓我們建立一個名為 ./src/server.tsx 的新文件，它將作為伺服器建置的入口點，並插入以下程式碼：

接下來，我們應該在 package.json 檔案中新增一個腳本。

準備 Rust 伺服器

在此範例中，我們將使用 axum，一個在 tokio 之上運行的 Web 框架。

首先，讓我們透過在主目錄中建立 Cargo.toml 檔案來設定 Rust 項目，其中包含以下詳細資訊：

這是 Rust 清單 - 與 JavaScript package.json 檔案非常相似。

接下來，我們將設定一個名為 src/server/server.rs 的文件，它將作為啟動 Rust 伺服器的入口點。

這就是魔法展現的地方。在程式開始時，我們首先使用 Ssr::create_platform(); 初始化 JavaScript V8 引擎；接下來，我們使用 thread_local! 在每個執行緒中建立一個 V8 上下文。最後，我們使用 SSR.with(|ssr| ssr.borrow_mut().render_to_string(None)); 渲染 HTML並在請求路由 http://localhost:3000/ 時發送給客戶端。

運行伺服器

要啟動伺服器，只需使用 Vite 編譯資產，然後啟動 Rust 伺服器即可。

？ 您正在使用 Rust 伺服器執行全端 React 應用程式。最後，React 在多執行緒伺服器中運行（您可以在此處找到一些基準測試）。

最後的話

使用 Node.js 管理全端 React 應用程式並不容易，已經有許多工具被加班建置來支援它，而正如您所看到的，使用 Rust 則更加困難。

Tuono 是一個實驗性全端框架，旨在簡化高效能 Rust 應用程式的開發，重點在於可用性和速度。

以上是使用 Rust 進行伺服器端渲染 React 的逐步指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！