2,296 reads

How To Improve React App Performance with SSR and Rust [Part II: Rust Web Server]

by Olex TkachukFebruary 10th, 2020

Too Long; Didn't Read

Rust is the most powerful combination of safety and speed for today. Actix-web framework is the fastest one according TechEmpower Framework Benchmark. Rust is easy to setup Rust on your computer - just go to rustup.rs website and install rustupCLI in just one step. The final article of Server Side Rendering is about testing performance between this solution vs Node.js. You can check how fast this approach is in production by getting Google PageSpeed Insights Performance score for PageSpeed Green website.

Company Mentioned

featured image - How To Improve React App Performance with SSR and Rust [Part II: Rust Web Server]

Continue creating boosted Server Side Rendering implementation. In the first part we prepared ReactJS Application with SSR script that lets choose the best technologies for our Web Server.

Choosing Tech Stack for the SSR Web server

Rust has the most powerful combination of safety and hight speed for today (you can check out here why - www.rust-lang.org). In addition, Actix-web framework is the fastest one according TechEmpower Framework Benchmark.

So, let’s use the best technologies for our forced Web Server.

Setup Rust App

It is easy to setup Rust on your computer - just go to rustup.rs website and install

rustup

CLI in just one step.

Next step is initialisation a new app. Cargo, Rust package manager can help with it: run

cargo init

inside repository folder.

The Cargo.toml file for each package is called its manifest. It contains settings and dependencies. New one should look like that:

[package]
name = "rust-ssr-webserver"
version = "0.1.0"
authors = ["Alex Tkachuk <[email protected]>"]
edition = "2018"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]

Now we can add our dependencies:

actix-web = { version = "^2.0.0", features = ["rustls"] }
actix-rt = "^1.0.0"
actix-files = "^0.2.1"
env_logger = "^0.7.1"
futures = "^0.3.4"
mime_guess = "^2.0.1"
serde_json = "^1.0.40"
lazy_static = "^1.4.0"
rustls = "^0.16.0"

Using actix-web is qute easy to create web server. Firstly, we need to read SSL keys for supporting HTTPS and HTTP/2:

let mut config = ServerConfig::new(NoClientAuth::new());
let cert_file = &mut BufReader::new(File::open("cert.pem").unwrap());
let key_file = &mut BufReader::new(File::open("key.pem").unwrap());
let cert_chain = certs(cert_file).unwrap();
let mut keys = rsa_private_keys(key_file).unwrap();

config.set_single_cert(cert_chain, keys.remove(0)).unwrap();

Be aware of using unwrap() in production - if it fails, the app will crash (panic).

We are ready for actually Web Server code now:

    HttpServer::new(|| {
        App::new()
            .wrap(middleware::Logger::default())
            .service(Files::new("/static", "static"))
            .default_service(
                web::resource("")
                    .route(web::get().to(index))
                    .route(
                        web::route()
                            .guard(guard::Not(guard::Get()))
                            .to(|| HttpResponse::MethodNotAllowed()),
                    ),
            )
    })
    .bind_rustls("0.0.0.0:3001", config)?
    .run()
    .await

This line:

.service(Files::new("/static", "static")

is for serving all static asserts that we created by running

npm build:ssr

in previous article - (How To Improve React App Performance with SSR and Rust
[Part I: SSR]). For handling HTML-files requests from ReactJs App we need to use

.default_service()

with serving all routes by using

web::resource("")

with empty string. The

index

function is handler for such requests:

async fn index(req: HttpRequest) -> impl Responder {
    let path_req = req.match_info().query("tail").get(1..).unwrap_or_default().trim().clone();
    let path = if path_req.len() == 0 {
        "home_page"
    } else {
        match ROUTES.get(path_req) {
            Some(r) => r,
            None => "index"
        }
    };

    match std::fs::File::open(format!("static/{}.html", path)) {
        Ok(mut file) => {
            let mut contents = String::new();
            file.read_to_string(&mut contents).unwrap_or_default();

            HttpResponse::Ok()
                .content_type("text/html; charset=utf-8")
                .header("Cache-Control", "no-cache, no-store, max-age=0, must-revalidate")
                .header("pragma", "no-cache")
                .header("x-ua-compatible", "IE=edge, Chrome=1")
                .body(contents)
        },
        Err(e) => {
			// error handling
        }
    }
}