我有一个关于服务器端渲染的问题，特别是在Next.js.上
当我渲染服务器端时，这是正确的"执行路径"吗？
- 客户端点击服务器请求网页服务器仅提供HTML我的应用程序版本(没有数据或JavaScript(
- 一旦客户端的浏览器有东西可以查看，JavaScript就会在交互的背景
- 一旦数据提取完成，数据就会作为Prop发送到客户端
我知道在服务器端渲染的页面中，服务器负责获取数据。
但是：服务器是否获取数据，在必要时将其放入应用程序，然后为页面提供服务器或它是否首先为页面提供服务器，然后获取数据，然后发送数据
如有任何帮助或解释，我们将不胜感激。
服务器是提取数据，在必要时将其放入应用程序中，然后为页面提供服务器，还是先为页面提供服务，然后提取数据，然后发送数据？
这取决于情况。如果您的数据是在getServerSideProps中检索到的，那么当最初请求页面时，该函数将在服务器上运行，用于在服务器上呈现React组件并生成发送到浏览器的HTML。如果用户随后导航到另一个页面，则显示该页面的所有组件都已在浏览器中可用，然后只有getServerSideProps在服务器上运行，数据被发送到客户端，然后客户端将React组件与该数据直接呈现到DOM中。
如果您的数据是通过/api/路由检索的，那么它总是在客户端获取，而从不用于服务器端渲染。
服务器端渲染究竟是如何工作的？
function App() {
return <div>
<Headline />
</div>;
}
function Headline() {
return <h1>some headline</h1>;
}
当React渲染时，它基本上递归地调用所有组件(也称为返回对象的函数(，直到它到达一个只包含表示HTML元素的对象的树，它看起来像这样：
{
key: "div",
children: [
{
key: "h1",
children: ["some headline"]
}
]
}
(您可以通过记录调用组件返回的内容来查看该树，即console.log(App())(
现在有了这个树，就可以生成一个HTML字符串，即：
"<div><h1>some headline</h1></div>
这就是NextJS对服务器端渲染的作用。然后，该字符串将被发送到浏览器。此外，它将把所有组件(又名函数(作为JavaScript代码发送到浏览器(除了getServerSideProps等服务器端函数(。然后，组件(也称为函数(将在浏览器中再次调用，生成同样用于生成HTML字符串的节点树(但现在也会触发效果并创建状态(。现在，这个节点树被用来修改DOM(浏览器中HTML页面的表示(：
const parent = document.createElement("div");
const child = document.createElement("h1");
child.textContent = "some headline";
parent.appendChild(child);
现在有了NextJS使用的水合，React将尝试重用现有的DOM结构，而不是创建新的DOM结构。当组件重新渲染时(即更新状态、单击按钮等(，它只会获取通过重新渲染组件返回的更新树，并使用它来替换DOM中的相应节点。