[next.js] 서버사이트 통신 방식

import NewsList from "@/components/news-list";

async function NewsPage() {
  const response = await fetch("http://localhost:8080/news");

  if (!response.ok) {
    throw new Error("Failed to fetch news");
  }

  const news = await response.json();

  return (
    <>
      <h1>News Page</h1>
      <NewsList news={news} />;
    </>
  );
}

export default NewsPage;

 

 

이렇게 되는 이유는 Next.js에서 node 기능을 지원한다.

추가로 캐싱도 지원하는데 그냥 넘기고, 원래는 에러나 로딩중에 대한 상태 처리도 적용해야하나
더미에서 이상이 없을 것으로 예상하여 그부분 생략.