使用服务器端呈现来反应大量内容和重复

Question

ReactJSS̶i̶n̶g̶l̶e̶带壳的页面应用

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

   <Route component={ Layout }>
      <Route path='/' components={{ body: Home }} />
      <Route path='/counter' components={{ body: Counter }} />      
   </Route>;
   /* project includes Home.tsx, Counter.tsx and other components/subpages */
   

   Home.tsx的一部分：

   class Home extends React.Component<any, void> {
     public render() {
       return <div>
           <h1>Hello, world!</h1>
           <p>Welcome to your new single-page application, built with:</p>
   

   结果

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

     

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

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

   结果

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

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

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

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

它接触不这么多人都知道它，因为这些问题在很多样本中并且在教程中没有提到。

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

<h1 id="react-hint-for-element-9997">/* here will be header*/</h1>
    <h2 id="react-hint-for-element-9998">/* here will be subheader*/</h2>
        /*and so on and on */

Answer 1

问题1

您可以使用Webpack code splitting将应用分成多个捆绑包。

它提供require.ensure在需要时延迟加载包（例如，当用户点击新路线时）：

示例（来自Webpack文档）：

//static imports
import _ from 'lodash'

// dynamic imports
require.ensure([], function(require) {
  let contacts = require('./contacts')
})

问题2

React（尚未）区分静态和动态内容。 Inferno是一个类似React的库，可以进行区分以提高渲染性能。对于您的用例，它可能比React更合适。

示例（来自Inferno docs）：

import Inferno from 'inferno';
import InfernoDOM from 'inferno-dom';

const message = "Hello world";

InfernoDOM.render(
  <MyComponent message={ message } />,
  document.getElementById("app")
)