쌤 좋아요기능 구현좀 봐주세요

좋아요 기능 api 입니다.

import { connectDB } from '@/util/database';
import { ObjectId } from 'mongodb';

export default async function handler(req, res) {
  try {
    if (req.method === 'POST') {
      const db = (await connectDB).db('forum');

      const post = await db
        .collection('post')
        .findOne({ _id: new ObjectId(req.body.postId) });

      const isLike = await db
        .collection('postLike')
        .findOne({ likeUser: req.body.userName });

      if (isLike) {
        return res.status(400).json('이미 좋아요 누른 게시글입니다.');
      }

      const result = await db.collection('postLike').insertOne({
        likeUser: req.body.userName,
        postId: new ObjectId(req.body.postId),
      });

      res.status(200).json('좋아요 성공');
    }
  } catch (error) {
    console.log(error);
    return res.status(500).json('error:', error);
  }
}

PostLike.js 입니다. 클라이언트 컴포넌트로 좋아요버튼 분리했어요

'use client';

import { useEffect } from 'react';

const PostLike = ({ postId, userName }) => {
  const onLikeBtnClick = () => {
    fetch('/api/post/like', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        postId,
        userName,
      }),
    }).then((data) => {
      if (data.status === 200) {
      } else if (data.status === 400) {
        alert('이미 좋아요 누른 게시물입니다.');
      }
    });
  };

  return (
    <div className='post-like-btn' onClick={() => onLikeBtnClick()}>
      <span>👍</span>
    </div>
  );
};

export default PostLike;

Detail.js입니다. 서버컴포넌트이고 좋아요버튼 컴포넌트를 자식컴포넌트로 두고있어요.

// dynamic route
// (props)=>{}; 하고,
// console.log(props); 해주면 유저가 다이나믹라우터 자리에입력한 값이 콘솔에뜸
// 다이나믹라우터란?${id}를뜻함 전체에시=> localhost:3000:/detail/${id}
import { connectDB } from '@/util/database';
import { ObjectId } from 'mongodb';
import Link from 'next/link';
import Comment from './Comment';
import PostLike from '../PostLike';
import { getServerSession } from 'next-auth';
import { authOptions } from '@/pages/api/auth/[...nextauth]';

const Detail = async (props) => {
  const session = await getServerSession(authOptions);

  let client = await connectDB;
  const db = client.db('forum');

  let result = await db
    .collection('post')
    .findOne({ _id: new ObjectId(props.params.id) });

  let postLike = await db
    .collection('postLike')
    .find({ postId: new ObjectId(props.params.id) })
    .toArray();

  return (
    <div className='container'>
      <h4 className='title mt-2 mb-3 '>상세페이지</h4>

      {result && (
        <div className='list'>
          <div className='list-item'>
            <div className='emoticon-box'>
              <Link href={`/edit/${result._id}`}>✏️</Link>❌
            </div>

            <h4>
              <span>{result.title}</span>
            </h4>
            <span className='post-like-count'> ･ {postLike.length}</span>
            <p>{result.contents}</p>

            <PostLike postId={props.params.id} userName={session.user.name} />

            <Comment postId={result._id.toString()} />
          </div>
        </div>
      )}
    </div>
  );
};

export default Detail;

여기까지했을때 잘됬습니다. 근데 궁금한게

1. 좋아요 눌렀을때 실시간으로 좋아요 갯수가 올라가게해주려면 어떻게해야하나요? 그냥 새로고침을 해주는게 가장 나을까요? 
   디테일페이지를 똑같이 클라이언트 컴포넌트로 해주면되겠지만,.. 근데 만약 이 디테일페이지가 검색노출이 중요한페이지라고했을때가 문제가되서요

2. 디테일페이지에서 좋아요 갯수를 출력해주고있어요 다음 사진처럼요

디테일페이지말고 list페이지 그러니깐.. 전체 게시글에서 저렇게 좋아요갯수를 표시하게끔해주려면 어떻게 구현해줘야하나요?

지금 현재 

좋아요 도큐먼트를 만들어놨고 여기에
좋아요한게시물, 좋아요한유저이름을 저장해놨고

디테일페이지에서 좋아요도큐먼트를 찾는데, 조건은 좋아요한게시물의 아이디를 받아와서 그 갯수를 출력해주고있어요.
이런식으로요

const Home = async () => {
  let client = await connectDB;
  const db = client.db('forum');

  let result = await db.collection('post').find().toArray();

  result = result.map((data) => {
    data._id = data._id.toString();
    return data;
  });

  return (
    <div className='container'>
      {result.length === 0 ? (
        <h1 className='not-post'>현재 작성된 글이 없습니다.</h1>
      ) : (
        <PostList result={result} />
      )}
    </div>
  );
};

export default Home;

근데 여기서 전체게시글들의 좋아요 갯수를 어떻게 출력해서 PostList컴포넌트한테 전달해줘야할까요?