Rendering both layouts and hiding one with CSS is the right call for the first paint. One cost the hidden copy still carries: it mounts, so row level hooks and avatar images run twice. Putting loading="lazy" on images keeps the hidden layout's images from being fetched, which matters once the list gets long.
Tarun Sharma
React.js Frontend Web Developer | Next.js Specialist
Rendering both layouts and hiding one with CSS is the right call for the first paint. One cost the hidden copy still carries: it mounts, so row level hooks and avatar images run twice. Putting loading="lazy" on images keeps the hidden layout's images from being fetched, which matters once the list gets long.