用数据填充indexedDb，这样你就不需要使用Firestore发出第二个请求

Question

具有在服务器端获取数据后将数据发送到客户端的功能（除了渲染的 HTML 文件，它发送使用

useState()

 保存的数据的 JSON 文件）。

就像我在标题中提到的，我想用数据填充客户端的indexedDB，这样我就不需要再次获取数据。我

enableIndexedDbPersistence(getFirestore())

在客户端的插件中。

我想要将现有数据保存到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>

对于那些不知道Nuxt3如何工作的人：

<script setup>

标签中的代码运行服务器端并渲染模板。

useState()

是一个功能强大的状态管理。它将包含数据的 JSON 文件发送到客户端，因此当在客户端上打开该组件时，它已经在服务器端获取了 

data

。这就是为什么使用 

if(!data.value)

 语句来防止双重获取。

恕我直言，我认为尝试“操作”由 JS SDK 在本地持久存储中存储和管理的数据不是一个好主意。缓存管理是一个相当复杂的过程，不仅仅是将数据推送到浏览器本地存储的问题。

Answer 1

如果我正确理解你的需求，本地缓存机制已经涵盖了：如果文档在本地缓存中，只要数据库中的文档不发生更改，后续的读取都会从缓存中完成。如果数据库中的文档发生更改，则会从 Firestore 后端获取该文档，并且您需要支付文档读取费用。

如果我在使用

Answer 2

的浏览器中使用 Firebase 客户端 SDK 存储和保留数据，每次用户打开我的 Web 应用程序的新选项卡时，Nuxt3 仍然会向服务器发出请求。发生这种情况是因为我从服务器获取的文件的标头带有

Cache-Control: max-age=0

。

最好的方法是制作 PWA（渐进式 Web 应用程序），我可以在其中操作文件头并更改 

Cache-Control: max-age=X

，这样每次用户再次访问我的 Web 应用程序时，该应用程序都会像 SPA（单页应用程序）一样工作，并且

enableIndexedDbPersistence(getFirestore())

 Firebase SDK 将完成这项工作。

如果每次用户打开选项卡时 PWA 都会阻止 Nuxt3 进行 SSR，那么“阻止 Firebase 在客户端进行第二次查询”就没有意义了。我能从中受益的就是当用户第一次在浏览器中访问我的网页时保存一个查询。