블로그 포스팅 페이지를 ISR로 전환한 이유와 효과

Migrating Blog Post Page to ISR - Reasons and Outcomes

export async function generateMetadata(props: {
  params: Promise<{ post: string }>;
}): Promise<Metadata> {
  const params = await props.params;
  const markdownsource = await PostService().getPostMeta({ // 포스트 메타데이터 가져오기
    post_id: params.post,
  });
  return GenerateMeta({ meta: markdownsource, param: params.post });
}
 
const Post = async ({ params }: { params: Promise<{ post: string }> }) => {
  const { post } = await params;
 
  const [markdownsource] = await Promise.all([
    PostService().getPost({ post_id: post }), // 포스트 내용 가져오기
    PostService().viewIncrement({ post_id: post.split("-")[0] }), // 포스트 조회수 증가
  ]);
 
  return (
    <>
			{/* ... */}
    </>
  );
};
 
export default Post;

export const revalidate = 172800; // 2 days
export const dynamicParams = true; // 동적 파라미터 사용
 
export async function generateStaticParams() {
  const Links = await PostService().getLinks(); // param 목록 가져오는 API 호출
  const posts: string[] = [];
  Links.map((category) => { 
		// 내부 로직을 통해 param 목록을 생성
		category.posts.map((post) => {
			posts.push(post.post_id);
		});
  });
  return posts.map((post) => ({ 
    post: post,
  }));
}
 
// generateMetadata는 유지
 
const Post = async ({ params }: { params: Promise<{ post: string }> }) => {
  const { post } = await params;
 
  const markdownsource = await PostService().getPost({ 
    post_id: post.split("-")[0],
  });
 
  return (
    <>
      <ViewIncrement postId={post.split("-")[0]} /> {/* CSR 컴포넌트로 분리 */}
			{/* ... */}
    </>
  );
};
 
export default Post;

export default async function handler(req, res) {
  try {
    const [total, today] = await Promise.all([totalViews(), todayViews()]);
    res.status(200).json({ total, today });
  } catch (error) {
    res.status(500).json({ error: "Failed to fetch analytics data" });
  }
}

"use client";
 
export const ViewStats = () => {
  const [views, setViews] = useState(null);
  useEffect(() => {
    fetch("/api/analytics/views")
      .then((res) => res.json())
      .then((data) => setViews(data));
  }, []);
  return <div>🔁 Total Views: {views?.total} | 📅 Today: {views?.today}</div>;
};

const markdownsource = await PostService().getPost({ post_id: post.split("-")[0] });
 
<ViewIncrement postId={post.split("-")[0]} />; // 포스트 조회수 증가를 클라이언트 컴포넌트로 분리