React.js：某些组件可以只进行 SSR 渲染吗？

Question

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

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

*我发现它通常大得可笑。一个原因（afaik）：每个组件都必须能够在状态更改和 SPA（又名软、虚拟..）页面导航时重新呈现，因为所有更改都是作为数据传入的，而不是作为预渲染的 html 块（afaik） .

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

1) 高度动态的“facebook-ish”交互部分 个人问候、消息和消息计数器、喜欢和回复……这里默认的 React 行为处于最佳状态：新数据进来，全局状态（redux 存储）更改，所有受影响的组件都得到重新- 渲染。如果没有 react 和 redux sound 原则，这将是一项艰巨的任务。当然，客户端渲染/更新是必经之路。

这通常是顶部的用户登录区域（“你好乔，5 条未读消息”），中间是一些实时数据（股票、天气等），靠近底部的是评论。

2）SSR“静态”内容（想想PHP）

但是，对于我确定的许多部分，没有什么是客户端动态的。例如，页脚菜单可能源于数据库，但在会话期间肯定不会更改。（即使 John Doe 决定喜欢、评论或更改他的名字……）

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

尽管如此，我必须将所有组件都提供给客户端包，以便虚拟/软页面导航也能工作......（传输新数据，但不传输预渲染部分）

---

您可以告诉我作为一种解决方法，将页脚简单地保持在反应容器安装点之外，但这不是我的观点......可以使用纯 SSR 的“静态”又名部分也可能在其他地方，在动态标题和较低之间响应/反馈/喜欢部分...

---

我想将 Type-2-components 标记为“SSR-is-enough”（还有它们的子组件——除非 webpack 依赖树弄清楚，它们也用于 Type1-CSR-components ......）。

所以将它作为单个 html blob 发送。还需要在 SPA 式虚拟页面导航上“预渲染”它。（因为组件知识将从客户端包中丢失）

有没有办法做到这一点？之前有人想过这个普遍的，恕我直言的常见问题......？

Answer 1

仅对某些成分进行水合肯定是一个正在考虑的问题。

Astro是一个解决这一问题的 Web 框架。它只水合实际相互作用的成分。

另一个是Fresh，它有一个概念叫“岛屿”。整个页面是服务器端生成的，当您需要交互性时，您可以创建一个“岛”，它是在客户端上水合的组件。