nextjs에서 cra처럼 사용 질문입니다

Question

CRA 환경에서는 클라이언트 사이드로 렌더링 되는건데요 NEXTJS에서 서버사이드렌더링 없이 CRA처럼 CRS만으로도 구현할수 있나요? 이럴 경우에는 getStaticPros, getServerSideRedering 을 사용안하면 무조건 CRS가 되는건가요? seo 적용안하고 CRS로 하고 싶을 경우 강의에서 말씀하신 [_app] 에 next-seo를 추가하지 않고 getStaticPros, getServerSideRedering 없이 그냥 작업하면 모든 페이지가 CRS가 되는거죠 ? 그런데 루트에 [_app], [_ document] 이 파일은 무조건 실행이 되더라구요 이것의 정체는 무엇인지 궁금합니다   CRS인데 NEXT를 사용하려는 이유가 첫번째, 사이트를 만들때 사용자페이지, 관리자페이지 구분을 두고 사용자페이지는 SSR , 관리자페이지는 CSR을 적용하려고 하고 두번째, 코드스프리팅이 지정해줄 필요없이 자동적으로 모두 되어 있어서  NEXTJS를 사용하려고 합니다

박용주 · Answer

안녕하세요 :) 질문 감사드립니다ㅎㅎ 넵! 샤크님께서 말씀해주신대로 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 감사합니다 :)