问题标签 [server-side-rendering]

您可能知道，AirBnb 开源了 Rendr ( http://nerds.airbnb.com/weve-open-sourced-rendr )，它应该能够在服务器端渲染Backbone应用程序。这很酷，因为可以在服务器上运行模板渲染的第一次“迭代”，客户端得到完全渲染的 HTML 文档和整个 JS 应用程序。它大大缩短了显示时间，并且可以让我们摆脱其他服务器端模板系统。

那么，有人设法用 jsdom 或 ZombieJS 渲染 AngularJS吗？Node.js 上的这些 dom/浏览器模拟理论上应该足以用于简单的服务器端 Angular 模板，但我发现谷歌搜索的结果并不是很确定。

我正在构建一个用于反应的服务器端渲染实用程序。我没有使用ReactDOMServer及其相关的renderToString方法。相反，我将应用程序渲染到一个轻量级的服务器端 DOM。单个组件可以异步加载数据（通过 AJAX、setTimeout 等），当所有的承诺都解决后，我将最终的 HTML 字符串发送到浏览器。异步数据存储在一个名为INLINE_CACHE供客户端使用的 JavaScript 变量中。这部分工作完美。

在客户端，应用程序组件安装到文档。当子组件去加载数据时，我的数据控制器可以看到INLINE_CACHE并立即解决承诺。这部分也有效。

当每个承诺都得到解决时，我setState会使用触发重新渲染的数据进行调用。我的问题是，即使承诺立即得到解决，它们仍然按照 A+ 规范异步解决。这意味着初始渲染没有它需要的所有数据。片刻之后（下一个刻度，如果你愿意的话），数据就在那里并且发生了重新渲染。但是由于初始渲染与服务器的现有标记（以及相关的校验和）不匹配，因此反应抱怨......理所当然地如此。

我需要做的是以某种方式在分离的 DOM 节点（或仅虚拟 DOM）中呈现应用程序组件，等待所有承诺解决，然后将节点安装到文档。目标是 react 将尝试重用从服务器呈现的现有标记。我知道如何生成校验和等等——这不是问题。我只需要做出反应，在内存中渲染我的应用程序，直到我告诉它安装到真正的 DOM 上——此时会发生差异。React 有可能吗？

我很难理解 ReactJs 中的一个基本概念。在我的应用程序中，它使用服务器端和客户端渲染，我有一个简单的模型，它由一个包含用户名的字符串字段组成：

此值在 cookie 中传递给服务器，并在以下期间更新到服务器上的模型中renderToString：

ReactDom.renderToString(app({path: path, cookie: cookie}));

这很好用，并且页面会使用适当的用户名加载客户端。现在 - 在我的应用程序中，我有一个简单的logout函数，它将模型中的用户名设置为 null 客户端并使传递给服务器的 cookie 过期。这又一次很好用，我的 ReactJs 组件在客户端重新渲染，用户名为空，并且 cookie 被删除。问题是，如果我在注销后立即重新加载页面，MemberStore即使没有传入 cookie，服务器的模型仍使用用户名处于其原始状态。为什么即使在页面加载之后，服务器仍保留我之前会话的模型？在客户端进行更改后，我应该做些什么来将服务器上的模型与模型客户端同步？谢谢！

注意：我正在使用漂亮的库react-rails尽管据我了解我的问题它不应该影响答案。

我有一个<Component />加载 a <Map />，这意味着客户端渲染，因为它在服务器端没有意义（至少我使用的库不这样做）。

因此，我想在客户端准备好之前显示图像，以应用 Skeuomorphism 原则。

基本上，这意味着我有：

根据我目前的理解，componentDidMount在生成模板字符串时在服务器端调用。我如何知道实际安装在客户端的组件，以便我可以用实际地图替换我的图像？

我想为WordPress基于React. 为了使它对搜索引擎友好，我需要它最初在服务器上呈现（服务器端呈现）。

据我所知，做到这一点的唯一方法是使用react-php-v8js，它需要PECL V8js 扩展。这是一个问题，因为我无法控制运行这些主题/插件的平台。

有没有一种无需安装额外扩展即可制作React和协同工作的方法？WordPress也许通过将React文件构建/编译到PHP?

我有一个使用以下技术开发的大型 Web 应用程序：

• 网络服务器：Node.js + Express
• 模板引擎：Jade
• CSS引擎：少
• 客户端框架：AngularJS (v. 1.x)
• 数据库：MongoDB

我非常有兴趣切换到 Angular 2 并使用 Angular 2 Universal 以利用服务器端渲染。

由于我使用 John Papa 的风格指南开始了这个项目，（理论上）升级到 Angular 2 不会有太大的麻烦。

我现在还没有解决的问题是在 Angular 2 的组件模板中使用 Jade。

例子：

我想将 Jade 而不是 html 放在模板中。

你对此有什么建议吗？你们中有人知道吗？

我想为我的 ReactJS 应用程序实现服务器端渲染。我用react-router. 我将routes.js其作为 webpack 入口点并使用output.libraryTarget = "commonjs2"选项进行编译。然后我需要NodeJS脚本中的编译结果来进行渲染。但我有错误。Webpack 将模块包装在以下代码中：

当 NodeJS 尝试执行(function() { return this; }())它的 return 时undefined。在浏览器中它会返回window. 为什么 webpack 使用这样的包装代码？如何使这段代码在 NodeJS 中工作？

我使用节点克隆作为外部库。它不使用任何其他库作为依赖项。但是 webpack 在它的 bundle 中将buffer作为这个 lib 的依赖。在buffer代码中我遇到了错误Cannot read property 'TYPED_ARRAY_SUPPORT' of undefined。发生这种情况是因为在 nodeJS (function() { return this; }())returnundefined中。

我将 react-router 和 redux-simple-router 与服务器端渲染结合使用，当我导航到如下网址时：

我希望能够some_state从请求中提取，以便我可以呈现初始的 redux 状态并将其发送回客户端。如何从服务器端的请求中提取状态？history 和 react-router 放在哪里？

这对移动设备尤其重要，因为正如我测试过的，桌面设备不会触发单独的请求，但移动设备会触发，这意味着页面会以全新的初始状态重新加载。

我正在尝试在我的 ReactJS 应用程序中使用 GSAP 来制作客户端动画。如果我通过 npm 安装 gsap 模块，然后尝试在我的模块中使用 gsap，则会收到以下错误：

在 ReactJS 中有没有办法编码：如果它在服务器上呈现，没有文档所以不要加载 gsap，但是一旦下载了编译好的 bundle.js（我的客户端 react js 接管客户端），使用 gsap因为文件存在？

我目前正在使用的解决方法是将 gsap 嵌入 index.ejs 中：

更新：webpack.config.js

所以我目前有一个 Meteor 网站，我想将服务器端渲染用于 Facebook 开放图形元标记和 SEO 目的（我知道谷歌现在可以蜘蛛客户端渲染页面，但其他搜索引擎不能）。

因此，我正在遵循本指南（https://meteorhacks.com/meteor-server-sider-rendering-for-seo- purpose/），似乎我基本上只是将我想要搜索引擎优化的每个视图复制到私人文件夹。

这听起来像很多重复。什么是一个好的模式或结构，我可以布置我的代码，以便我尽可能多地共享客户端视图和服务器视图？