Nextjs Script컴포넌트란? 서버 및 클라이언트 모두에서 JavaScript 코드를 실행하고 데이터를 초기화하는데 사용되는 컴포넌트다. (SSR, CSR 모두 적용 가능함) 서버에서 데이터를 미리 가져와 클라이언트로 전달하거나, 클라이언트 측에서 라우팅 또는 페이지 진입시 특정 작업을 수행 할 수 있음 : 페이지가 서버에서 처음 렌더링 될 때 데이터 초기화하는데 사용한다. : 페이지가 클라이언트에서 로딩될 때 특정 작업 수행하도록 설정 할 수 있다. 사용예시 이러면 저 script는 Dashboard라는 페이지 진입시 로드됨 주요 속성 정리 src : 로드할 스크립트 파일 경로 지정 strategy : 스크립트의 로드 전략 설정 (언제 로드/실행 하는지) onLoad : 스크립트가 로드되면 실행할 함수 지정 onReady : 스크립트가 준비되면 실행할 함수 지정 onError : 스크립트 로드 중에 오류가 발생할 때 실행할 함수 지정 Script: str…

Next.js 13 이전버전임 getStaticProps 을 위한 데이터 가져오기 함수다. 런타임이 아닌, 빌드(build)타임에서만 실행이 되므로, 변동이 거의 없는 데이터 대상으로만 적용하는게 좋다. Ex) FAQ 글 목록리스트 등등.. getStaticPaths 를 위한 정적 경로 생성 함수다. 동적으로 생성되는 페이지를 사전 렌더링할 때 사용한다. Ex) 하나의 FAQ 데이터(id:1)가 존재하면, faqs/1 라는 경로를 빌드 타임에 미리 사전 렌더링 할 수 있다. getServerSideProps 서버 사이드 렌더링을 위한 데이터 가져오기 함수 매 요청마다 데이터를 서버에서 가져온다 자주 업데이트 되는 posts 데이터들을 외부 API로부터 fetch해서 사전 렌더링 하고 싶을 때 사용함 페이지 라우팅 페이지 경로 설정은 pages 디렉토리 내에서 자동으로 처리된다. pages/about.js는 ‘/about’ 경로와 연결됨 useRouter 페이지 내에서 라우팅을 조작…

Next.js 개념 & 장점 서버사이드 렌더링(SSR)을 제공하는 라우팅 시스템을 내장하고 있고, SEO에도 우수하다 SSR 뿐만 아니라, 정적 사이트 생성 (SSG)를 지원하여 사전에 페이지를 _미리 렌더링과 캐싱이 가능하다. _(각 페이지들을 사전에 미리 HTML 문서로 생성해서 갖고 있음) 성능 최적화: SSR 및 SSG를 사용하여 초기 로딩속도 개선 및 성능 최적화에 용이함 SEO 최적화: SSR로 검색엔진 최적화 용이, 페이지 제목, 메타 태그 설정 용이함 확장성: 기존 라이트 앱을 쉽게 마이그레이션 가능하고, 다양한 데이터 fetching 및 라이브러리 통합이 가능함 거대한 커뮤니티: 큰 커뮤니티와 다양한 플러그인 및 라이브러리 지원 보안: CSRF 및 XSS 공격을 보호하는 내장된 보안 기능 Next.js 기능 서버사이드 렌더링(SSR): 페이지를 서버에서 생성하고 클라이언트에 전송하여 초기 속도를 개선. SEO에도 유리하다. 정적 사이트 생성 (SSG): 빌드 시…