회고/Pair-programing study2 NextJs를 이용한 SSR / SSG 마스터 하기 - 2 react query로 SSR 구현 일단 루트 파일 useState에 queryClient 저장 set은 갱신될 일이 없기 때문에 필요 없다 hydrate는 처음 봐서 뭔지 잘 모르겠음 서버에서 데이터를 받을 수 있게 해주는 것 Hydrate란, Server Side단에서 렌더링 된 정적 페이지와 번들링된 js파일(Webpack)을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 js 코드를 서로 매칭시키는 과정을 말합니다. 즉 hydrate가 일어나기전엔 자바스크립트 상호작용 x 컴포넌트 안에다 해놓으면 csr로 해야할지 ssr로 해야할지 알 수 없음 그래서 컴포넌트 밖에다 해줘여 함 getServerSideProsp안에 없으니까 ssr이 안되는 것 저 함수 안에서 동작하게 하기.. 2022. 8. 9. NextJs를 이용한 SSR / SSG 마스터 하기 - 1 NextJs폴더 구조 pages폴더의 api폴더에서 백엔드 처리를 할 수 있다. pages 폴더로 라우팅 처리를 할 수 있다. _app.tsx는 리액트에서 index.tsx와 비슷한 기능을 하는 것 같다 props로 pages폴더에 있는 컴포넌트를 폴더명(도메인)별로 받아서 화면에 띄움 동적 라우팅도 매우 편한 것 같다 파일명에 [id]만 붙이면 가능했다. 나는 리액트면 리액트, 넥스트면 넥스트 문법만 쓸 수 있을 줄 알았는데 넥스트 안에서 리액트도 사용할 수 있는 구조였다. 또한 컴포넌트별로 CSR, SSR, SSG가 가능한 것이 아니라 데이터 통신을 할 떄 즉 api 요청을 할 때 어떤 함수로 하느냐에 따라 CSR, SSR, SSG가 가능한 것이었다. CSR, SSR, SSG 의 차이를 눈으로 확인했.. 2022. 8. 8. 이전 1 다음