nextjs3 [Next.js] getStaticProps, getServerSideProps SG / SSR의 개념 SG : Static Generation SSR : Server Side Rendering Next는 브라우저 렌더링 시, 기본적으로 Pre-rendering(사전렌더링)을 한다 Pre-rendering이란, 각 페이지들을 사전에 미리 HTML 문서로 생성하여 가지고 있는 것이다. 이 말을 리액트와 비교해 보자면 아래와 같다. 리액트에서 CSR 방식은 번들링 된 JS 가 클라이언트 단에서 모든 렌더링을 담당했다. 하지만, Next의 Pre-rendering 시스템에서는 `빌드타임(Build Time)` 에서 해당하는 페이지 별로 각각의 HTML 문서를 미리 생성해서 가지고 있다가 서버로 해당페이지에 대한 요청이 들어올 때 알맞은 페이지를 반환해준다. No Pre-Rendering,.. 2022. 1. 19. Hydrate 이해하기 Hydrate Server Side 단에서 렌더링 된, 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤 클라이언트 단에서 HTML 코드와 JS 코드를 서로 매칭시키는 과정 1. Write site in React 2. Create build for production using ReactDOMServer, a server-side React API to generate HTML from React. 3. On Initial Load HTML generated from the server is displayed 4. ReactDOM.hydrate(), hydrates the HTML page rendered from the server with JavaScript 이 과정을 이해하기 위해 Reac.. 2021. 10. 20. [NextJS] Access Token 관리 정리이유 : 페이지 새로고침 시 State가 사라지고 SSR 랜더링에서는 처리방법이 다르기 때문 JWT Access Token을 관리하는 3가지 방법 Cookie Local Storage Session 위 3가지 방법에서 Cookie를 활용해 Token을 관리하고 Session을 유지시키는 방법에 대해 정리 Install Package npm i react-cookies next-cookies npm i @types/react-cookies (타입스크립트 사용 시) *next-cookies 패키지는 Cookie에 담겨있는 값들을 JSON 형태로 변환해줍니다. // 기존 Cookie가 값을 보관하는 방식 accessToken=ABCDEDFD; refreshToken=DFSGGDF; // next-cooki.. 2021. 10. 1. 이전 1 다음
