hmk run dev

Pre-rendering - 기본적으로 모든 페이지 프리 렌더링 - 사전에 HTML 파일을 만든다는 의미 - 퍼포먼스 향상, SEO next.js에서 자바스크립트를 껐을때 보여지는 화면을 관찰해보자! 끄는 방법 > F12 > F1 > Debugger > Disable Javascript 왼쪽이 끄기 전 오른쪽이 끈 후입니다. 메인페이지 상세페이지 서버사이드 렌더링으로 만든 상세 페이지는 CSS차이 정도 밖에 없는 것 같습니다 :) > 서버에서 이미 데이터를 가져와 HTML로 만든다음에 내려줘서! no Pre-render & Pre-render no Pre-render - 아무것도 없다가 JS가 로드 된 이후에 화면을 그리기 시작함 Pre-render - 사전에 만들어진 HTML 메타데이터 포함 요소들이 ..

Next js의 모든 페이지 들은 사전 렌더링 (Pre-rendering)을 한다. - 더 좋은 퍼포먼스 - 검색엔진 최적화(SEO) Pre rendering엔 두 가지 형태가 있는데 차이점은 언제 html 파일을 생성가는가에 있다. 1. 정적 생성 - 프로젝트 빌드 시점 생성, 모든요청에 활용 - nextjs는 정적 생성을 권고함 - 정적생성된 페이지들은 cdn에 캐쉬됨 - getStaticProps / getStaticPaths - 미리 만들어도 되는 페이지 상품리스트, 블로그 게시글 등을 처리할때 유용 2. SSR - 매 요청시 html 생성 - 항상 최신상태 유지 - getServerSideProps 페이지에 타이틀과 메타 정보들이 비어있는데 검색엔진 최적화를 위해 SSR을 이용해 해결 보겠습니다..

리액트에 SSR이 가능하게 만드는 nextjs를 다시 공부해보려고 한다! 예전에 한번 작은 프로젝트를 진행해본 적은 있지만 그땐 SSR, CSR에 대한 경험과 지식이 다소 부족한 부분이 있어서 이해를 잘못하고 개발했던 것 같다. 현재는 리액트, 뷰, JSP 등을 다루면서 좀 더 피부로 와닿는 이해를 할 수 있을 것 같고 다시 상기시킬겸 작은 프로젝트를 하면서 깔~뜸하게 정리해보겠다. nextjs를 쓰는 이유 장점은 많겠지만 아주 간략하게 적어보도록 하겠습니다 :) 검색 SEO에 좋음 - 이미지로 볼 수 있듯이 nextjs는 html을 그대로 확일할 수 있다! (static파일 지원) 번들링이 자동으로 된다. - 일반적으로 SPA(weppack를 사용하지 않은)는 초기 화면 로딩 시 모든 파일들을 한 번에..