问题标签 [server-side-rendering]

我正在开发一个 Ruby on rails 4 项目，我们将 React/Redux 用于前端。我们使用 Webpack 和 gulp 来编译 javascript 和 css。我们根本不使用 rails Asset pipeline，它在配置中被禁用。所有资产都编译到公用文件夹并直接包含在视图中。现在所有反应组件都在客户端呈现。它有他自己的缺点，例如在 js 完全加载之前的视觉闪烁以及将初始道具从后端传递到前端的问题。有没有什么好方法可以在服务器端编译反应组件而不使用资产管道并直接从 Rails 视图传递道具？

我正在编写 scala-js 前端框架，其关键特性是服务器端渲染。这个想法是有一些组件可以使用document.createElement,element.appendChild和其他组件来操作 dom。在服务器上，我将子类化HTMLDocument和Element其他人，用可以转换为纯字符串 html 的服务器 dom 实现覆盖他们的方法。所以我向scalajs-dom_sjs服务器模块添加了依赖项并尝试这样做。但是HTMLDocument，Element并且很可能其他类有调用js.native在他们的构造函数中抛出异常说“使用库的JVM版本”。这显然不存在。我可以使用另一种方式并实现我自己的 dom 库，但这是工作量的两倍，因为我必须在服务器和客户端上实现它，而使用第一种方法我只在服务器上实现一次。

所以我的问题是：为什么严格禁止在服务器上使用 scala-js 库版本，是否有解决方法？

我正在使用 Enzyme 测试反应组件，但出现以下错误：

不变违规：dangerouslyRenderMarkup(...)：无法在工作线程中呈现标记。在单元测试时需要 React 或使用 ReactDOMServer.renderToString 进行服务器渲染之前，请确保window并在全局范围内可用document

在需要“酶”之前，我为 jsdom 添加了以下设置（正如我在几个地方读到的）：

我在这里做错了什么？

编辑

我认为这与服务器端渲染无关。该消息是关于单元测试和服务器端渲染的一般信息。

如何减轻在服务器端渲染上引用客户端技术引起的错误，例如document，document.cookie等localStorage？

例如，我使用 React.js 和服务器端渲染。我在服务器上渲染客户端 gui 组件，也分别将相同的组件发送到客户端。服务器端和客户端组件渲染输出和提供给它的道具（React props）应该相同，以免失去服务器端渲染的好处。在客户端，React.js 查看并决定在这两个条件下渲染哪一个；渲染输出和提供给 React 组件的道具。在这些组件上，我可能在客户端版本上有客户端技术参考，但是当我在服务器端版本上参考它们时会出错。

由于这两个版本的 gui 组件的 javascript 代码可能不同，我知道我可以让它们不同，例如服务器端版本不参考document.cookie。但是为了开发的简单性，并避免由此导致的错误，恕我直言，这不是很简单。在这种情况下，浏览器还将运行组件的客户端版本以达到document.cookieor localStorage，如果不是，则此缓解根本不起作用。

我正在开发一个带有服务器端渲染的 React 应用程序。该应用程序使用 Redux 进行状态管理，使用 Redux Saga 进行异步操作。在伪代码中，我现在在服务器端做的是：

我的问题出在第 4 步。现在，我将渲染的 React 组件和存储传递给ejs大致如下所示的视图：

（在上面的代码中，app是渲染的 React 组件，store是 Redux 存储）

麻烦的是，上面的代码，具体

不转义 html，因此如果我的商店包含带有<script>标签的字符串，它将是有效的 html，并打开应用程序以遭受 XSS 攻击。

如果不是像这样<%- %>使用: ，我会得到一个无效 JSON 的字符串：<%= %>var __data = "<%= JSON.stringify(store) %>";

我不确定如何转换回有效的 JSON。

所以我的问题（看起来很傻）是：将 HTML 模板中的 Redux 存储（JSON 对象的 HTML 转义字符串）传递给客户端的正确方法是什么，以及如何将该字符串转换回 JavaScript 对象客户端。

由于 Vue 2 已经发布并且它包含 SSR 功能，我有以下问题。

是否可以为类似于 Prerender.io 的机器人执行预渲染，但在自己的服务器上使用 PHP（Laravel）？如果是的话，你能告诉我方向吗？

非常感谢。

我试图让 Hackernews 2.0 演示在我的 Digital Ocean 液滴上运行，但我失败了。

• npm run start在 :8080 上启动服务器。
• npm run build为生产而构建。

定义的构建任务在这里定义：

...整个回购都在这里。

但是我应该执行什么来充当 :80 网站？

我在 Vue 频道上的 Gitter.im 上问过，但成功率为零。

任何人？

我对 reactJs 很陌生，刚开始学习 reactJS 的功能。我试图找出一种通过服务器端渲染概念将值从 nodeJS 传递给 reactJS 的方法。

在下面的示例中，我能够定义一个反应组件并将其添加到服务器中并在 UI 中呈现它，但我不确定如何将数据传递给可在组件渲染函数中使用的组件。

客户端.js

组件.jsx

服务器.js

更新1：

我现在可以将值传递给服务器端呈现的组件，如下所示

现在服务器端设置工作正常。

我需要{object:...}在我的 client.js 中提供它，以便客户端功能正常工作。知道如何在 client.js 中获取此值吗？

我正在尝试创建一个通用的反应应用程序（在服务器和客户端上使用 webpack）并努力导入图像。我想写这个：

这是我的 webpack 配置文件：

显然它在服务器端不起作用，因为node尝试读取./someImage.png文件的内容，导致错误。

我该如何处理？我知道有一些包，例如文件加载器包，可以发出webpack-isomorphic-tools或universal-webpack不发出文件，但我不明白在我的通用应用程序中使用它。