I'm using Next.js for server-side rendering of a new project. I have a basic project with routing up and running. I'm using TypeScript, but I doubt it matters.
I'd like to have images lazy loaded, but I didn't find any component that supports lazy loading images for server-side rendering.
Here's how I see things at the moment -
Server-side rendering will respond to the client with the HTML template of the first rendering of the page.
On the client-side, once the HTML is loaded, images will begin lazy loading according to client-side logic.
I'm very new to server-side rendering, I imagine I'll have a similar issue with other functionalities that should be rendered at run-time on the client-side.
I'm trying to understand how to separate the logic for the first rendering which occurs on server-side and further dynamic rendering which I'd like to happen afterwards on the client-side like any other single page application.