728x90 반응형 SSR2 next.js 학습 (1) next.js 👇 네트워크 확인하는 법 ssr (server side render) 서버가 그리는 것 -> 새로고침할 때마다 바로바로 서버에서 시간대를 받아옴 서버에서 데이터를 가져오고 props로 데이터를 전달해주는 방식 getServerSideProps 안에 console.log(111) 찍으면 터미널에 콘솔이 찍히고 브라우저에는 안 찍힘 csr (client side render) 클라이언트가 데이터를 가져와서 그린다 -> csr 를 담당하는 함수는 없음 기존 리액트 사용법과 동일 useEffect, useState 사용해서 시간을 넣어주는 방식 console.log(1111) 찍을 시 클라이언트에서 찍힘 : ttfb : 리소스를 요청하고 난 후 해당 요청에 대한 첫번째 바이트가 걸리는 시간 : f.. 2023. 4. 14. next.js 왜 사용하나요 요즘 프론트엔드 개발자 필수템 next.js 어떻게 저떻게 사용은 했지만 프리렌더링과 html 파일 만들어져서 빠르고 SEO 좋다~ 하는 점만 두리뭉실하게 알았지 딱히 뭘 알고 쓴다는 느낌은 없었다 그래도 next 왜 쓰는지 뭐가 좋은지 는 정확히 알아야하지 않을까... 🤔 싶어 시작한 글 React.js : Html과 JS파일을 한꺼번에 보내고 클라이언트가 js 코드를 통해 웹 화면을 렌더링 Next.js : Pre-Rendering된 웹 페이지를 클라이언트에게먼저 보내고, React가 번들링된 자바스크립트 코드들을 클라이언트에게 전송함. SSR vs CSR SSR 서버사이드 렌더링 CSR 클라이언트 사이드 렌더링 👆 SSR 클라이언트가 데이터에 요청하면 프->백->데이터베이스->백->프->브라우저 순.. 2023. 2. 26. 이전 1 다음 728x90 반응형
