带有服务器端渲染 (SSR) React 前端的 Umbraco v10
带有服务器端渲染 (SSR) React 前端的 Umbraco v10
Created with DALL-E (OpenAI)
介绍
最近我想尝试 Umbraco CMS 是否可以与 React 前端集成，同时保持对 SEO 友好。如果我们想让网络爬虫尽可能容易地索引我们的网页，该解决方案必须包括服务器端渲染 (SSR)。此代码是概念证明的一部分 权威 .
我偶然发现了与 SSR 和 Umbraco 相关的不同来源，例如 本文 或者 反应JS .NET ，但是第一个缺少repo，另一个从2020年6月起就没有更新过，也就是说不支持 反应 18 到今天写这篇文章的时候。
经过几次试验和错误，我可以得到一些非常干净的工作，所以我想我会与你分享我采用的实现。
解决方案概述
该解决方案由三个不同的部分组成：
- Umbraco 网络应用程序
- 服务器端渲染应用程序（Express — Node.js）
- 反应应用
Diagram of the solution
具体来说，第一个请求是从 Express 服务器向涉及 SSR 的 Umbraco RenderMvcController 发出的，所有后续请求都是从 React 应用程序向各种 Umbraco ApiController 发出的。
Docker-compose 来运行应用程序，但可以在本地调试。
固态继电器
第一个请求是一个 Umbraco RenderMvcController。默认情况下，Umbraco 项目中的所有文档类型共享相同的模板，因此对 Umbraco 页面的所有请求都将使用相同的功能，即 索引异步 从内部 SsrDataController .
从那里，控制器通过调用 Mediator 来检索模型，以便检索我们的 SSR 所需的模型。
检索模型后，将其注入生成的模板中 索引.cshtml 和用途 大师.cshtml 模板。
TagHelper (asp-prerender-data) 添加到我们的 React Web 应用程序的根目录，然后将模型作为有效负载向我们的 Express 服务器发出 POST 请求。
我们的 App 组件是在服务器端实例化的，并提供了渲染页面所需的所有数据（通过 props 注入）。
一旦我们的 React 应用程序的 App 组件被渲染，它就会作为一个字符串返回给我们的 Umbraco 应用程序，最终将它注入到我们的视图中，并将该视图返回给用户。
如果您检查页面的代码源，您将看到页面的主体存在并且预先填充了数据。
来自 React 应用程序的所有后续请求都使用指向各种 Umbraco API 控制器的其他端点。
注意 : 当一个组件被预渲染时， 使用效果 挂钩未运行，因此当时未发出任何请求。
NB2 ：如果您的应用程序包含路由，请确保使用 静态路由器 代替 浏览器路由器 ，否则 ReactDOMServer 将无法渲染您的组件。这就是为什么我的应用程序的根用 路由器.tsx 将确定选择哪种路由器类型的组件。
乌姆布拉科
Umbraco 应用程序分为三种类型的文档类型：
- 收藏品
- 成分
- 页面类型
页面类型非常简单，主要包含属性：
- 元数据
- 部分的块列表 > 容器 > 块
反应应用
React 应用程序通过以下方式设置 创建反应应用程序 并且是相当基本的导航栏、主体和一些块类型。没有什么花哨。
这里唯一的要求是 React 应用程序显然应该知道某些 Umbraco ApiControllers 返回的响应类型。
代码
所有的代码都可以在这个 GitHub 仓库 ，并且自述文件提供了构建和测试解决方案所需的所有信息。
走得更远
只有一个 单个请求 检索页面的主体是在这个例子中，这足以检索不同的 部分 和 块 的页面。尽管 其他要求 需要从导航项中检索数据，或者 随后的 例如，其他组件在加载后发出的请求。
为简化起见，我没有在此处包含该部分。
学分
发起预渲染请求的灵感来自 这个回购 .
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
