-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
nextjs에서 cra처럼 사용 질문입니다
23.03.27 15:42 작성 23.03.27 15:44 수정 조회수 567
1
CRA 환경에서는 클라이언트 사이드로 렌더링 되는건데요
NEXTJS에서 서버사이드렌더링 없이 CRA처럼 CRS만으로도 구현할수 있나요?
이럴 경우에는 getStaticPros, getServerSideRedering 을 사용안하면 무조건 CRS가 되는건가요?
seo 적용안하고 CRS로 하고 싶을 경우 강의에서 말씀하신 [_app] 에 next-seo를 추가하지 않고 getStaticPros, getServerSideRedering 없이 그냥 작업하면 모든 페이지가 CRS가 되는거죠 ?
그런데 루트에 [_app], [_document] 이 파일은 무조건 실행이 되더라구요
이것의 정체는 무엇인지 궁금합니다
CRS인데 NEXT를 사용하려는 이유가
첫번째, 사이트를 만들때 사용자페이지, 관리자페이지 구분을 두고 사용자페이지는 SSR , 관리자페이지는 CSR을 적용하려고 하고
두번째, 코드스프리팅이 지정해줄 필요없이 자동적으로 모두 되어 있어서
NEXTJS를 사용하려고 합니다
답변을 작성해보세요.
0
박용주
지식공유자2023.03.28
안녕하세요 :) 질문 감사드립니다ㅎㅎ
넵! 샤크님께서 말씀해주신대로 getStaticPros, getServerSideProps 함수 안에서 데이터를 불러오지 않고, CRA 환경에서 작업하듯이 useEffect 등을 이용하여 client 단에서 API를 호출하면 CSR 방식을 사용할 수 있습니다.
본 강의에도 CSR에 관한 설명이 있는데, Section 1의 마지막 강의인 'CSR' 강의를 들어보시면 좀 더 이해가 되실 것 같습니다. 강의의 pages/section1/clientSideRendering.tsx 과 같이 코드를 작성하고, 관리자 페이지에서 필요한 정보들은 따로 API를 호출한다면 원하시는 구현을 할 수 있을 것 같습니다. 또한, 강의에 나오는 dynamic API를 사용한 뒤 { ssr: false } 속성을 줘서 컴포넌트마다 CSR을 적용할 수도 있습니다.
또, 말씀해주신대로 SEO가 중요하지 않은 사이트라면 next-seo는 설정하지 않으셔도 됩니다. 다만 SEO는 검색 엔진에 더 잘 걸리도록 head meta tag 등을 추가하는 작업이기 때문에, CSR/SSR과 동등한 개념은 아닙니다. (next-seo를 제거한다고 SSR -> CSR로 바뀌는 것은 아니기 때문)
_app.tsx와 _document.tsx도 강의에 잠깐잠깐씩 등장하는데, 간단히 말해 모든 페이지에 적용되는 initializer 같은 것이라 이해하시면 될 것 같습니다. 그래서 질문자님이 경험하신대로 모든 페이지에서 그 파일들이 무조건 실행되는 것이 맞습니다! 모든 페이지에 전역적으로 적용해야하기 때문에 global style이나 GA script를 적용하는 등의 용도로 사용됩니다. (강의 Section 6 'GA script 추가하기' 등등 참고). 혹시 더 알아보고 싶은 내용이 있다면 아래 링크를 읽어보는 것도 도움이 되실 것 같습니다. 이해가 안되시는 부분은 추가로 질문해 주셔도 됩니다ㅎㅎ
https://nextjs.org/docs/advanced-features/custom-app
https://nextjs.org/docs/advanced-features/custom-document
감사합니다 :)
답변 1