빌드 후 use client가 적용이 안됨

[양민호]

app/page.js 에 포함된 /component/SharingBoxList.js 컴포넌트

"use client";

import styles from "./SharingBox.module.css";
import { useRouter } from "next/navigation";
import { FaAngleRight } from "react-icons/fa6";
import { PiEyeBold, PiThumbsUpBold } from 'react-icons/pi';
import { FaRegComment } from 'react-icons/fa6';
import Link from "next/link";
import { useEffect, useState } from "react";

export default function SharingBoxList() {

const router = useRouter();

const [data, setData] = useState();

useEffect(() => {
const fetchData = async () => {
const response = await fetch(`/api/sharing/list/home`);
const data = await response.json();
setData(data)
 }
fetchData();
 }, [])

const topicData = require("/public/data/topic.json");
const topicList = topicData.slice(1,)
 
return (
<div className={styles.wrapper}>
{topicList.map((e, i) => (
<div key={i} className={`${styles.box} ${styles.home}`}>
<div className={styles.boxWrapper}>
<div onClick={() => router.push(`/sharing/all/${e.title}`)} className={styles.boxHeader}>
<div className={styles.topicTitle}>{iconList[e.title]} <span>{e.title}</span></div>
<div className={styles.moveBtn}><FaAngleRight size={18}/></div>
</div>
<div className={styles.boxList}>
{!data && Array(5).fill(<div className={styles.item}></div>)}
{data?.find(item => item.topic === e.title)?.posts.map((e, i) => (
<Link href={`/post/${e._id}`} className={styles.item} key={i}>
<div className={styles.itemWrapper}>
<div className={styles.title}>
<span>{e.title}</span>
</div>
<div className={styles.activeGroup}>
<div className={styles.activeRecord}>
<PiEyeBold size={15}/>
<span>{e.views}</span>
</div>
<div className={styles.activeRecord}>
<PiThumbsUpBold size={15}/>
<span>{e.likeitems.length}</span>
</div>
<div className={styles.activeRecord}>
<FaRegComment size={15}/>
<span>{e.commentitems.length}</span>
</div>
</div>
</div>
</Link>
 ))}
</div>
</div>
</div>
 ))}
</div>
 )
}

이 컴포넌트가 빌드 후 데이터가 새로 업데이트가 안돼요 
클라이언트 컴포넌트면 되야하지 않나요?

[codingapple]

크롬에 에러같은거 뜨는지 data변수는 출력잘되는지 확인해봅시다

[양민호]

npm run build 후 npm run start 하면
에러 없고 data도 잘 출력되는데
새로운 글을 작성해도 새로운 데이터가 추가되진 않네요..
개발환경에서는 되는데

[codingapple]

fetch로 데이터는 잘가져오나
data?.find(item => item.topic === e.title) 결과도 의도대로 잘 출력되나 확인해봅시다

[양민호]

빌드 로그를 잘 보다 보니

/api/sharing/list/home 가 static 으로 표시되어있네요.
이것때매 똑같은 데이터가 가져와지는 것 같은데
어떻게 dynamic으로 바꿀 수 있을까요?

[codingapple]

/home 컴포넌트 상단에 export const dynamic = 'force-dynamic' 추가합시다

[글쓴이]

글