问题标签 [server-side-rendering]

我有一个使用 ReactJS 构建的响应式 Web 应用程序，我希望有一天能够支持服务器端渲染。

根据视口大小，应用程序布局/行为会发生变化。但是所有这些改变不仅可以通过纯 CSS 媒体查询来完成：JS 行为，而且底层的 HTML 结构也必须根据宽度进行更改。

例如我可以有：

在 800px 宽度下：

宽度超过 800 像素：

现在，我想为该应用程序使用服务器端渲染。但是在服务器上我没有宽度，所以我不知道返回给客户端的 HTML 结构。

请注意，我不是在寻找使用静态默认服务器端断点的解决方案，而是在客户端更正应用程序。我正在寻找一种解决方案，可以根据其设备向客户端返回正确的 html 结构。因此，如果他在浏览器上禁用 javascript，它应该可以正常工作。

有人可能会争辩说，我可以渲染两者所需的 html，并使用纯 CSS 媒体查询和隐藏/显示所需的部分display: none，但这会使应用程序复杂化并使其渲染许多未使用的 html 元素，因为通常用户不太可能移动断点上方/下方（我的意思是，如果他有移动设备，则永远不会使用桌面的 html 元素）

此外，如果我想使用内联样式，它会变得复杂，因为我必须在服务器上渲染这些内联样式以获得正确的宽度。

我看到有些人正在考虑嗅探浏览器 UA 以估计他们的视口大小。但即使有一些不安全的屏幕尺寸检测，我也不确定我们能否知道服务器端的设备屏幕方向。

我可以做些什么来解决这个问题吗？

我为我的 angular2 组件开发了一个解析器，它将它们呈现在我的 HTML 文件中。到目前为止，我能够将它们以 HTML 格式呈现为

然后我的静态 HTML 会正确生成，但是如果我像这样使用我的组件：

然后我的组件在 HTML 中正确加载，但我的静态 HTML 没有正确生成。见下图： 组件在浏览器中加载

但是静态 HTML 没有正确生成静态 HTML 的 控制台窗口

服务器.ts

index_new.ng2.html

我提前尝试了@alexpods 的更新 git Hub 存储库。

使用React Starter Kit的Webpack 同构 CSS 样式加载器，我如何传入样式对象而不是类名？

我们目前可以这样做：

我想知道我们是否可以做这样的事情：

我正在寻找一种在服务器端呈现时也可以工作的解决方案。

我知道 angular2 用于服务器端渲染。所以我想更多地了解它。

我对这种现象有以下疑问。

1.什么是服务端渲染？

2.它解决了什么问题？

3.它的应用是什么？

4.为什么使用服务器端渲染？

5.支持服务端渲染的技术有哪些？

6.在angular2中，服务器端渲染有助于实现哪些目标？

7.客户端和服务器端渲染的主要区别是什么？

8.哪些工具或框架可用于服务器端渲染？

提前感谢大家。

我正在使用 angular2-universal 进行服务器端渲染和生成静态 HTML。

到目前为止，我的静态 HTML 已生成，并且组件也正在渲染。但在我的浏览器控制台中显示此错误。

为此，我使用了以下代码：

1.index.html

2.client.ts

3.server.ts

4.app.component.ts

我正在使用带有 react-rails gem 的 Rails。服务器端工作完美，但最近我在项目中添加了 react-bootstrap。

一切都很好，除了 react-server 引用了两次 react 脚本，这导致与 react-bootstrap 不一致

我来给你展示。在我的 application.js 中，我引用了以下内容：

内部组件

我使用 react_component 渲染组件，带有 prerender: true。它工作得很好，但是如果你使用，比如说，输入（来自 React-bootstrap）然后它会抱怨 addToRef 错误，这是由多个反应引用引起的

如果我删除 react/react_ujs 那么客户端上不再有 React。如果我删除 react-server 那么我不再对服务器做出反应。但是如果我删除 react-server 那么 React-bootstrap 不再抱怨多个引用

有没有办法将 React 服务器端与 React-bootstrap 一起使用？

我正在尝试构建一个使用“react-router”、“redux”和服务器端渲染的 React 应用程序/站点，但我不太明白如何处理浏览器中的初始渲染。

在服务器端，我可以获取一个 JSON 对象，将其传递给 state，然后将 state 映射到 props - 所有这些都是同步的 - 最后使用已经初始化的 props 渲染组件。

但是，当浏览器开始发挥作用时，我需要通过 AJAX 请求获取数据 - 异步：

结果，由于未定义的道具，渲染失败。有没有办法解决这个问题 - 也许推迟浏览器渲染直到获取数据？

React 有一个新的候选版本，v 15.0.0。由于现在库中不推荐使用 renderToString 方法，并且显然将在未来的版本中停止使用，那么在新版本中使用 React 支持服务器端渲染的方式是什么？

在文档页面上，除了不再支持此特定方法外，没有提供 renderToString 的替换或其他解释。

谢谢

我有大型数据库数据，我正在从不同的表中查询，并希望在计算后在不同的数组中得到结果，然后我想组合数据并将其显示在一个表中？

类似的东西；

在服务器端处理的数据表中显示？？？

感谢有人帮助

我有一个带有“订单”的服务器端渲染页面和一个实例化为“父对象”的根 Vue 对象。是否可以将呈现的 html 订单作为该父 Vue 对象的子项启动？

Vue js 似乎在动态添加内容时效果最好，但在这种情况下，我希望能够从预先存在的标记向父级添加子级。甚至可能吗？我试图找到解决方案，但我无法让它发挥作用。基本上，我在网站上有几个这样的 div

<div id="order-1">some content</div><div id="order-2">some other content</div>

我想将它们作为子元素添加到我已经启动的 Vue 组件中，"new Vue({..."其元素设置在主体上。

所以基本上我想要这个结构

父应用（使用新的 Vue）--> 订单 1（在页面渲染后作为子级添加）--> 订单 2（在页面渲染后作为子级添加）