루루의 우당탕탕 개발 스토리 루루의 우당탕탕 개발 스토리

1. next.js가 SSR을 수행하는 방식 웹서버에서 html+css+js를 다운받아 렌딩할 때 두 가지 방식이 있다. CSR과 SSR. 이 둘의 차이는 이전 포스팅에서 확인할 수 있다. https://lulu-developmentlog.tistory.com/187 nextJS 왜 쓰는가 NextJS에 대한 설명을 구글에서 가져오면 아래와 같다. nextJs는 서버 사이트 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 lulu-developmentlog.tistory.com next.js는 기본적으로 SSR를 기반으로 한다. 하지만 SSR은 처음 및 초기 로딩속도는 빠르지만 페이지를 넘길 때마다 중복되는 데이터를 서버측에서..

여러 Next.js 프로젝트를 보다보면 흔하게 getInitialProps, getStaticPath, getStaticProps, getServerSideProps들을 마주하곤 한다. 이들의 역할을 쉽게 생각하면 React의 useEffect의 역할을 생각하면 쉽다. React의 useEffect의 경우 렌더링 전 사전에 data를 fetching하기 위해 사용된다. next에서도 이같은 기능을 getInitialProps, getStaticPath, getStaticProps, getServerSideProps를 통해 제공한다. 각각의 종류를 하나하나 자세히 살펴보자. 1. getInitialProps 이름에서 쉽게 유추할 수 있 듯, getInitialProps는 서버에서 실행되어 data를 미리 ..

yarn create next-app --typescript를 통해 next.js 기본설정을 마치다보면 자동으로 _app.tsx, _document.tsx가 설치되어있는 모습을 볼 수 있다. 이 두가지는 next.js에 어떤 역할을 주는지 알아보자! 1. _app.tsx 기본적으로 Next.js에서는 App의 구성 요소를 사용하여 모든 페이지를 초기화한다. 따라서 App.tsx를 만들어 기본 App 구성 요소를 덮어 쓸 수 있다. 즉, 모든 페이지에서 공통으로 필요한 처리를 여기에서 작성하여 쓰면 된다. 이를테면 - 페이지 간 공통 레이아웃 - 전역 State (Store,React-query 설정 등) - 글로벌 CSS - 각 Route Provider - 상태관리 library의 Provider, R..

NextJS에 대한 설명을 구글에서 가져오면 아래와 같다. nextJs는 서버 사이트 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다. 일단 nextJs는 SSR이다. 즉 Server Side Rendering이다. 이것과 많이 나오는 개념이 CSR Client Side Rendering이다. SSR 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식 이렇게 이루어진 사이트를 들어가게되면 새로고침을 해도 깜빡임 없이 바로 페이지를 볼 수 있다. CSR의 경우 대부분 React를 이용하여 렌더하는데 그렇게 되면 ..