• 기존 React App에서 데이터 페치할때는 useEffect에서 보통 통신을 해왔다.

const [loadedMeetups, setLoadedMeetups] = useState([]);

useEffect(() => {
	// send HTTP request and fetch data
	// 
	setLoadedMeetups(DUMMY_MEETSUP);
},[]);

return <MeetupList meetups={loadedMeetups} />;

• useEffect는 컴포넌트가 다 렌더링 되고 실행된다.
• 컴포넌트가 처음 렌더링 되었을 때는 loadedMeetups는 빈 배열이다.
• useEffect 함수가 실행되면서 loadedMeetups의 상태가 바뀌었기 때문에, 컴포넌트 함수가 다시 실행된다.
• MeetupList에서 실제 데이터를 가지고 다시 렌더링 된다.

<aside> 💡 컴포넌트 렌더링 사이클이 두개 임….

</aside>

• 백엔드에서 데이터를 가져오면서 사용자가 로딩 아이콘을 잠깐 볼 수 있고, (컴포넌트 사이클이 2개 도는 동안..) 이 는 사용자 경험에 영향을 미칠 수 있는 요소 이다.
• 또한 두 개의 렌더링 사이클이 있기 때문에 (처음에는 데이터가 없는 HTML이 존재 할 것이기 때문에) 검색 엔진 최적화에 문제가 발생한다. →두 번째 렌더링이 되었을때 컨텐츠가 표시된다.
• 하지만 Next.js가 데이터 페칭을 기다려서 전체 데이터가 들어있는 페이지를 표시하는게 아니라, 첫번째 렌더링의 결과물만 내려주고있다. (빈 HTML만 보여주는…..) ⇒ SEO에 문제가 있을 수 있다…..

<aside> 💡 이상 적인 것은 실제로 서버에서 데이터 패치를 한 후에 컨텐츠가 다 완성되있는 페이지를 보여주게 하는 것

</aside>

<aside> 💡 사전 렌더링된 페이지인데, 데이터가 없는 페이지는 SEO에 안좋은 영향을 미칠 수 있다.

</aside>

데이터가 포함해서 사전 렌더링

• 2가지 사전 렌더링 되는 방식

1. Static Generation
2. Server side Rendering