0

I am using firebase for backend and react for frontend. Realtime is working fine but when I load page query takes 4 to 5 seconds to ge data from firestore. I want to know what is the issue. is it problem with firebase or with my code.

        const docRef = doc(db, "users", user.uid);
        const docSnap = await getDoc(docRef);
        console.log('ss', docSnap.data())

I see that apending data into component is not time consuiming. it is query which is taking time. Is it problem because I am using free version of firestore?

configuration

const firebaseConfig = {
  apiKey: "**********",
  authDomain: "portfolio-8e33f.firebaseapp.com",
  databaseURL: "https://portfolio-8e33f-default-rtdb.firebaseio.com",
  projectId: "****",
  storageBucket: "portfolio-8e33f.appspot.com",
  messagingSenderId: "502330908580",
  appId: "**********",
  measurementId: "G-YD3HG54N45"
};

Region asia-east1

I am in Pakistan

I am at local host at the moment.

This code is on client side

My internet connection is having 2MB/sec speed

I am on window.

What do you mean by server side rendering?

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
web pakistan
  • 444
  • 1
  • 4
  • 16
  • 1
    Please provide more details as there are many factors that can influence the time-to-load of a page. e.g. Where is your Firestore instance? Which country you are in? Is this code on the client or the server? What platform is making the request? How stable is your internet connection? Have you considered server-side rendering? – samthecodingman Jul 05 '22 at 07:07
  • @samthecodingman – web pakistan Jul 05 '22 at 09:10
  • Refer to the [sample code](https://firebase.google.com/docs/firestore/query-data/get-data#get_a_document). Attach a screen-shot of users collection. – Gourav B Jul 26 '22 at 13:25

1 Answers1

3

As mentioned in thread:

The query performance is dependent on the size of the result. Since 10 Mb is larger than 10Kb, it will be slower to get 10Mb than it is to get 10Kb. That applies both to the transfer over the network as to the reading of the data from disk or memory. Reading more data simply takes more time. The guarantee Firestore makes is that the amount of data in the collection has no effect on the query performance. So if you get 10Mb of data from 10Gb of data in the collection, it will take the same amount of time as when you get the same 10Mb from a 10Tb collection.

There are several reasons mentioned in the blog that might be causing your query to run slow:

1: Probably the most common explanation for a seemingly slow query is that your query is, in fact, running very fast. But after the query is complete, we still need to transfer all of that data to your device, and that’s the part that’s running slowly.

2: offline cache is too big So while Cloud Firestore in the cloud indexes every field in every document in every collection, it doesn’t (currently) build any of those indexes for your offline cache. This means that when you query documents in your offline cache, Cloud Firestore needs to unpack every document stored locally for the collection being queried and compare it against your query.

For following the best practices, you can refer to the Documentation. For getting to know more about server side rendering, you can refer to the thread:

Admin SDK & Firebase Function Caching

Firebase functions that are handling GET requests support server caching the response. This means that subsequent hits from identical queries will not re-run all of my functions (firebase reads, other function invocations) - it will just instantly respond with the same data again.

Process

1. Anonymous client visits a server-side rendered reactjs page.

2. Initial load rendering on server triggers a firebase function (https trigger)

3. Firebase function uses Admin SDK to read from secured firestore database

4. Function caches the response for 3 hours res.set('Cache-Control', 'public, max-age=600, s-maxage=10800');

5. Subsequent requests from any client anywhere for the next 3 hours are served from the cache - avoiding unnecessary reads or additional computation / resource usage

Note - caching does not work on local - must deploy to firebase to test caching effect.

Divyani Yadav
  • 1,030
  • 4
  • 9