Next.js中服务端渲染（SSR）工作原理及执行路径求证

你理解的执行路径存在错误，Next.js SSR的正确流程如下： #

• 客户端发起网页请求
• 服务器先获取页面所需的数据，接着在服务端将React组件结合获取到的数据渲染成包含完整内容的HTML页面
• 服务器把这个带数据的HTML页面返回给客户端，客户端浏览器加载后直接能看到完整的可视化内容
• 客户端同时下载对应的JavaScript代码，完成「水化（Hydrate）」过程，让页面具备交互性

核心疑问解答 #

服务器是先获取数据并注入应用后再返回页面，这也是SSR的核心特点：

• 区别于客户端渲染（CSR）先返回空HTML再异步获取数据，SSR在服务端就完成了数据获取与页面渲染，返回给客户端的是已经填充好内容的完整HTML
• 这种模式能提升首屏加载速度，同时让搜索引擎更易抓取页面内容

内容的提问来源于stack exchange，提问作者Time2learn