SSR User Profile Page Implement server-side rendering to fetch data on the server

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

OR


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

👈 Data Model
SSR + Paginated Home Page Feed 👉

Helpers

The following helpers will be reused on in other components to simplify the code.

file_type_js_official lib/firebase.js 
/**`
 * Gets a users/{uid} document with username
 * @param  {string} username
 */
export async function getUserWithUsername(username) {
  const usersRef = firestore.collection('users');
  const query = usersRef.where('username', '==', username).limit(1);
  const userDoc = (await query.get()).docs[0];
  return userDoc;
}

/**`
 * Converts a firestore document to JSON
 * @param  {DocumentSnapshot} doc
 */
export function postToJSON(doc) {
  const data = doc.data();
  return {
    ...data,
    // Gotcha! firestore timestamp NOT serializable to JSON. Must convert to milliseconds
    createdAt: data.createdAt.toMillis(),
    updatedAt: data.updatedAt.toMillis(),
  };
}

User Profile Page

Render the Firebase user profile on the server.

file_type_js_official pages/username/index.js 
import { getUserWithUsername, postToJSON } from '../../lib/firebase';
import UserProfile from '../../components/UserProfile';
import PostFeed from '../../components/PostFeed';

export async function getServerSideProps({ query }) {
  const { username } = query;

  const userDoc = await getUserWithUsername(username);

  // JSON serializable data
  let user = null;
  let posts = null;

  if (userDoc) {
    user = userDoc.data();
    const postsQuery = userDoc.ref
      .collection('posts')
      .where('published', '==', true)
      .orderBy('createdAt', 'desc')
      .limit(5);
    posts = (await postsQuery.get()).docs.map(postToJSON);
  }

  return {
    props: { user, posts }, // will be passed to the page component as props
  };
}

export default function UserProfilePage({ user, posts }) {
  return (
    <main>
      <UserProfile user={user} />
      <PostFeed posts={posts} />
    </main>
  );
}

User Profile

UserProfile Code

file_type_js_official components/UserProfile.js 
 // see full source code

Post Feed

UserProfile Code

file_type_js_official components/PostFeed.js 
 // see full source code

Q&A Chat