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

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.
Get Unlimited PRO Access

OR


*Enrollment provides full access to this course (and updates) for life.

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_official 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>
  );
}
👈 ISR Incremental Static Regeneration
Custom 404 Page 👉

Questions?

Ask questions via GitHub below OR chat on Slack #questions