问题标签 [server-side-rendering]

我第一次在我的 React/Redux 应用程序中尝试服务器端渲染。我现在遇到的一个问题是我需要初始状态有一个随机生成的字符串，然后将它作为道具传递给我的主要App组件。这显然会导致问题，因为它为客户端和服务器生成不同的字符串。我能做些什么来阻止这个问题的发生吗？

帮助理解的基本结构：

应用程序.js

还有我的减速机：

减速器.js

如您所见，我randomStr从我的 redux 商店获取并渲染它，但它在客户端和服务器中是不同的。任何帮助，将不胜感激！

如何同时利用 SSR 和离线优先功能并将这两种技术融合在一起？

SSR 能够渲染我的 javascript 模板，以更快、无闪烁地加载应用程序，最重要的是，它可以使任何页面对 SEO 和 NOjavascript 友好，这对于搜索引擎、社交网络爬取我们的网站并提供更好的页面可访问性非常重要。

离线第一服务工作者将使我能够存储我的应用程序的外壳，也许还有一些页面内容。

对于应用程序外壳架构，我相信您希望您的服务器提供一个简单的 index.html 文件，该文件可以很容易地被服务人员缓存一次。但是，使用 SSR，您将提供一个动态呈现的页面，该页面会根据路由发生的变化而变化，因此您最终会缓存每个页面！

我在让 PrerenderIO 在我的应用程序上工作时遇到问题。我正在跑步meteor@1.3.5.1，prerender-node并且我已经server/prerenderio.js像这样设置了这段代码

我settings.json喜欢这样

当我在本地主机上启动服务器时，我在日志中得到了这个

所以，我有 PrerenderIO 的本地服务器正在运行port:3033，当我运行时http://localhost:3000/?_escaped_fragment_=，它需要很长时间，然后返回“找不到本地主机”并在我的流星服务器日志上记录一些错误。

此外，当我将应用程序部署到我的主机并访问我的 prerender.io 仪表板时，我仍然看到我尚未安装我的 prerender 令牌的警告。

当我访问时，http://localhost:3033/http://localhost:3000我得到没有图像的缓存页面

请注意我已经尝试了以下软件包dfischer:prerenderio，dferber:prerender但同样的事情。

我有一个 ASP.NET 网站，我正在尝试将一些 Angular 2 内容合并到其中。网站上有各种各样的页面，有很多静态内容。在某些页面上，我需要渲染一些呈现为 Angular 2 应用程序的动态内容。

这在客户端不是问题，因为我已经设法遍历占位符元素（由data-dynamic-app它们上的属性标识），并为每个元素引导适当的 Angular 应用程序。十分简单。

但是，出于 SEO 的原因，我需要添加服务器端渲染，以便页面的 Angular 部分在它们到达客户端代码之前被渲染。挑战在于，我正在尝试将其构建到现有的 Visual Studio 解决方案中，用于通过 IIS 提供服务的 ASP.NET 网站，但我不确定如何去做。

我一直在脑海中构思想法，但作为一个没有 Angular Universal 经验的前端开发人员，我无法确定哪些想法是完全疯狂的，哪些实际上可能会让我有所收获。以下是我脑海中闪过的几件事：

• 通过 Angular Universal 代理 ASP.NET 应用程序的整个 HTML 输出，并预渲染动态部分。
• 使用在 ASP.NET Core 中完成并内置 AngularUniversal 的Angular2Spa应用程序，并以某种方式使其从现有的 ASP.NET 站点中提取内容。

以上可能或可能根本没有任何意义，我不知道它们的“如果”或“如何”。我对 ASP.NET、IIS 甚至 Angular Universal 都不熟悉。因此，任何澄清/改进上述内容的想法，或完全不同和更好的想法都将不胜感激。

好的，这个问题可能揭示了对经典 HTML/javascript 组合的基础知识的误解，但这里有......

假设我有一个（相对）简单的应用程序，它利用同构 Javascript 的概念，首先在服务器端呈现，然后由浏览器呈现。例如，这个：

https://github.com/jesstelford/react-isomorphic-boilerplate

该应用程序首先呈现以下服务器端（通过 res.send()）：

内容胡须包含一些 React 代码。

然后，浏览器会在 script 标签中选择经过浏览器化的包（其中包含完全相同的 React 代码）。React 显然看到状态没有变化，因此不会重新渲染 DOM。页面加载速度很快，用户不会看到任何变化（没有闪烁）。

不过，这是我的问题：为什么渲染的 DOM 元素只出现一次？

鉴于它在上面的 HTML 中出现了两次（在 div 行和 script 行中），我原以为你会看到它两次。相反，浏览器的版本只是替换了服务器渲染的版本。这显然是一个非常有用的效果，但如果有人能向我解释为什么事情会这样运作，我将不胜感激。

谢谢

我正在编写一个使用服务器端渲染的社交网站，

例如，当用户创建帖子时，用户从服务器接收到呈现的帖子 (HTML)，

并将 HTML 附加到 Dom。

--

现在问题来了，

当我选择在服务器上渲染所有内容时，

我应该在哪里渲染“小东西”？

例如，如果我想在用户上传照片之前生成照片预览，

我应该在 cilent 端创建一个标签，

然后用 JavaScript 修改它，

或者只是从服务器请求预览以使您的网站“完全”服务器端呈现？

如果我选择前一种方案，我的网站将变得难以管理（因为它就像 cilent-side render 加上 server-side render ，这让我很难管理模板）

我更喜欢后一种解决方案，这样我就可以在服务器上管理我的所有模板，

但这取决于互联网速度，一旦用户离线，我就无法做任何事情，

我应该怎么办？

Most examples I come across seem to always fetch the data from URL.

But on server side, would it not make sense to fetch data directly from the database ?

So in the action creator it would look something like:

What are the Pros and Cons of this method relative to other data-fetching methods ?

嗨，我正在尝试在我的 reactJS 项目中使用 react-rte。我有服务器端渲染，每次我想使用这个包时，我都会得到：

我想问题可能出在同构工具上，但我不知道如何将包导入到已经定义窗口的客户端。

在 React JS 中，在开发中，我有服务器渲染工作。此外，我确保服务器渲染和客户端渲染之间具有相同的校验和。客户端渲染与服务器渲染相同，但是在两者之间切换期间屏幕上会出现白色闪烁。是什么原因造成的？

在服务器端渲染中，结构是否需要我们将应用程序渲染两次？在 server.js 文件中，如下所示，应用程序结构被渲染并发送到客户端。虽然Server.js已经生成了完整的代码，但Client.js通过调用 render 函数再次生成。

所以应用程序的最终结构，据我所知，它是：SERVER.js（呈现 HTML，获取初始状态并将其设置在PRELOADED_STATE变量中，使用 renderFullPage 函数呈现页面）==> CLIENT.js（使用PRELOADED_STATE变量_

如果我错了，请纠正我。如果没有，我们不能只做一次吗？

服务器.js

客户端.js