问题标签 [server-side-rendering]

我是reactjs的新手..

我正在尝试使用 renderToStaticMarkup 渲染组件（jsx），但出现以下错误：

错误：

server.js（片段）

组件.jsx

在像 ReactJS 这样的前端库中，我们不能手动输入 URL，因为最初没有加载路由器来查找该特定路由。这是通过一个插件meteor-react-router-ssr解决的，但是由于这个路由匹配整个页面刷新 - 它不再像 Meteor App 了。

所以问题是：我们可以只在启动时使用 SSR（这样如果有人输入一个 URL 可以重定向到正确的路由和 SEO），然后转移到没有 SSR 的 react-router 吗？

GoogleBot 是否在没有 Angular Universal 的情况下渲染 Angular 2？

ReactJS S̶i̶n̶g̶l̶e̶ 带壳页面应用程序

1. 没有服务器端渲染 (SSR)，重现问题的要求：我在没有 SSR的情况下为aspnet core React项目
   ReactJS + WebPack + React-Router
   使用了 Yeoman 生成器，在 Startup.cs 中禁用了 HotReloading（或者可以运行生产模式）

   Home.tsx 的一部分：

   结果

   • main-client.js包括 Home 和 Counter 组件（子页面）的所有内容/布局，以及其他子页面的所有内容和布局。
     这意味着我们正在加载应用程序的整个布局，即使我们只请求了一个子类别，例如 Counter
     停止网站后，您仍然可以在子页面之间切换，因为它们是通过 webpacked 加载的main-client.js。

     

     问题 1：是否可以仅加载您为当前页面请求的内容（应用程序外壳 + 当前子类别）？
     （然后对于另一部分，由于缓存的应用程序外壳，只有一个新的子类别）
     （可能使用另一个路由器和特殊的（web-）pack 设置）

2. 服务器端渲染（SSR），重现问题的要求：
   ReactJS + WebPack + React-Router + SSR
   我使用 Yeoman 生成器用于带有 Redux 和SSR的aspnet 核心 React项目，还在 Startup.cs 中禁用了 HotReloading（或者可以运行生产模式）

   结果

   • 现在更糟糕的是，我们两次加载整个网站布局：首先在完全呈现的 html 中，然后在内部main-client.js

   这表明对于 React 默认情况下，静态内容（控件内的静态文本）和动态内容（一些条件 html 输出）之间没有区别，因此它将所有信息都放在巨大的 JS 文件中。

   问题 2：是否可以为 React 提供有关静态部分的提示，因此只需要由服务器渲染一次并从客户端 java-script 中删除它，只留下动态计算/组件？

==================================================== ======

似乎没有多少人意识到这一点，因为这些问题存在于许多示例中，并且在教程中没有提及。

现在一种常见的方法是首先加载一个空的应用程序外壳布局，然后通过客户端 javascript 加载 JSON 数据以获取内容。然而它并没有解决这些问题，例如对于第一个问题，我们仍然为hole应用程序加载一个shell，而对于丰富的布局，它可能是一个非常巨大的JS文件，其中包含很多空的DOM元素：

我目前正在使用以下服务器端渲染逻辑（使用 reactjs + nodejs +redux）第一次同步获取数据并将其设置为存储中的初始状态。

fetchInitialData.js

我异步获取数据并加载输出以存储页面第一次使用回调加载的时间。

我需要在初始页面加载时进行 4 到 5 次 API 调用，因此考虑检查是否有一种简单的方法可以在页面加载时进行多次调用。

我是否需要链接 api 调用并手动合并来自不同 API 调用的响应并将其发送回以加载初始状态？

更新 1： 我正在考虑使用 axios.all 方法，有人可以告诉我这是否是一种理想的方法吗？

当我尝试使用 Vuejs 2.0 设置服务器端渲染时，我的项目遇到了这个问题：

我的client-entry.js文件：

我的server-entry.js文件：

我webpack的服务器构建配置：

还有我的server.js文件：

PS：我的客户端构建工作正常。

我正在使用一个名为“aspnetcore-spa”的 Yeoman 项目模板，它是一个与主要 SPA 框架（Angular2 和 React）结合使用的 ASP.net core 1 模板。

我用 Angular2 创建了一个项目。biolerplate 的代码工作正常，没有问题。一旦我将 Sass 加载器添加到 webpack.config.js 并从任何角度文件中引用 Sass 文件。

在 webpack.config.js 中：

在我的组件中：

我已经安装了与 sass loader 相关的 npm 包：

我检查了 wwwroot/dist 文件夹中的 main-server.js 文件，这是 webpack 捆绑的结果，我看到 .scss 文件已加载并且它们的样式已正确处理。但是，一旦我运行该应用程序，就会显示来自服务器端渲染端的此异常：

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

异常：调用节点模块失败并出现错误：ReferenceError: window is not defined at E:\Dev\MyApp\MyAppCore\src\MyApp.Web\ClientApp\dist\main-server.js:573:31 at E:\Dev \MyApp\MyAppCore\src\MyApp.Web\ClientApp\dist\main-server.js:568:48 在 module.exports (E:\Dev\MyApp\MyAppCore\src\MyApp.Web\ClientApp\dist\main- server.js:590:69) 在对象。(E:\Dev\MyApp\MyAppCore\src\MyApp.Web\ClientApp\dist\main-server.js:526:38) 在webpack_require (E:\Dev\MyApp\MyAppCore\src\MyApp.Web\ClientApp\ dist\main-server.js:20:30) 在 E:\Dev\MyApp\MyAppCore\src\MyApp.Web\ClientApp\dist\main-server.js:501:22 在 Object.module.exports (E: \Dev\MyApp\MyAppCore\src\MyApp.Web\ClientApp\dist\main-server.js:506:3) 在webpack_require(E:\Dev\MyApp\MyAppCore\src\MyApp.Web\ClientApp\dist\main-server.js:20:30) 在对象。(E:\Dev\MyApp\MyAppCore\src\MyApp.Web\ClientApp\dist\main-server.js:129:25) 在webpack_require (E:\Dev\MyApp\MyAppCore\src\MyApp.Web\ClientApp\ dist\main-server.js:20:30)

这显然是因为 webpack 的服务器端渲染，因为它在 Node.js 端运行代码（通过 ASP.net Core 的 Javascript 服务），并且有一个与 DOMwindow对象耦合的代码在节点上无效。

有什么线索吗？

我使用aspnetcore-spa 模板作为创建管理面板的起点。接下来我添加PrimeNG库以使用它的组件。

不幸的是，当我将 ButtonModule 导入到 app.module.ts 并刷新时，我收到错误消息“事件未定义”。好几天不知道是什么原因，谁能帮帮我？

更新

• 所以首先我生成存根yo aspnetcore-spa
• 下一个npm install font-awesome primeng --save

• 然后我将 font-awesome 和 PrimeNG css 文件添加到webpack.config.vendor.js

  /li>

• 重建供应商依赖关系webpack --config webpack.config.vendor.js

• 然后我将 ButtonModule 导入到 app.module.ts

现在，如果我启动应用程序，我会得到异常

指向这段代码的异常点

更新 2

我发现问题出在服务器端渲染中，所以我将其删除。它对我有用，但是如何在不打开服务器端渲染的情况下解决这个问题仍然很有趣。

我正在使用 react 创建一个示例页面，该页面使用renderToString()为 SEO 友好页面提供服务器端渲染。

这是我的 server.js 代码

我的页面是搜索页面，最初是静态的，当用户输入输入时，它会从后端获取数据并在同一页面中呈现组件列表。

当我在浏览器中查看查看页面源时，我只能看到初始静态内容，而不是在后端响应后呈现的列表的 html。

当组件状态发生变化时，获取更新的 HTML 的正确方法是什么。

我正在从/clientpanel我的服务器上的目录中为我的网站提供服务。所以我的网址是http://xxx.yy/clientpanel. 这是我的客户端代码：

在客户端，一切正常。所有 url 都相对于/clientpanel，但我对如何在服务器上进行这项工作有疑问。这是我的服务器端代码：

在第一页加载时，我需要/clientpanel在 url 中省略以完成这项工作，但随后在客户端单击第一次后<Link> /clientpanel添加到开头。如何使其在客户端和服务器端工作一致？