🌊 Realtime Data Hydration

Transition or hydrate server-rendered content to a realtime stream of data from Firestore

When does hydration need to happen?

Hydrate Server Props to Realtime Data

The post value will prefer the realtime value, but default to the server rendered content while it is loading.

file_type_js pages/username/slug.js 
import { useDocumentData } from 'react-firebase-hooks/firestore';

export default function Post(props) {
  const postRef = firestore.doc(props.path);
  const [realtimePost] = useDocumentData(postRef);

  const post = realtimePost || props.post;

  return (
    <main className={styles.container}>

      <section>
        <PostContent post={post} />
      </section>

      <aside className="card">
        <p>
          <strong>{post.heartCount || 0} 🤍</strong>
        </p>

      </aside>
    </main>
  );
}

Questions? Let's chat

Open Discord