问题标签 [server-side-rendering]

我配置了一个通用的 React 项目，在该项目中我使用 Webpack 为客户端和服务器代码创建包。

当我通过定位 Webpack 的捆绑输出直接运行服务器时，这工作正常。

但是，当我尝试运行“实时”开发服务器时，我遇到了问题。在这种情况下，我不想以捆绑的服务器文件为目标，而是直接以源文件为目标，这将允许我运行 webpack 热中间件以进行实时代码更改。下面是服务器主文件的精简版本。

src/server/index.js

现在的一个示例执行是：

它可以启动，但是在universalReactAppMiddleware处理请求的那一刻，它将尝试为已解析的组件执行服务器渲染。然后这会失败，因为我的一些组件导入图像/css，例如：

src/shared/components/Foo

电脑说不！

执行后，我的快速服务器抛出异常，提示语法异常。它基本上尝试将 css 和图像导入解析为 Javascript。这些类型的导入依赖于我的 webpack 加载器才能正确运行。

所以现在我正在尝试寻找一种欺骗 Webpack 行为的机制，以便我可以执行这些类型的组件。我正在调查 Pete Hunts webpack-require，但一直遇到困难。

有谁知道适用于这种情况的任何其他方法？

更新 2016/06/15

繁荣！我已经设法在没有任何第三方库帮助我的情况下完成了这项工作。 universal-webpack比以前更酷更干净，webpack-isomorphic-tools但我喜欢我有一个最小的配置设置，其中尽可能少的通用 webpack 配置渗入我的生产代码。

我对结果很满意。客户端捆绑包由最新的react-hot-loaderv3 测试版支持，这给了我很棒的 HMR 体验，我的服务器捆绑包会根据任何文件更改重新构建，因此也不必手动重新启动我的服务器。打造非常甜蜜的开发体验。

我将把它扔进样板（是的，我知道，还有另一个），但也许它对其他人有用。

现在 Airbnb 有一个工具Hypernova用于 javascript 视图的服务器端渲染。我想知道它是否可以用于增强基于 Ajax 的网站的 SEO，例如使用Prerender的工具。如果不是那为什么？

当服务器端渲染使用window或localStorage这些浏览器全局变量的 React 组件时，我总是需要添加

摆脱那些“未定义本地存储”错误。

有没有其他体面的解决方案？

编辑我的用例

1. window是因为它的属性，例如innerwitdth，并添加原始浏览器事件，例如resize
2. localStorage是存储JWT令牌

我无法用 Reactjs 服务器端呈现我的语义。它没有语义，因此我的反应服务器端代码没有问题。服务器崩溃并给出错误的开始行：

我用 npm 安装了 jquery。最后还尝试安装jsdom版本jsdom@3.1.2。没有工作。

我在语义 ui 网页中使用Recipes-Server-side 渲染。

我用于服务器端组件的代码如下：

这是使用语义 ui 进行服务器端渲染的普遍已知问题，还是我做错了？

我已经设置了服务器端渲染。但是，调用 store.getstate() 的 server.js 中的代码仅获取我的默认初始状态，而不是客户端的状态。我怎样才能解决这个问题？

Server.js： http://pastebin.com/u31cqaUh

配置存储：http: //pastebin.com/7FXV6NDS

根.js：

我使用“aspnet-spa”生成器（http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/）来生成项目。它在本地运行成功，但我在服务器 IIS 中返回错误。

看附件图片

因为我收到“调用节点模块失败并出现错误：ReferenceError：未定义窗口”的错误。所以我希望我的一个组件在客户端站点中呈现。可能吗？

我使用“aspnetcore-spa 生成器”来生成项目（http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/）

我的客户需要一个功能丰富的客户端渲染网络应用程序，该应用程序同时在 Google PageSpeed Insights 上的得分为 100/100，并且在第一次加载时渲染速度非常快，并且缓存为空。她希望将同一个站点同时用作 Web 应用程序和登录页面，并让任何搜索引擎都可以通过良好的 SEO 轻松抓取整个站点。

这可以使用 Meteor 吗？怎么做到呢？

我的服务器上有这个

这在客户端

问题 它仅在我删除（let history = browserHistory）时才有效，但它会将/#/哈希前缀添加到我的url（我不想发生这种情况）。

当我将 let (history = browserHistory) 留在那里时，它会引发错误

警告：React 尝试在容器中重用标记，但校验和无效。这通常意味着您正在使用服务器渲染，并且在服务器上生成的标记不是客户端所期望的。React 注入了新的标记来补偿哪些工作，但是您已经失去了服务器渲染的许多好处。相反，请弄清楚为什么在客户端或服务器上生成的标记不同： (client) < ! -- react-empty: 1 - (server) < section data-reactro

错误消息很清楚，但是，我不明白为什么它可以与 hashHistory 一起使用，但在 browserHistory 上失败

我正在做 Nodeschool 的 react 教程，模块名为learnyoureact.

我正在Isomorphic上课（11 次中的 8 次），我遇到了警告：

我的解决方案与此解决方案相同，我什至尝试从该解决方案复制和粘贴，但我仍然收到相同的警告。要重新创建问题，请从上面的 repo 中复制代码。

这是什么意思呢？我查看了一些关于此的 SO 帖子，例如this和this，但我认为解决方案与我的问题/警告无关。作为一个 React 新手，我对接下来要做什么感到困惑。HTML 页面看起来不错，但learnyoureact模块说生成了不同的 HTML，我也可以在 Chrome 的检查工具中看到这一点。

我发现问题出在这条线上。

我该如何解决这个问题/警告？谢谢！

这是错误跟踪的图片：

这就是我现在看到的。node program.js在我离开并在几个小时后重新运行后，警告神秘地消失了，但在我的终端中，我仍然得到相同的错误 HTML。有任何想法吗？