인프런 커뮤니티 질문&답변
작성한 질문수
react 와 차이점 질문
해결된 질문
작성
·
67
1
react에서 데이터를 가져올 때
페이지나 컴포넌트 내부에서 바로 가져와서
사용했던 걸로 기억하는데
AppRouter에서 사용하는 방식과 똑같은건가요?
2. 그리고 pageRouter는 페이지에서만
getStaticProps나 getServerSideProps를 사용해서 props형태로만 전달할 수 있기 때문에 이 단점을 보완하기 위해서 AppRouter에서는 지금처럼 사용하는건가요?
3. 그리고 마지막으로 section02에서
search페이지를 만들때 getStaticProps를 사용하는 대신 페이지 함수에서 useEffect를 사용해서 바로 데이터를 가져오는 형식으로(react에서 사용하던 방식이랑 똑같은 방식으로) 사용하는 부분이 있는데 이렇게 하면 PageRouter의 단점인 props형태로만 전달할 수 있다도 보완되는거 아닌가요?
pageRouter 배우고 appRouter배우면서
react쓰던 지식까지 겹치니까 많이 헷갈리네요..ㅠㅠㅠ
질문이 좀 긴데 잘 부탁드립니다..
답변 2
1
안녕하세요 이정환입니다.
아래 답글로 남겨주신 내용이 정확히 맞습니다! 정리하신 내용으로 자체적으로 1번과 2번 질문은 해결되셨을 것 같으니 3번 질문에만 답변드릴게요 (혹시 1, 2번 질문도 답변을 원하시면 말씀주세요)
3번 질문으로 "section02에서 검색(/search) 페이지를 구현할 때에 데이터 페칭은 useEffect를 통해 진행했으므로 페이지 라우터의 단점인 데이터를 Props 형태로만 전달할 수 있는 문제가 해결되는것이 아니냐?" 라고 질의를 주셨는데요
그렇지는 않습니다. 그 이유는 useEffect에서 불러온 데이터는 서버가 아닌 클라이언트 측에서 불러온 데이터에 해당하기 때문입니다. 이렇게 데이터를 클라이언트 측에서 마운트 이후에 불러오게 되면 컨텐츠가 화면에 느리게 렌더링 된다는 기존 리액트의 단점은 그대로 안고 가게 됩니다. 더불어 SEO에도 악 영향을 미칠 수 있죠
1
추가로 복습 및 정리 해봤는데
react : useEffect는 클라이언트에서만 작동됨, 즉 처음에 빈화면을 보여주다가 useEffect를 통해서 데이터를 가져오면 다시 렌더링
pageRouter : 느린 fcp, 안좋은 seo의 단점을 보완하기 위해 등장, ssg나 ssr과 같은 방식을 지원해 빠른 fcp와 seo최적화 기능이 추가됨
appRouter : 복잡한 코드 작성, props 데이터 전달 단점을 보완하기 위해 등장, RSC 서버 컴포넌트를 사용해 바로 데이터 불러와서 사용 가능
빠른 fcp + seo최적화 + 복잡한 코드 작성 보완 + props전달할 필요 없음 이 맞을까요?