问题标签 [server-rendering]

我使用 Microsoft 的 aspnetcore-spa 生成器使用 React+Redux 生成了一个新的 ASP.NET Core SPA，并尝试将它与 ant-design 和babel-plugin-import一起使用，并且第一次页面将成功呈现，但是一次刷新，每次都会抛出以下错误，即使重启了dotnet应用程序。

处理请求时发生未处理的异常。

异常：调用节点模块失败并出现错误：预渲染因错误而失败：错误：在 webpackMissingModule (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ 中找不到模块“../../style/index.css”) ClientApp\dist\main-server.js:595:66) 在对象。(C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:595:164) 在webpack_require (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main- server.js:20:30) 在对象。(C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:387:13) 在webpack_require (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:20:30) 在 Object.defineProperty.value (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\ dist\main-server.js:168:14) 在webpack_require (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:20:30) 在 Object. (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:65:16) 在webpack_require (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:20:30) 在 Object.defineProperty.value (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\ dist\main-server.js:40:18) 当前目录为：C:\Users\viccrubs\Documents\Projects\QuestionSample1 Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance+d__7.MoveNext()

这个 babel 插件在纯 react+webpack+typescript 项目中运行良好。在没有 babel-plugin-import 帮助的情况下手动从 antd 导入组件也会导致同样的错误。看起来是工作目录错误的问题，../../style/index.css在包含antd组件的目录下确实存在，但它应该已经被webpack处理了。而且第一次渲染效果很好也很奇怪。

示例： https ://github.com/viccrubs/QuestionSample1

或执行以下操作来重现它：

1. 使用 yeoman 生成器生成带有 React+Redux 项目的 ASP.NET Core
2. npm install --save antd babel-plugin-import
3. ThunkAction从 /ClientApp/store 下的文件中删除所有导入
4. 添加"plugins":[["import", { "libraryName": "antd", "style": "css" }]].babelrc
5. 在 Home.tsx 中添加任意 antd 组件
6. 添加"allowSyntheticDefaultImports": true,tsconfig.json
7. dotnet 运行并打开 localhost:5000
8. 应该是第一次渲染不会报错，但是一刷新，就会出现上面的错误。

请帮助我了解如何在 Angular Universal 中使用服务器渲染。

我做了什么。我访问了 Angular Universal 官方网站。设置 Node.js。已下载推荐项目 Angular 2 Webpack Starter。我在 Mac 上工作，所以使用 "> sudo npm install" 来安装 node_modules。按照建议添加 server.js。运行 "> node server.js" - 但是它不起作用。

如果我运行“> npm start”，则服务器在 localhost:3000 上启动 - 但似乎没有服务器渲染。如果我查看 HTML 页面，则只有 Angular 的 index.html。

在项目中添加服务端渲染能力应该怎么做？

非常感谢。

我正在构建一个带有服务器渲染的 MERN 项目。当有人拉项目（在服务器或本地）时，他会收到此错误：

TypeError: (0 , _reactRouter.createServerRenderContext) is not a function

但是在我的机器上它可以正常工作，没有错误。

另外，我使用的是 react-router 版本 4.0.0- alpha .5 - 也许是 alpha 版本的问题？

例如，如果我有一个名为 home 的页面。

当用户登录时，他会在导航栏上看到他的头像。

如果用户没有登录，他可以在导航栏上看到一个登录按钮。

我使用 Redux 来管理状态，使用 React Router 来做路由。

我的问题是，在服务器端，如何知道要渲染哪个视图。

这是我的问题，

1. 我有一个前端服务器（apache 或 nginx），并且有一些配置，如 proxy_pass“iamurl/server_render/”到“backend.iamurl.com:3000/”。
2. 我有一个在“backend.iamurl.com:3000”服务器上运行的服务器渲染 react-router 程序。（反应，反应路由器，koa2和redux）。
3. 当我在客户端运行它时，一切都是正确的。
4. 当我在服务器端运行它时，第一次服务器上的请求（koa2），我得到 ctx.url = / 所以路由器匹配。但是当 renderToString() 完成并且客户端收到响应时，location.path 是“/server_render”，所以 react-router 不会呈现我想要的。

我知道问题是客户端和服务器端的路径不同，但我认为这种情况（使用代理）在大公司中很常见。当浏览器收到服务器渲染响应时，如何正确运行？

我正在寻找每个人的想法。

我的路线代码（在客户端和服务器端之间共享）

这是我的服务器渲染代码

我已经看过很多关于在 Angular 通用应用程序中为客户端缓存数据的文章，因此它不会重复客户端上已经在服务器上解析的请求。

我只是不明白数据是如何从服务器传输到客户端的。我是否将 JSON 注入到预渲染的 HTML 中，还是我遗漏了其他内容？

我有一个应用程序，我在其中配置了服务器端渲染。一切正常，我的组件在服务器上呈现。问题是我的组件在屏幕上呈现了两次。一个来自<div id="content"><%- content %></div>我用于服务器渲染的那个，一个来自<script src="http://localhost:3001/bundle.js"></script>. 我使用 webpack 为我的服务器和客户端制作了两个捆绑包。为什么会发生这种情况，我该如何解决？

意见/index.ejs

index.js

服务器渲染

我正在观看此视频，并想了解在第一页加载期间组件的状态如何设置为组件。组件是否已经使用服务器端设置的状态构建，然后作为 HTML 发送到客户端，或者组件是否在服务器端构建，作为 HTML 发送到客户端，然后运行 ​​bundle .js 来获取数据？

在视频的 8 分钟左右，演讲者谈到需要设置窗口状态并与 React 状态同步。那是关于什么的？如果已经在服务器端设置了窗口，为什么还需要在窗口上显示状态？是不是因为它还没有被设置，它是从服务器单独发送下来的，客户端组件必须从窗口中抓取它？

我正在尝试从我的中间件中的 localStorage 获取授权标头。不幸的是，这在第一个页面加载时不起作用，因为它是服务器渲染的。

我该如何解决这个问题？

来源：http ://dev.apollodata.com/core/network.html

我正在研究 Angular4 项目。我按照本教程集成了服务器端渲染。一切正常，除了一件事。

从 API 服务器解析数据后，我需要更改页面的元标记。我的意思是这样解决：

在当前实现中，服务器发送渲染页面而不解析数据，解析请求发生在客户端。

谁能给我建议如何实现行为，当在服务器渲染上获取数据时，在结果将发送到客户端之前？