在使用 three.js 渲染 3D 模型时，使用 Next.Js 与普通 React 相比有什么优势吗？答案

【问题标题】：Is there any advantage of usage Next.Js over plain React when it comes to rendering of 3D models with three.js?在使用 three.js 渲染 3D 模型时，使用 Next.Js 与普通 React 相比有什么优势吗？
【发布时间】：2021-07-29 01:37:57
【问题描述】：

我过去曾应用过3D product configurator，想知道如果在普通 React 上使用 Next.JS 的“服务器端渲染”，3D 模型是否会表现得更好（应用程序的 FPS）。

【问题讨论】：

标签： reactjs three.js 3d next.js react-three-fiber

【解决方案1】：

three.js 依赖于您设备的显卡 (GPU) 和 WebGL API。服务器通常两者都没有，所以我预计性能会更差——而不是更好——除非你在服务器上花很多钱。存在在服务器上模拟 WebGL 1.0 的库（请参阅 headless-gl），但我还没有看到用于更现代 Web 图形 API（如 WebGL 2.0 和 WebGPU）的稳定库。

您可以通过缓存渲染的第一帧将显示的图像并在加载 three.js 库时显示该图像来缩短 First Contentful Paint 的时间，从而提高感知性能。也许 SSR 可以帮助解决这个问题。但我不希望在任何情况下以 60fps 的速度从您的服务器流式传输实时图像——在第一帧之后渲染可能最好在客户端完成。

由大型团队（Google Stadia、GeForce Now）支持的某些技术确实能够提供服务器端实时渲染，但这可能不是您想在带有模拟 WebGL API 的 next.js 应用程序上尝试的。

【讨论】：

【解决方案2】：

客户端渲染 (CSR) 具有较长的初始加载时间，因为 CSR 服务器发送客户端 javascript（而不是 html）。然后客户端的网络浏览器执行该javascript并根据js代码创建html结构。

在服务器端渲染 (SSR) 中，服务器执行提供的 javascript 并创建适当的 html 结构并将其放入 index.html（或适当的 html 文件）中。当用户请求 html 文件时，服务器直接将 html 发送给用户，而不是 javascript。

因此，SSR 将提高应用程序加载的性能，但取决于您正在做什么，使用 SSR 可以获得更多优势或劣势

关于一项研究，我发现这取决于您的工作，您可以在某些用例中更好地利用 SSR 和其他 CSR

link.springer.com/article

在服务器端渲染中，服务器渲染 3D 场景，计算视图并将其作为图像发送到客户端，在第二种方法中，网格数据被传输到最终渲染它的客户端。服务器端渲染的主要优点是网格不必通过网络发送，这在我们处理大型模型时尤其重要。另一方面，客户端渲染可以利用硬件加速，并提供更自然的用户导航。不幸的是，无法在客户端渲染大型网格，因为它的计算能力会被超出。这就是应用渐进式网格算法的地方

【讨论】：