Inside my app/ folder there is a tsx file that initializes a firebase app objects and exports it:

const app = initializeApp(firebaseConfig)

const db = getFirestore(app)
const auth = getAuth(app);

export {db, auth}

Within my page/index.tsx file I can use that app instance from both the client side code:

export default function Home() {
    useEffect(() => {
        setDoc(doc(db, "collection", "124"), { name: "cool                   name" })
        console.log("added documnet")
    })
    return (
        ...
    )
}

And from within server side code:

export async function getServerSideProps() {
    setDoc(doc(db, "games", "124"), { name: "cool name" })
    console.log("added documnet")
    return {props:{}}
}

I don't understand why this works.

Can someone please explain what the lifecycle of the firebase 'app' object is and why it can be accessed this way?

For example, is the firebase app instance initialized when the server is built or when the code is run from a browser?