React.js:某些组件只能进行SSR渲染吗？

Question

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

可以将页面的某些组件限制为仅呈现服务器端吗？并相应地减少客户端javascript包？。

*我发现它的规模往往大得离谱。原因之一(afaik)：每个组件必须具有在状态更改和SPA上重新呈现的能力(也就是软的、虚拟的.)页面导航，因为所有的更改都是以数据的形式出现，而不是作为预录制的html块(afaik)。

​

​

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

1)高度动态的“facebook-ish”交互部分个人问候、消息和留言计数器、喜欢和回复…。在这里，默认的反应行为处于最佳状态:新数据进入，全局状态(redux存储)改变，所有受影响的组件重新呈现。这将是一项艰巨的任务，没有反应和健全的原则。当然，客户端的呈现/更新也是可行的。

这通常是顶部的用户登录区域("Hello，5条未读消息“)，一些实时数据(股票、天气、…)。在中间和说的评论接近底部。

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

但是，对于我所知道的很多部分来说，没有什么是客户端动态的。例如，页脚菜单可能来自数据库，但肯定不会在会话期间更改。(即使无名氏决定喜欢、评论或更改他的名字…)

只提供服务器端就足够了。通常，主内容块也可以只使用SSR。(以及呈现html所需的所有布局-ish子组件)

不过，我必须将所有组件都交给客户端包，以便虚拟/软页面导航工作.(它传输新的数据，而不是预先呈现的部分)

你可以告诉我，作为一个解决办法，只是让页脚远离反应容器安装点，但这不是我的重点.“静态”，也就是可以使用纯SSR的部分，也可能在其他地方，在动态标头和低响应/反馈/喜欢的部分…之间。

我想将类型-2-组件标记为“SSR-is-足够”(以及它们的子组件-除非webpack依赖树计算出来，它们也用于类型1-CSR-组件，也是…)。。

因此，将其作为一个html blob发送。另外，在SPA-ish虚拟页面导航上接收到它的“预呈现”也需要afaik。(因为客户端包中缺少组件知识)

有办法做到这一点吗？以前有没有人想过这个普遍的、普遍的问题.？

Answer 1

只给某些部件补水肯定是一个正在考虑的问题。

解决问题的一个web框架是阿童木。它只是水合物的组成部分，实际上是互动的。

另一个是鲜食，它有一个叫做“岛”的概念。整个页面都是服务器端生成的，当您需要交互时，您可以创建一个“孤岛”，它是一个在客户端被水化的组件。