Is there any advantage of usage Next.Js over plain React when it comes to rendering of 3D models with three.js?

Viewed 673

I did application of 3D product configurator in past and wonder whether 3D models would perform better (FPS of the application) if "server side rendering" of Next.JS is used over plain React.

2 Answers

three.js relies on your device's graphics card (GPU) and the WebGL API. Servers typically have neither, so I would expect performance to be worse — not better — unless you're spending a lot of money on the server. Libraries to emulate WebGL 1.0 on the server exist (see headless-gl) but I haven't seen stable libraries for the more modern web graphics APIs like WebGL 2.0 and WebGPU.

You might be able to improve time to First Contentful Paint, improving perceived performance, by caching an image of what the first frame rendered will show and displaying that while the three.js library loads. Perhaps SSR could help with that. But I wouldn't expect to stream realtime images from your server at 60fps in any case — rendering after the first frame is probably better done on the client.

Certain technologies backed by large teams (Google Stadia, GeForce Now) do manage to provide server-side realtime rendering, but this is probably not something you want to attempt on a next.js application with an emulated WebGL API.

Client side rendering (CSR) has high initial loading time because CSR server send the client javascript (not the html). Then client's web browser execute that javascript and create the html structure according to the js code.

While in Server side rendering (SSR), server execute the provided javascript and create the appropriate html structure and put it in index.html (or the appropriate html file). When a user request the html file, server directly send the html to the user, not javascript.

So SSR will improves performance of an application Loading but depending on what you're doing you could get more advantage or disadvantage using SSR

Regarding to a study I found it depends what you do, you could in some use case have better advantage of SSR and in other CSR

link.springer.com/article

In server side rendering, servers render 3D scene, compute view and send it as a image to the client, in the second approach, mesh data are transmitted to the client which finally renders it. The main advantage of server side rendering is that mesh doesn’t have to be sent over the network, which is especially important when we deal with large scale models. On the other hand client side rendering could utilise hardware acceleration, and provide more natural user navigation. Unfortunately large meshes can’t be rendered on the client side, because its computational power would be exceeded. That’s where progressive mesh algorithms are applied

Related