Next.js
1.렌더링 방식을 결정하는 Next.js의 데이터 호출 메서드 - getServerSideProps, getStaticProps 사용기, params, query props 사용하기
의외로 당황했던 부분은, 이 메서드를 쓰는 방법은 알겠는데 그래서 어디에서 선언해주어야 하는 것인지, 이 메서드에서 호출한 데이터를 어디에서 어떻게 props로 전달받아 사용하는 것인지 모르겠다는 것이었다. 다른 코드들을 구글링해서 찾아봐도 이 부분에 대해서는 알기 어
2.Next.js 페이지 이동과 라우팅
pages 폴더 밑에 있는 파일은 모두 빌드 시점에 html을 만들어둔다.따라서 서버측에서 렌더링한 페이지의 html을 줄 수 있다.CRA는 CSR방식이기 때문에 페이지가 달라도 동일한 html을 빈 상태로 주고, js 파일로 그리도록 한다.반면 Next.js는 이미
3.Next.js 와 typscript 초기세팅
https://noogoonaa.tistory.com/65
4.[Next.js] API 만들기 , Restful한 API만들기
pages/api 디렉토리에 파일을 만든다.req는 http.incomingMessageres는 http.ServerResponse의 인스턴스이다.http://localhost:3000/api/파일이름에 접속하면 받아온 json데이터를 볼 수 있다.RESTfu
5.Next.js 13, 뭐가 달라?
예전엔 그런 느낌이 있었던 것 같기도…하지만 지금은 아냐.. 무언가, 강력해졌다.(Next.js 공식문서 그림 첨부)Next.js는 공식문서에서 이렇게 이야기합니다.여러 측면에서 기능을 지원하고 있고, 리액트는 이 중 UI를 담당하는 라이브러리로 소개되어 있습니다.리액
6.Next.js 13버전의 SSR 알아보기 (Feat.RSC)
여러가지가 있지만 렌더링 방식에 대해 얘기해보자면12버전까지는 페이지별 다른 렌더링 방식을 적용할 수 있었음그러나 이것은 명확한 한계가 있었는데, 서버 사이드 렌더링을 위한 페이지에서는 클라이언트 로직을 실행할 수 없다는 것이었음13버전 부터는 페이지가 아닌 컴포넌트
7.Next.js 13 - streaming SSR + Suspense
직접 만들어본다면? 이런식으로 간단하게 과정을 설명할 수 있다.관련 이슈: SSR에 대한 제한된 동시성. 성능 이슈 => react 18에서는 어떻게 해결하려 하는지 (streaming SSR)ReactDOMServer.renderToString API의 제한된 동시성