首頁 > web前端 > js教程 > 使用 Rust 進行伺服器端渲染 React 的逐步指南

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

DDD
發布: 2024-12-04 02:18:10
原創
686 人瀏覽過

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

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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板