next.js에서 api 통신 질문

안녕하세요 답변드립니다. 😏 먼저 말씀드리기에 앞서 작성자분이 적어주신 CSR, SSR에 대한 정의부터 다시 살펴봐야 할 것 같습니다. Client-Side Rendering 클라이언트 사이드 렌더링에서 서버는 뼈대가 되는 최소한의 HTML만 렌더링한다. 로직, 데이터, 템플릿, 라우팅을 통한 페이지 전환은 모두 브라우저에서 실행되는 JavaScript에 의해 처리된다. CSR은 SPA개발에 거의 필수적으로 쓰이며 설치해 사용하는 앱과 웹 사이트의 경계를 흐릿하게 해 주었다. Server-side Rendering 서버사이드 렌더링에서는 사용자의 페이지 요청에 대해 전체 HTML을 만들어서 응답한다. 렌더링 된 컨텐츠에는 데이터 저장소나 외부 API로부터 받은 데이터가 포함되어 있다. 데이터를 조회하고 받아오는 것, 컨텐츠를 표현하기 위한 HTML을 만들어내는 것 모두 서버에서 처리한다. 따라서 서버 사이드 렌더링을 사용하면 데이터를 조회하고 템플릿 렌더링하기 위하여 서버와 별도로 통신하지 않아도 된다. 일단 말씀주신 "같은 api의 클라이언트 사이드, 서버 사이드 url이 서로 상이" 라는 경우는 있을 수가 없습니다. 😥 클라이언트 사이드 랜더링의 경우 필요한 데이터를 "클라이언트" 환경 (크롬과 같은)에서 받아와 처리합니다. 이 때 데이터의 가공, 표시방식, 동작 등은 기본적으로 클라이언트에서 관리합니다. 서버 사이드 랜더링의 경우 이미 해당 작업이 완성되고 난 후의 페이지 (단적으로 html, css)를 가져와서 표현합니다. 클라이언트에서는 극단적으로 말하면 js코드가 없더라도 그릴 수 있습니다. Next로 각각 구성은 가능하나 url을 통해 axios로 fetch를 한다는 시점부터 이미 클라이언트 사이드 랜더링입니다. 만약 fetch를 사용해서 데이터를 가져왔다면 해당 방식은 가져온 데이터를 "클라이언트"에서 처리할 목적으로 불러온 것으로 보이며 해당 방식의 구성에서 "서버 사이드 랜더링"은 불가능합니다. 이미 fetch로 데이터를 통신하는 시점은 클라이언트가 Javascript코드를 읽고 필요한 시점에 데이터를 호출하며 받아온 데이터를 리액트가 그려주는 과정이 포함되어 있습니다. 이 과정이 리액트의 SPA , CSR을 통해 구성됩니다. 만약 작성자님이 작성하신 주소가 다르다는 것이 "Rest API를 제공하는 백엔드 서버" 와 "서버에서 사용하는 DB"라는 개념이라면 두 주소가 다른것은 당연합니다. 😁 Next.js의 경우 클라이언트 단에서 백엔드 서버를 걸치지 않고 바로 DB와 연결하여 특정 데이터를 Next의 서버리스에서 작업 및 가공하고 html을 그려 표시할 수 있습니다 (서버 사이드 랜더링) 이 경우 일반적인 fetch나 axios가 아닌 sql문법 혹은 prisma와 같은 typeORM 번역기를 사용하여 통신하게 되며 DB의 데이터를 어떻게 밀어넣을지, 가져와서 전환할지 의 코드를 작성하게 됩니다. 이 경우 백엔드의 서버를 걸치지 않은 상태가 되며 Next의 서버 사이드 렌더링 기능을 통해 해당 작업을 수행할 수 있게 됩니다.