React SSR

### Build and Run Actix-rs + ssr-rs Example (Bash) Source: https://github.com/valerioageno/ssr-rs/blob/main/benches/README.md Commands to navigate to the example directory, install project dependencies using pnpm, build the server-side rendering bundle, and execute the Actix-rs server example. ```bash cd examples/webpack-react pnpm i && pnpm build:ssr cargo run --example webpack ``` -------------------------------- ### Install Dependencies with pnpm (Shell) Source: https://github.com/valerioageno/ssr-rs/blob/main/examples/vite-svelte/README.md Installs project dependencies using the pnpm package manager. This is the first step to set up the project. ```Shell pnpm install ``` -------------------------------- ### Build and Run Node + Fastify Example (Bash) Source: https://github.com/valerioageno/ssr-rs/blob/main/benches/README.md Commands to navigate to the example directory, install project dependencies using pnpm, build the server bundle, and execute the Node.js server using the generated commonjs bundle. ```bash cd examples/webpack-react pnpm i && pnpm build:server node dist/server/bundle.cjs ``` -------------------------------- ### Run Rust Server with Cargo (Shell) Source: https://github.com/valerioageno/ssr-rs/blob/main/examples/vite-svelte/README.md Compiles and runs the Rust server application using Cargo. This starts the server that handles the Svelte SSR. ```Shell cargo run ``` -------------------------------- ### JavaScript Entry Point Examples (JavaScript) Source: https://github.com/valerioageno/ssr-rs/blob/main/README.md Illustrates different ways a JavaScript bundle might expose the server-side rendering function or object, explaining what the `entryPoint` parameter in `Ssr::new` refers to. Examples include IIFE, plain objects, and variables holding the rendering interface. ```javascript // IIFE example | bundle.js -> See vite-react example (() => ({ renderToStringFn: (props) => "" }))() // The entryPoint is an empty string ``` ```javascript // Plain object example | bundle.js ({renderToStringFn: (props) => ""}); // The entryPoint is an empty string ``` ```javascript // IIFE variable example | bundle.js -> See webpack-react example var SSR = (() => ({renderToStringFn: (props) => ""}))() // SSR is the entry point ``` ```javascript // Variable example | bundle.js -> See webpack-react example var SSR = {renderToStringFn: (props) => ""}; // SSR is the entry point ``` -------------------------------- ### Build Svelte Client Assets with Vite (Shell) Source: https://github.com/valerioageno/ssr-rs/blob/main/examples/vite-svelte/README.md Builds the client-side JavaScript and CSS assets for the Svelte application using Vite, specifying the client-specific configuration file. ```Shell pnpx vite build --config vite.client.config.js ``` -------------------------------- ### Build Scripts and Dependencies in package.json Source: https://github.com/valerioageno/ssr-rs/blob/main/examples/webpack-react/README.md Shows the modified 'scripts' section to use Parcel for development ('start') and Webpack for production builds ('build:all', 'build:client', 'build:ssr'). It also lists key 'devDependencies' added or updated, including Parcel, Webpack, Jest, and various loaders/plugins required for the custom build setup. ```json // package.json //[...] "scripts": { //[...] "start": "parcel", "test": "jest", "build:all": "webpack --config ./webpack.client.build.js --progress && webpack --config ./webpack.ssr.js --progress", "build:client": "webpack --config ./webpack.client.build.js --progress", "build:ssr": "webpack --config ./webpack.ssr.js --progress", //[...] } //[...] "devDependencies": { "ts-jest": "^27.1.1", "jest": "^27.4.5", "clean-webpack-plugin": "^4.0.0-alpha.0", "css-loader": "^5.2.2", "file-loader": "^6.2.0", "mini-css-extract-plugin": "^1.5.0", "parcel": "^2.0.1", "webpack": "^5.65.0", "webpack-cli": "^4.6.0" } //[...] ``` -------------------------------- ### Build Svelte SSR Assets with Vite (Shell) Source: https://github.com/valerioageno/ssr-rs/blob/main/examples/vite-svelte/README.md Builds the server-side rendering (SSR) JavaScript bundle for the Svelte application using Vite, specifying the SSR-specific configuration file. ```Shell pnpx vite build --config vite.ssr.config.js ``` -------------------------------- ### Integrating ssr-rs with Actix-Web (Rust) Source: https://github.com/valerioageno/ssr-rs/blob/main/README.md Provides an example of integrating `ssr-rs` with the Actix-Web framework. It demonstrates using `thread_local!` to manage `Ssr` instances per thread for safety and rendering content within an asynchronous Actix-Web handler. ```rust use actix_web::{get, http::StatusCode, App, HttpResponse, HttpServer}; use std::cell::RefCell; use std::fs::read_to_string; use ssr_rs::Ssr; thread_local! { static SSR: RefCell> = RefCell::new( Ssr::from( read_to_string("./client/dist/ssr/index.js").unwrap(), "SSR" ).unwrap() ) } #[actix_web::main] async fn main() -> std::io::Result<()> { Ssr::create_platform(); HttpServer::new(|| { App::new() .service(index) }) .bind("127.0.0.1:8080")? .run() .await } #[get("/")] async fn index() -> HttpResponse { let result = SSR.with(|ssr| ssr.borrow_mut().render_to_string(None).unwrap()); HttpResponse::build(StatusCode::OK) .content_type("text/html; charset=utf-8") .body(result) } ``` -------------------------------- ### Configuring ESLint Parser Options for TypeScript - JavaScript Source: https://github.com/valerioageno/ssr-rs/blob/main/examples/vite-react/README.md This JavaScript code snippet shows how to configure the `parserOptions` within an ESLint configuration file. This setup is crucial for enabling type-aware linting rules in a TypeScript project by specifying the ECMAScript version, source type, and the paths to the project's `tsconfig.json` files. ```JavaScript export default { // other rules... parserOptions: { ecmaVersion: 'latest', sourceType: 'module', project: ['./tsconfig.json', './tsconfig.node.json'], tsconfigRootDir: __dirname, }, } ``` -------------------------------- ### Basic Server-Side Rendering (Rust) Source: https://github.com/valerioageno/ssr-rs/blob/main/README.md Demonstrates the fundamental steps to perform server-side rendering of a JavaScript bundle using `ssr-rs`. It involves initializing the V8 platform, reading the bundled JavaScript source, creating an `Ssr` instance, and calling `render_to_string`. ```rust use ssr_rs::Ssr; use std::fs::read_to_string; fn main() { Ssr::create_platform(); let source = read_to_string("./path/to/build.js").unwrap(); let mut js = Ssr::new(&source, "entryPoint").unwrap(); let html = js.render_to_string(None).unwrap(); assert_eq!(html, "...".to_string()); } ``` -------------------------------- ### Server-Side Rendering Entry Point (TypeScript) Source: https://github.com/valerioageno/ssr-rs/blob/main/examples/webpack-react/README.md Defines the 'Index' function responsible for server-side rendering the React application. It takes optional parameters, parses them as props, renders the main 'App' component to an HTML string using 'renderToString', and constructs a complete HTML document including necessary meta tags, CSS links, a script tag to expose initial props to the client, and the server-rendered app HTML. ```typescript // src/ssrEntry.tsx import React from 'react'; import { renderToString, renderToStaticMarkup } from 'react-dom/server'; import App from './App'; import './index.css'; export const Index = (params: string | undefined) => { const props = params ? JSON.parse(params) : {}; const app = renderToString(); return ` React SSR ${renderToStaticMarkup(