NestJS 13에서의 컴포넌트 관리
안녕하세요! NextJS 13 강의를 듣는 과정에서 궁금증이 생겨 질문 드립니다.
기존의 React 같은 경우에는 컴포넌트에 path를 지정하여 라우팅하는 방식으로 코드를 작성해나갔었던 것 같은데요,
NextJS의 경우 about 페이지를 만들기 위해 about.tsx를 작성함으로써 라우팅을 구현하고, NextJS 13의 경우 디렉토리를 path 구조로 작성하여 라우팅을 구현하는 것으로 이해했습니다.
React에서는 컴포넌트에 일일이 라우팅 path를 정해주기 때문에, 재사용 가능한 컴포넌트로 독립적으로 사용할 수 있었던 것 같은데 NextJS의 경우 재사용 컴포넌트를 어떻게 관리하는지 궁금하여 질문 드립니다.
또한 리액트 version 18에서 Suspense를 통한 서버사이드렌더링이 SEO에 영향을 미치는지, 혹시나 SEO를 개선할 수 있다면 NextJS를 사용하지 않고 React 만으로 최적화된 앱을 만들 수 있는지 추가적으로 질문 드립니다.
좋은 강의 덕에 열심히 듣고 있습니다. 질문 읽어주셔서 감사합니다!
답변 1
1
안녕하세요
React에서는 컴포넌트에 일일이 라우팅 path를 정해주기 때문에, 재사용 가능한 컴포넌트로 독립적으로 사용할 수 있었던 것 같은데 NextJS의 경우 재사용 컴포넌트를 어떻게 관리하는지 궁금하여 질문 드립니다.
====> Nextjs 에서 모든 컴포넌트가 파일에 맵핑이 되어서 경로가 되는 것은 아닙니다 ~ pages 폴더이거나 app 폴더 안에 만든 것들만 경로가 됩니다. 그러니 따로 components 란 폴더를 만들어서 재사용하시면 됩니다. ~
또한 리액트 version 18에서 Suspense를 통한 서버사이드렌더링이 SEO에 영향을 미치는지, 혹시나 SEO를 개선할 수 있다면 NextJS를 사용하지 않고 React 만으로 최적화된 앱을 만들 수 있는지 추가적으로 질문 드립니다.
====> 다이나믹한 데이터이외에 이미 prefetching 한 데이터들을 이용해서 크롤링 봇이 SEO 를 충분히 잘 수행할수 있습니다 ~
====> 최적화 된 앱은 상황에 따라서 어떠한 서비스를 위한 앱인지에 따라서 다를것 같습니다 ~
만약에 초반에 빠르게 보여줘야하는 앱이나 검색이 잘되게 해야하는 앱이라면 NextJS를 사용하면 되며,
이런 것들보다는 동적인 데이터가 많이 오가고 상호작용이 많이 진행되는 앱이라면 그냥 리액트를 사용하셔도 됩니다 ~
감사합니다.
강의 소스 코드 압축 풀기 오류
0
70
1
런타임 에러 ㅠㅠ
0
84
1
강의대로 따라갔는데 에러보다 api키로 들어간 넷플릭스? 그런게 렌더링 되지 않습니다 ㅠ
0
100
1
안녕하세요 개발과 상관없는 질문입니다만
0
111
1
리액트 라우터 관련
0
101
1
react-beatiful-dnd에서 문제가 발생합니다.
0
103
1
react19에서는 react-beautiful-dnd가 설치되지 않습니다.
0
806
1
useEffect로 사용을 해도 되나요?
0
198
1
넷플릭스 오리지널 제외하고 슬라이드가 동작을 안합니다.
0
195
1
react 19의 useActionState가 더이상 isPending은 지원하지 않는 듯합니다
0
279
2
리액트 dockderfile 작성 시 COPY 질문
0
145
1
next.js에서부터는 react query 필요없는지
0
320
1
기능
0
193
1
오류가 안보여요
0
193
1
CSS
0
217
1
local storage
0
208
1
list컴포넌트 생성하기
0
223
1
검색어 입력 후 초기화하는 방법 궁금합니다!
0
331
1
Banner.css에 대해서
0
444
1
플러그인이 추천을 안해줍니다
0
320
1
마이너스버튼 테스트
0
279
2
리액트 서버 실행 오류
0
1156
2
오류메세지는 확인했는데 어떻게 고쳐야 할지 모르겠습니다 ㅠ
0
298
1
creactStore질문이요
1
284
2