问题标签 [server-side-rendering]

我正在使用一个使用documentand的包window。我想让我的网站在不更改太多代码的情况下进行服务器端渲染。对于window is not defined，我使用window-or-global（https://www.npmjs.com/package/window-or-global），它解决了我的问题。

但是，说到document，我实际上没有发现任何有用的东西。我的想法是尝试找出服务器或客户端何时呈现。我只会document在客户端渲染时执行代码。有没有办法做到这一点？

P/S：我使用的是 Vue.js 2.0。我使用的包是fine-uploader ( https://www.npmjs.com/package/fine-uploader )

我的 webpack 看起来像这样：

从“webpack”导入 webpack；从“路径”导入路径；

巴别尔：

我想导入我的routes.js文件，它只是一个包含路由描述并使用 react-router 的小文件

当我尝试这样做时，它一直在说：

我该如何解决？

在我的 React 应用程序中，我使用windowobject 、documentobject 和localStorage.

为避免错误，我将其设置为：

但是在我的应用程序中，我希望使用真实的窗口、真实的 localStorage 和真实的文档，而不是我上面设置的内容。

localStorage创建了这个目录scratch.是不是说浏览器localStorage现在不能用了？

此外，如果我尝试控制台 doc 变量并用于代替正在产生问题的文档变量，则控制台语句会给出此信息：

这是我的脚本：

这里 getElementByTagName 返回 undefined 而不是应有的元素。我该如何解决？

我试图在服务器端渲染期间为一个简单的应用程序传递数据。

我在服务器和客户端都有这个数据提供者，我使用全局变量将初始状态注入客户端：

在服务器中，窗口。INITIAL_STATE被通过 prop 传入的实际数据替换：

并且数据提供者呈现路由器上下文而不是子...

问题是在服务器渲染期间没有定义上下文。就好像从来没有传入过一样。然后当 javascript 包到达客户端时，它使用窗口。INITIAL_STATE变量并从服务器停止的地方开始。它可以工作，但我不妨不做任何服务器端渲染。有什么我想念的吗？或者可能 renderToString() 不支持上下文？

我正在尝试优化我的通用反应应用程序。似乎 bundle.js 在服务器端渲染重置整个 DOM 后读取。

我的理解是 React 客户端 javascript 不会重置整个 DOM，而是计算差异并在现有 DOM 上附加额外的 DOM 和事件。

我的 bundle.js 是 1.3 MB，这绝对是渲染缓慢的原因，但我没想到会重新渲染整个 DOM。

我的问题是通用渲染的预期行为吗？以及如何不重置所有 DOM？

服务器/index.js

客户端/index.js

HTML.jsx

我可以在不使用 redux 或任何存储容器的情况下为我的页面进行服务器端渲染，而只对路由器做出反应吗？我的初始页面从 api 获取一些数据。我应该如何将其传递给服务器上的反应组件。如果我在服务器上使用窗口变量，我会收到一条错误消息，提示窗口未定义。任何帮助都会很好。

我不想用，redux。我尝试获取初始数据状态，如何将其传递给服务器端的组件。使用窗口变量没有帮助，因为窗口没有在服务器上定义。

以上没有奏效

我正在构建一个通用应用程序，React它通过和Redux在服务器端呈现。NodeJSExpressJS

一切正常，Express 处理程序调用{match} from 'react-router'并且new store instance每次都会创建一个。

我遇到的问题是：{renderToString} from 'react-dom/server'只呈现pristine商店的版本，如果有东西改变了商店（例如：通过 调度的动作componentWillMount），商店将被更新，但在调用generated markup新的之前不会改变。renderToString

1. 我不知道减速器将如何（按请求）更改状态，因此，我无法在调用之前提供初始状态renderToString。
2. 我想避免再renderToString打电话。

这是我的示例代码：

我有一个 vue.js 应用程序，它与 webpack 捆绑在一起。我使用vue-server-renderer它在服务器端呈现它。那里一切都很好。在我的 webpack 配置中，我使用的是ExtractTextPlugin：

如果我使用allChunks: true，那么我会得到一个 css 文件，一切正常。但是在一个不理想的大型应用程序中。现在我有一堆已加载但未在页面上使用的 CSS。

如果我设置allChunks: false了，那么我会得到一个较小的初始文件，并且当前组件的 css 会在页面加载时注入头部。这几乎是我想要的。但是这里的问题是，如果您使用的是 SSR，那么您会在没有 CSS 的情况下在页面中获得初始 HTML，然后当 CSS 加载时，所有内容都会正确呈现。

我想要的是在我的 SSR 渲染功能期间，我可以访问当前页面的 CSS，并在返回浏览器之前自己将其注入头部。

我试图构建一个 webpack 加载器，但我认为这是不对的，而且我在与css-loader.

我认为这应该是 或 的vue-loader问题vue-server-renderer。不太确定从这里去哪里。所以我想我正在寻找一些指导，有没有其他人知道这一点，或者可以指出我正确的方向。

为了测试 VueJS 服务器端渲染，我试图弄清楚一些事情。我使用最新的VueJS Hackernews 2.0作为这个项目的样板。

目前我坚持这个：

服务器使用 预取数据preFetch。都好。当用户路由到这个组件时，相同的函数在beforeRouteEnter函数内部被调用。都好。

但是，当用户第一次加载它时，该preFetchData函数会被调用 2 次。一进preFetch一进beforeRouteEnter。

这是有道理的，因为这正是 Vue Router 的工作方式。preFetch在服务器上运行，一旦 Vue 在客户端呈现，beforeRouteEnter就会调用。

但是，我不希望 Vue 在第一次加载时执行 2 次，因为数据已经从服务器端渲染功能存储在存储中preFetch。

我无法检查数据是否已经在商店中，因为我希望该组件始终在beforeRouteEnter. 只是不是当它来自服务器时第一次呈现时。

在这种情况下如何只获取一次数据？

在上面：API 调用是在store.dispatch('GET_ITEMS')

我一直在努力使我的 vuejs 应用程序在 SSR 上运行良好，但我所有的尝试都失败了。我真的需要这方面的帮助。

请注意，我使用的是普通的 js 文件，而不是 es6 的 .vue 文件，并且需要使用 webpack require 函数的 html 模板。

该应用程序在开发模式下运行良好，但是，当我开始使用 'vue-server-renderer' 执行它并转到任何路线时，将引发此错误：

错误：组件中未定义渲染函数或模板：在 renderComponent (/Users/salaahassi/ dev/vue/magicum/node_modules/vue-server-renderer/build.js:6081:3) 在 renderNode (/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:6065: 7) 在渲染 (/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:6257:5) 在 RenderStream.render (/Users/salaahassi/dev/vue/magicum/node_modules/ vue-server-renderer/build.js:6312:9) 在 RenderStream.tryRender (/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:96:12) 在 RenderStream._read (/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:125:12) 在 RenderStream.Readable.read (_stream_readable.js:348:10) 在 resume_ (_stream_readable.js:737:12) 在 _combinedTickCallback (internal/process/next_tick.js:74:11)

此外，当我在浏览器上禁用 javascript 时，甚至主页也会消失（这当然是因为它不能从 SSR 工作）。

这是我的网络包：

这是我的服务器入口文件：

这是我的 server.js：