shakacode/react_on_rails
React On Rails
React on Rails 是一个将 React 组件嵌入 Ruby on Rails 视图的集成框架。它作为一个服务端渲染引擎和一个全栈组件编排器，允许后端数据直接传递到前端组件中，而无需进行单独的 API 调用。
该项目同步客户端-服务端路由，以在整个应用程序中保持一致的导航状态。它包括一个 Webpack 资产流水线来管理 JavaScript 包，并实现代码分割以进行优化交付。
该框架涵盖了混合视图渲染和前端资产优化，包括将服务端请求上下文注入 JavaScript 渲染过程的能力。它还提供了在安装或升级过程中诊断集成问题的工具。
Features
- React Rails Integrations - Provides a bridge for embedding React components directly into Ruby on Rails views with backend data passing.
- Full-Stack Orchestrators - Orchestrates the flow of backend data directly into frontend components without requiring separate API calls.
- Frontend Component Integrations - Embeds interactive React components directly into server-side Rails views to avoid redundant API calls.
- Full-Stack Web Frameworks - Provides a framework for building web applications that unify server-side routing with dynamic client-side interfaces.
- Server-Side Rendering - Generates static HTML on the server to improve search engine visibility and accelerate the first page load.
- Server Route Synchronization - Synchronizes server-defined routing manifests with client-side scripts to maintain consistent navigation states.
- React Server-Side Renderers - Renders React applications on the server to deliver pre-rendered HTML for faster initial page loads.
- Server-to-Client Route Synchronization - Aligns the frontend router with server-side rendering to ensure a seamless transition between page loads.
- Server-View Component Embedding - Injects React component identifiers and properties into server-side templates for efficient hybrid rendering.
- Webpacker Integrations - Integrates a Webpack-based asset pipeline into the Rails build process for optimizing JavaScript and CSS bundles.
- Bundle Splitting - Implements code splitting to divide large JavaScript bundles into smaller chunks for optimized loading.
- Frontend Asset Optimization - Manages Webpack bundles and code splitting to reduce load times and improve client-side performance.
- Client-Side Hydration - Implements techniques for attaching interactive React behavior to server-rendered HTML after the initial page load.
- Server Component Prop Passing - Passes request-specific server context as props to frontend components to adapt output based on backend state.
- Request Context - Allows server-side request data to be injected into the JavaScript rendering process for use during hydration.
- Ruby on Rails Resources - Listed in the “Ruby on Rails Resources” section of the Awesome Redux awesome list.
