How to integrate Three.js with Next.js 15 App Router while maintaining high performance?

I am working on a **3D interactive menu for a restaurant** and I want to use **Three.js** inside the **Next.js 15 App Router**. My main challenges are: 1. How to prevent the 3D scene from re-rendering on every route change? 2. What is the best way to load heavy 3D models (GLTF/GLB) without blocking the main thread? 3. Should I use `react-three-fiber` or stick with vanilla Three.js for better control in a Next.js environment?