# Inertia Rails 服务器端渲染 (SSR) 服务器端渲染在服务器上预渲染 JavaScript 页面，向访问者提供完全渲染的 HTML。这改进了 SEO，实现了更快的初始页面加载，并且即使在禁用 JavaScript 的情况下也允许进行基本导航。 ## 何时使用 SSR * **SEO 关键页面** \- 登陆页面、博客文章、产品页面 * **社交共享** \- 需要适当的开放图谱元标记的页面 * **连接速度慢** \- 用户在 JavaScript 加载之前看到内容 * **辅助功能** \- 无需 JavaScript 的基本功能 ## 要求 * **Node.js** 必须在您的服务器上可用 * **Vue 3.2.13+** （或为旧版本单独安装`@vue/server-renderer`） * **Vite Ruby** 用于构建配置 ## 设置步骤 ### 1\.创建 SSR 入口点创建`app/frontend/ssr/ssr.js`： **视图 3：** 从 '@inertiajs/vue3' 导入 { createInertiaApp } 从 '@inertiajs/vue3/server' 导入 createServer 从 '@vue/server-renderer' 导入 { renderToString } 从 'vue' 导入 { createSSRApp, h } const page = import.meta.glob('../pages/**/*.vue', { eager: true }) 创建服务器（（页面）=> 创建惯性应用程序（{ 页，渲染：renderToString，解决：（名称）=> { const page = page[`../pages/${name}.vue`] 如果（！页）{ 抛出新错误（`找不到页面：$ {name}`） } 返回页面 }, 设置（{应用程序，道具，插件}）{ 返回createSSRApp({ 渲染：() => h(App, props), }).use(插件) }, }) ） **反应：** 从 '@inertiajs/react' 导入 { createInertiaApp } 从 '@inertiajs/react/server' 导入 createServer 从 'react-dom/server' 导入 ReactDOMServer const page = import.meta.glob('../pages/**/*.jsx', { eager: true }) 创建服务器（（页面）=> 创建惯性应用程序（{ 页，渲染：ReactDOMServer.renderToString，解决：（名称）=> { const page = 页面[`../pages/${name}.jsx`] 如果（！页）{ 抛出新错误（`找不到页面：$ {name}`） } 返回页面 }, 设置：({ App, props }) => , }) ） ### 2\.配置Vite Ruby 更新 `config/vite.json`: { “全部”：{ "sourceCodeDir": "应用程序/前端", “entrypointsDir”：“入口点” }, “发展”：{ “自动构建”：正确 }, “生产”：{ “ssrBuildEnabled”：真 } } ### 3\.在 Rails 中启用 SSR 更新 `config/initializers/inertia_rails.rb`： InertiaRails.configure 执行 |config| # 仅当配置了Vite时才启用SSR config.ssr_enabled = ViteRuby.config.ssr_build_enabled # SSR 服务器 URL（默认） config.ssr_url = 'http://localhost:13714' 结束 ### 4\.更新客户端入口点修改 `app/frontend/entrypoints/application.js` 以进行水合作用： **视图 3：** 从 '@inertiajs/vue3' 导入 { createInertiaApp } 从 'vue' 导入 { createSSRApp, h } const page = import.meta.glob('../pages/**/*.vue', { eager: true }) 创建惯性应用程序（{ 解析：（名称）=>页面[`../pages/${name}.vue`]，设置（{ el，应用程序，道具，插件}）{ // 使用createSSRApp代替createApp进行水合创建SSRApp({ 渲染：() => h(App, props), }) .use（插件） .mount(el) }, }) **反应：** 从 '@inertiajs/react' 导入 { createInertiaApp } 从 'react-dom/client' 导入 { HydroRoot } const page = import.meta.glob('../pages/**/*.jsx', { eager: true }) 创建惯性应用程序（{ 解析：（名称）=>页面[`../pages/${name}.jsx`]，设置（{ el，应用程序，道具}）{ // 对于 SSR 使用 HydroRoot 而不是 createRoot HydroRoot(el, ) }, }) ### 5\.更新 SSR 头部布局将 SSR 头注入添加到您的布局中： <头> <元字符集=“utf-8”/> <%= csp_meta_tag %> <%=惯性_ssr_head%> <%= vite_client_tag %> <%= vite_javascript_tag '应用程序' %> <正文> <%=产率%> ### 6\.构建并运行 # 构建客户端和 SSR 包 bin/vite 构建 bin/vite 构建 --ssr # 启动SSR服务器宾/维特苏维埃社会主义共和国 ## 生产部署 ### 进程管理器（systemd）创建`/etc/systemd/system/inertia-ssr.service`： [单位] 描述=惯性SSR服务器之后=网络.目标 [服务] 类型=简单用户=部署工作目录=/var/www/myapp/current ExecStart=/usr/bin/node public/vite-ssr/ssr.js 重新启动=失败时环境=NODE_ENV=生产 [安装] WantedBy=多用户.target sudo systemctl 启用惯性-SSR sudo systemctl 启动惯性-SSR ### 流程经理 (PM2) pm2 start public/vite-ssr/ssr.js --name惯性-ssr pm2保存 ### 码头工人 # 与 Rails 一起运行 SSR 服务器 CMD [“sh”，“-c”，“节点 public/vite-ssr/ssr.js 和捆绑执行 puma”] ## 高级配置 ### 聚类为了在多核系统上获得更好的性能（需要 `@inertiajs/core` v2.0.7+）： // ssr/ssr.js 创建服务器（ (页面) => createInertiaApp({ /* ... */ }), { cluster: true } // 启用集群）这使用循环请求处理在单个端口上运行多个 Node.js 进程。 ### 自定义端口创建服务器（ (页面) => createInertiaApp({ /* ... */ }), { port: 13715 } // 自定义端口）更新 Rails 配置以匹配： config.ssr_url = 'http://localhost:13715' ### 有条件的SSR 仅为特定路由启用 SSR：类 ApplicationController < ActionController::Base # 禁用管理页面的 SSR 惯性配置（ssr_enabled：假）结束类 PagesController < 应用程序控制器 # 为公共页面启用SSR 惯性_配置（ssr_enabled：Rails.env.生产？）结束 ## 标题和元标签 ### 服务器端元标签在控制器中设置元标记：类 PostsController < 应用程序控制器定义显示 post = Post.find(params[:id]) 渲染惯性：{ 帖子：post.as_json（仅：[：id，：标题，：内容]） }，元：{ 标题：帖子标题，描述：帖子摘录， og_image: post.cover_image_url } 结束结束 ### 使用头部组件 **视图 3：** <脚本设置> 从 '@inertiajs/vue3' 导入 { Head } 定义道具（['帖子']） <模板> <头部> <标题>{{ post.title }} <文章>

**反应：** 从 '@inertiajs/react' 导入 { Head } 导出默认函数 Show({ post }) { 返回（ <> <头部> <标题>{post.title} <文章>

{帖子.标题}

{/* ... */} ） } ### 默认标题模板创建惯性应用程序（{ 标题：（标题）=> 标题？ `${title} - 我的应用程序`: '我的应用程序', // ... }) ## 故障排除 ### SSR 服务器没有响应 1.检查SSR服务器是否正在运行：`curl http://localhost:13714` 2.检查日志：`journalctl -u惯性-ssr -f` 3. 验证端口是否与您的 Rails 配置匹配 ### 水合不匹配错误 1. 确保客户端和服务器渲染相同的内容 2. 避免在初始渲染中使用仅限浏览器的 API（使用“onMounted”） 3. 检查日期/时间格式差异 // 不好 - 服务器与客户端不同 const time = new Date().toLocaleTimeString() // 好 - 安装后渲染常量时间 = ref(null) 已安装（（）=> { time.value = new Date().toLocaleTimeString() }) ### 内存泄漏 1.避免SSR中的全局状态突变 2. 仅使用请求范围的状态 3.监控Node.js内存使用情况 ### 初始加载时缺少样式确保 CSS 包含在 SSR 捆绑包中或使用关键 CSS 提取。 ## 性能提示 1. **保持 SSR 轻量级** \- 将繁重的计算推迟给客户端 2. **使用流式传输**（如果支持）以获得更快的 TTFB 3. **缓存静态页面的SSR响应** 4. **监控SSR延迟** \- 添加可观察性 # 记录缓慢的 SSR 渲染 around_action :track_ssr_time, if: -> { request.inertia? } def track_ssr_time 开始 = 时间.当前产量持续时间 = 时间.当前 - 开始 Rails.logger.info “SSR 渲染：#{duration.round(3)}s” 如果持续时间 > 0.1 结束

惯性导轨 Ssr

包含技能