next 14 데이터 불러와서 SSR 하는법

Question

안녕하세요 갑자기 next14를 하게되었습니다. 그런데 13부터 getServerSideProps를 지원하지 않는것 같네요 그래서 문서에 따르면 이렇게 처리하면 된다고 하는데요., async function getData() { const res = await fetch("http://localhost:3000/api/내정보') return res.json() } export default async function Page() { const data = await getData() return

}이번 프로젝트가 서버가 따로 없고 넥스트프로젝트에 api 서버까지 셋팅이 되어 있습니다. 그래서 위에 코드 처럼 처리하면 따로 http://localhost:3000/api/내정보를 쏘지 않고 현재페이지만로만 처리하고 아예 http://localhost:3000/api/내정보이 주소로 요청을 안보내 더라고요 . 그래서 CSR로 useEffact로 처리 할까 했는데 그러면 넥스트 프로젝트를 하는 의미가 없을것 같은데 .. 제가 백엔드개발자라 감이 안잡히는데 혹시 잘아고 계신분이나 해본적 있으신분 답변 부탁드립니다.

tspring · Answer

// Page라는 컴포넌트 기준으로 이거 하나가 통째로 전체고 // 반드시 getServerSideProps이걸 써줘야함 이름도 그냥 개똑같이 절대 틀리지 않고 작성해야됨 async function getData() { const res = await fetch("http://localhost:3000/api/내정보') return res.json() } export default function Page({ data }) { console.log(data); // good! return

} export async function getServerSideProps() { const data = await getData() return { props: { data } } }

charlatan · Answer

알고계신 것처럼 13부터 fetch로 대체되었고 요청을 하지 않고 현재 페이지에 처리된다고 한 것은 아마 캐시가 되서 요청을 안한 것 같은데 항상 요청하게 하려면 fetch 에 no-cache 옵션이 있을 겁니다. 그리고 기본적으로 서버에서 조회해서 렌더링한 결과를 돌려주기 때문에 use client를 하지 않으면 전부 서버 컴포넌트일텐데...

RWB · Answer

Next.js 13 이후부터, Server Component과 Client Component을 정확히 명시하도록 변경했습니다.상단에 "use server" 혹은 "use client"를 명시하여 렌더링을 지정할 수 있습니다.없을 경우, 기본적으로 아래의 기준에 따라 렌더링이 정해집니다.기본적으로 Server Component로 렌더링됨Client Component에 포함되었다면, 포함된 컴포넌트는 항상 CSR로 동작함.2번과 같은 상황에서, 포함된 하위 컴포넌트를 SSR로 다시 렌더링할 수 없음 (이미 클라이언트로 렌더링 역할이 이관되었기 때문)기존의 GetServerSideProps와 같은 메서드가 사라지고, 서버 컴포넌트에서 fetch나 axios 같은걸로 바로 API 요청해서 사용하시면 됩니다.게시글에서 요청을 안 보낸다고 하셨는데, 혹시 개발자도구에서 보이지 않아서 그런거라고 하시면 당연합니다.SSR이므로, 브라우저가 아닌 서버에서 요청을 담당하기 때문입니다. 따라서, 브라우저의 영역인 개발자도구에선 SSR의 요청이 관측될 수 없으며, 관측되어서도 안 됩니다.실제로 console.log()를 사용해보시면, 개발자도구의 콘솔이 아닌 next dev를 구동한 터미널에 결과가 찍히는 걸 보실 수 있습니다.이와 비슷하게, SSR 관련 요소는 이 터미널에서 확인하실 수 있습니다.또한, 다른 분이 말씀해주신 것처럼, fetch를 사용한 요청은 Next.js에서 캐시를 적용하기 때문에, 한 번 요청된 API는 캐시 규칙에 따라 일정 시간동안 다시 요청하지 않고 캐시된 데이터를 그대로 보내줍니다.만약 실시간 반영이 필요한 요청이라면, 적절한 방법으로 캐시를 관리해야합니다.

next 14 데이터 불러와서 SSR 하는법

3개의 답변

기술 목록