Firebase – Filling indexedDb with data, so you don't need to make a second request using Firestore

useState() in a Nuxt3 has a power of sending data to client after fetching it on server side (except rendered HTML file, it sends JSON file with data saved using useState()).

Like I mentioned in the title, I want to fill indexedDB on client side with data, so I don’t need to fetch data again. I enableIndexedDbPersistence(getFirestore()) in a plugin on client side.

Example of component where I want to save existing data to indexedDB:

<template>
    <div>
        <h1>Data</h1>
        {{ data }}
    </div>
</template>

<script setup lang="ts">
import { getDocs, collection, getFirestore } from '@firebase/firestore/lite'

const data = useState('test2')

// data.value === unknown on server side, but on client it has data
if(!data.value) {
    const result = await getDocs(collection(getFirestore(), 'test2'))
    if(!result.empty) data.value = result.docs.map(docSnap => { return { ...docSnap.data(), id: docSnap.id } })
} else {
    // Fill indexedDB maintained by JS Firebase client SDK
    // `enableIndexedDbPersistence(getFirestore())`
    // with data so SDK wont need to fetch data again
    // when i use `onSnapshot()` with same query
}
</script>

For people not know how Nuxt3 works:

Code in <script setup> tag run server side and template is rendered. useState() is a state management with a powerful feature. It sends a JSON file with data to a client so when the component is opened on the client it already has fetched data done one server side. That why if(!data.value) statement to prevent from double fetch.