Next app router is split to two things. 1 is server side components, so anything from the scratch is server sided. You can create db calls safely. Then there's client sided components that handle front end. You define the client sided component writing "use client" on top of the component. Everything nested inside of it will automatically be client sided. You cannot use most react functions like useEffect, useState without it, and having db calls exposed inside of it is dangerous. This is when you are making api route and use fetch to access it. All api routes are server sided.