반응형 Next.js14 Next.js - SEO와 Pre-rendering Next.js는 기본적으로 Pre-rendering한다. 1. 처음 크롤러가 인식할 HTML이 로드된다.(CSR은 빈페이지부터 시작하므로 크롤러가 아무 데이터도 조회할 수 없는 페이지가 된다.) 2. 이후 js번들이 로드되면서 사용자와 웹이 인터렉션할 수 있음.(HTML만으로는 인터렉션 할 수 없음) Next.js의 Pre-rendering 방식 SSG : 빌드타임에 딱 한번 pre-render(권장됨) ISR을 통해 데이터 변화가 업데이트 되도록 하는것이 좋음 SSR : 요청타임마다 pre-render Page의 내용물이 외부데이터에 의존적인 상황 : getStaticProps로도 가능 Page Paths까지 외부데이터에 의존적인 상황 : getStaticPaths도 함께 활용 2022. 9. 14. ISR : 일정주기마다 업데이트 해주는 SSG ISR을 느끼기 위해서는 SSG를 알아야 한다. SSG 먼저 SSG부터 이야기를 하면 SSG는 getStaticProps를 사용한다. export async function getStaticProps() { console.log("server"); //build시 페이지가 이미 만들어졌음 return { props: { time: new Date().toISOString() }, //빌드시 시간에 이미 만들어지고 더는 바뀌지 않음 }; export default function SSG({ time }) { return ( ...생략... Welcome to Next.js! {time} 위와 같이 작성해주면 페이지가 빌드될때 한번 페이지가 생성되고 그 이후 바뀌지 않는다. 이렇게 되면 데이터가 바뀐후에도 .. 2022. 9. 13. getStaticProps - Next.js에서의 프리렌더링 Next.jx에서 getStaticProps를 사용하면 프리렌더링을 하게 된다. 1. 서버사이드에서 html을 만들어서 클라이언트에게 전해준다 (ex : 데이터fetch) 2. 클라이언트사이드에서 JS로 추가 작업 진행 (ex : 여러가지 리액트 훅) Next.js 공식문서는 언제 쓸지, 언제 작동되는지 등등 친절하게 알려주고있다. 언제 사용해야 할까? - 유저 요청 이전에 페이지 렌더링을 위해 데이터가 필요할때 - Headless CMS%EB%8A%94%20%EC%97%86%EB%8A%94%20%EC%85%88%EC%9D%B4%EC%A3%A0.)에서 데이터를 가져올때(ex : NotionAPI) - 페이지가 SEO를 위해 프리 렌더링 되어야 할때, getStaticProps는 CDN에 캐시 될 수 있는.. 2022. 7. 24. Next.js "Reference Error: document is not defined" Reference Error: document is not defined document is not defined 를 해결하려면 next.js의 작동방식을 먼저 알아야 한다. CSR(Client side rendering)인 리액트와 달리, Next는 첫 렌더링에서 SSR(Server side rendering)방식을 취한다. 서버에서는 document를 찾을 수 없다. 이를 간과하고 document같은 브라우저에서만 작동하는 기능을 SSR이 작동하는 시점에 이용하면 Reference Error : document is not defined 에러가 발생한다. Next.js에서 ReferenceError : document is not defined 가 뜰 때 해결책은 총 3가지이다. 1. window .. 2022. 3. 2. 이전 1 2 3 4 다음 반응형
