Next.js 데이터 패칭

• Next.js에서는 파일기반 라우팅만이 기능이 아니다.

<aside> ♻️ Next.js는 서버사이드에서 페이지를 사전 렌더링 해 준다!!!

</aside>

• 현재 페이지에 표시되어야 하는 데이터를 준비 해줌.
• Next.js가 서버 사이드와 클라이언트 사이드 코드를 어떻게 융합 시키는지 왜 필요한지?
• 데이터 패칭의 정확한 의미
• Static vs Server side page
• ㅈ

기존 React앱 의 문제점

• 데이터 패칭은 어떤 데이터(파일에 담긴)을 import 하는 것이 아니다.
• 해당 파일에 HTTP 요청을 전송하는 방식이다.
• 문제점

  • 실제로 유저가 데이터가 로딩되기까지를 기다려야한다.

  • 실제 백엔드 API를 이용해서 데이터를 페칭하는 실제 페이지에서는 데이터 로딩에 몇초가 소요될 수 있다. (지연이 발생) → 사용자 경험의 최적화라 말할 수 없다. 🥲

  • 검색 엔진 최적화에 문제

    • 검색 엔진이 있는 앱의 경우 나의 컨텐츠를 google이 알아야하는데, 지금 보이는 HTML코드는 백엔드에서 받아온 데이터가 전혀 없는 문서를 검색 엔진이 보게 된다.

      <div id='root'></div>
      

    • 콘텐츠가 중요하여, 검색엔진이 컨텐츠를 열람하고 인덱싱하게 하려면 기존 react의 데이터를 fetching하고 나서 페이지를 그리는 방식은 적합하지 않다.

    • 하지만 서비스 성격에따라 다르다.. 로그인을 해야하는 웹, 앱 like 관리자 페이지,에서는 next.js를 안써도된다,

    • 블로그나, 쇼핑몰 처럼 많은 콘텐츠가 있는 앱의 경우! 우리의 콘텐츠가 검색엔진의 search를 받아야하는데 빈 페이지면 안좋지!

    <aside> ♻️ 기존 react의 문제점 : 데이터 페칭이 컴포넌트가 로딩된 후 여야한다.

    </aside>

    • 사용자가 처음 페이지를 방문했을 때 서버가 클라이언트에게 재전송하는 페이지는 그 데이터를 포함 하지 않고 있다는게 문제….(페이지 소스 확인)

Next.js가 페이지를 준비하고 사전 렌더링 하는 방식.

• 어떤 유저가 /some-route라는 페이지에 요청을 하게 되면 === 사용자가 /some-route라는 페이지에 방문하게 되면, Next.js가 사전 렌더링된 페이지를 반환한다.

• Next.js는 페이지와 필요할 법한 모든 데이터가 있는 HTML 콘텐츠를 사전에 렌더링한다. → SEO 증진!

• 사전 렌더링된 페이지를 재전송 하는 것 뿐만 아니라, 포함된 모든 JS 코드도 보낸다. (hydrate) react 실행

• 정리 :

  • 더 정확히 말하면 Next.js는 페이지를 사전에 준비하는데, 이때 모든 HTML 콘텐츠를 사전에 구축하고, 필요할 모든 데이터를 사전에 로딩하는 방식을 따른다.
  • pre-rendering은 최초 로딩 할때만 영향을 미친다. ex) 페이지를 방문하면 로딩되는 첫 번째 페이지가 사전 렌더링 된다.
  • 첫번째 렌더링이 끝나고 나면 다시 SPA로 돌아간다. 그때 부터는 React가 프론트엔드에서 모든 처리를 수행한다.
  • 만약 라우터를 써서 다른 페이지로 넘어가면 해당 페이지가 사전 렌더링 되지 않고, React를 통해 클라이언트 사이드에서 생성된다.

  <aside> ♻️ 사전 렌더링되는 것은 최초 접속하는 첫 번째 페이지

  </aside>

• 두가지 pre-render방식이 있다. 언제 어떤걸 사용할지는 개발자의 몫

  • Static-generation
    • 빌드 되는 동안 모든 페이지가 사전 생성된다.
    • 즉 배포 전에 모든 페이지가 준비된다.
  • Server-side-Rendering
    • 배포후 요청이 서버로 오는 그때 pre-render