반응형 개발/Next.js35 getStaticPaths의 fallback Nextjs는 getStaticPaths에 정의된 path들을 정적으로 프리렌더링한다. 즉, 동적라우팅을 사용할 때 어떤 페이지를 미리 Static으로 생성할지 정하는 api이다. (정적으로 프리렌더링 한다는 뜻은 빌드타임시에 만들어놓고 계속 가져다 쓴다는 뜻 SSR은 매 요청시마다 새로 만듬) //posts/[id].js export async function getStaticPaths() { // const paths = getAllPostIds(); const paths = [ { params: { id: 'ssg-ssr' } } ]; return { paths, fallback: boolean 혹은 'blocking' }; } 이때 getStaticPaths의 리턴값에 fallback은 무엇일까 .. 2022. 9. 20. next/image : next.js에서 제공하는 이미지 최적화 태그 지금까지 몰랐다. 공식문서를 흐린눈으로 보다가 우연히 알게 되었다. next.js에서 제공하는 태그의 확장 컴포넌트인 태그는 이미지 최적화 기능이 있다고 한다. Improved Performance : 언제나 디바이스 사이즈에 맞게 최적화된 이미지 제공 Visual Stability : width,height를 명시하여 이미지 만큼의 공간 확보 -> CLS방지 CLS : 현재 보고있는 페이지에 갑자기 발생하는 레이아웃의 변경 -> 잘못된 클릭의 원인이 될 수 있음 Faster Page Loads : 이미지가 뷰포트에 들어왔을 경우만 로드(Lazy load) -> 페이지 로드 속도 향상 Asset Flexibility : 외부에 저장되어 있는 이미지까지 리사이징 가능 외부링크 사용할 때 next.confi.. 2022. 9. 19. Next.js 에서 Next/link와 a 차이 a태그 페이지 전체로드함,spa그런거 없음 서비스 외부 링크로 연결할 때 사용 Link태그 서비스 내부 링크로 연결할 때 사용하여 SPA를 적용할 수 있음 최적화 SPA가 적용된다. 개발자 도구에서 임시로 body 태그에 background:red를 넣고 Link태그로 이동, a 태그로 이동을 각각 해보면 Link태그로 이동했을때 : background가 바뀌지 않는다. SPA로 이동하기 때문이다. a태그로 이동했을때 : 페이지가 리렌더링되므로 background:red가 사라진다. 최적화 Link태그가 가져다 주는 최적화를 설명하려면 Next.js에서 기본적으로 제공하는 최적화를 설명해야 한다. Automatic Code Spliting Next.js는 Automatic Code Splitting을 제.. 2022. 9. 18. Shallow routing을 사용하면 리렌더링, 데이터페칭없이 페이지이동 가능 구구절절 설명하기보다 코드랑 gif로 설명이 가능하다. // src/pages/settings/my/[info].js import { useRouter } from 'next/router' import React, { useState } from 'react' import GeneralHeader from '../../../components/GeneralHeader' import Layout from '../../../components/Layout' //서버에서 data fetching 여부를 확인하기 위해 콘솔로그만 작성 export async function getStaticProps() { console.log('server') return { props: {}, } } //getStaticPa.. 2022. 9. 16. 이전 1 2 3 4 5 6 7 ··· 9 다음 반응형
