Next.js

이 글은 예전에 따로 적어두었던 Next.js 메모를 옮기면서 다시 정리한 버전입니다.. 원문이 짧은 편이라, 나중에 다시 볼 때 덜 끊기게 핵심 흐름만 조금 붙여뒀습니다.

• Next.js가 뭐임? -> 리액트의 생산성을 높여주는 프레임워크 중 하나임

  • 뭘 하는데 생산성을 높여줌? -> SSR, SSG, SEO 이외에도 많은 기능들이 있음

  • 어떤식으로 작동함? -> 요청이 들어오면 프리 렌더링으로 만들어둔 HTML을 제공하고 브라우저는 하이드레이션 과정을 거침 이후 페이지 이동시에는 CSR방식으로 처리하기 때문에 SPA의 장점도 가졌음

  • HYDRATION 과정이라는게 뭐임? -> 사용자에게 처음 보여지는 프리 렌더링된 HTML은 JS 요소들이 DOM에 하나도 적용되지 않은 상태임 그담에 리액트가 번들링된 JS 코드가 전달되고 다시 렌더링되면서 자기자리를 찾아가는 거임

  • 두번 렌더링을 하면 비효율적인거 아님? -> 프리 렌더링으로 빠르게 응답할 수 있다는 점이 단점을 보완함

  • 근데 SSR이면 SSR이고 CSR이면 CSR인데 SSG가 왜 필요한거임? -> 요청에 따라 보여줘야하는 컨텐츠가 다른 동적 페이지는 SSR이 필요한데 매번 같은 컨텐츠를 보여주는 페이지는 SSR이 필요없으니까 고민하다가 나온거임

  • SSG는 뭔데? -> 빌드시에 미리 컨텐츠를 포함한 HTML을 프리렌더링 해두는거임 요청이 들어오면 알맞은 HTML을 제공해줌

  • 그래서 왜 SSG를 쓰는거임? -> 빌드 타임 때 정적 페이지로 렌더링을 해놓았기 때문에 유저의 요청마다 리렌더링 할 필요가 없음

  • 서버가 없는데 어떻게 SSR 방식이 가능한거임? -> Next는 노드를 기반으로 구축됐음