英文:
Why do server components needs to be Hydrated?
问题
因此，如果我理解服务器组件的工作原理，它将向客户端返回HTML，然后在加载初始JavaScript捆绑包后，将从服务器获取一个JSON文件，以表示其虚拟DOM节点，以从该组件中水化初始HTML。
但是，在Next.js中，服务器组件不能具有客户端逻辑，这意味着这些组件中的HTML的唯一部分，可以根据客户端状态进行变异或可以发出事件的部分，位于客户端组件内部。
那么，如果我们不使用它，水化所有标记的意义何在？除了在渲染组件之前运行服务器端逻辑之外，是否有任何优势，而不仅仅是确保服务器和客户端运行相同的JavaScript来进行水化或创建HTML？
英文:
So, if I understood how server components work, it will return the html to clients, and then, after loading the initial javascript bundle, it will get from the server a json file to represent its virtual DOM node to hydrate the initial html from that component.
But, in NextJS, server components cannot have client-side logic, which means the only part of the HTML from those components that can be mutated based on client state or that can emit events is inside client components.
So, what is the point of hydrating all the markup if we will not use it? Beside running server-side logic before rendering the components, is there any advantage in doing that instead of just making sure that the server and clients run the same javascript to hydrate or create the HTML?
答案1
得分: 1
-
服务器组件的数据以JSON格式发送到客户端。客户端仍然必须从这些JSON数据构建DOM。
-
服务器组件还可以渲染客户端组件。
最终，服务器组件传输到客户端，客户端必须为用户创建适当的结构。
英文:
-
Data from server components is sent as JSON to the client. the client still has to build DOM from this JSON data.
-
server components can also render client components.
eventually, server components go to the client and the client has to create proper structure for the users
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论