React.js:某些组件是否只能进行SSR渲染?

时间:2018-04-07 07:09:07

标签: javascript reactjs webpack webpack-2

来自一些经典的服务器端模板语言(php,jsp),我对React.js有一个一般的架构问题:

我是否可以限制页面的某些组件仅在服务器端呈现?并相应地减少客户端javascript包?

*我觉得经常大得离谱。一个原因(afaik):每个组件必须具有在状态更改和SPA-(又称软,虚拟......)页面导航时重新呈现的功能,因为所有更改都以数据形式出现,而不是作为预呈现的html块(afaik)

enter image description here

基本上,我在几乎所有的网络项目中都看到了两种不同类型的内容部分:

1)高度动态的“facebook-ish”互动栏目 个人问候,消息和消息计数器,喜欢和回复...这里默认React行为处于最佳状态:新数据进入,全局状态(redux store)更改,所有受影响的组件都重新呈现。没有反应和redux声音原则,这将是一项艰巨的任务。当然,客户端渲染/更新也是可行的方法。

这通常是顶部的用户登录区域(" Hello Joe,5条未读消息"),中间的一些实时数据(股票,天气......)并且评论更接近于底部。

2)SSR“静态”内容(想想PHP)

但是,对于我确定知道的许多部分, nothing 是客户端动态的。例如,页脚菜单可能源于数据库,但在会话期间肯定不会更改。 (即使John Doe决定喜欢,评论或更改他的名字......)

仅在服务器端渲染它们就足够了。主要内容块通常也可以仅使用SSR。 (以及渲染其html所需的所有layout-ish子组件)

但是,我必须将所有组件都提供给客户端软件包,以便虚拟/软页面导航工作......(传输新数据,但不传输预渲染部分)

你可以告诉我一个解决方法,只是简单地将页脚放在反应容器安装点之外,但这不是我的意思......"静态"也可以在动态标题和较低响应/反馈/喜欢部分之间的其他地方使用纯SSR的部分......

我想将Type-2-components标记为" SSR-is-enough" (以及它们的子组件 - 除非webpack依赖关系树计算出来,它们也用在Type1-CSR组件中......)。

因此将其作为单个html blob发送。同时接收它"预渲染"在SPA-ish虚拟页面导航将需要afaik。 (因为客户端包中缺少组件知识)

有办法做到这一点吗?有没有人在......之前想到这个一般的,非常常见的问题?

0 个答案:

没有答案