반응형 2022/09/142 Next.js - getLayout : 여러개의 레이아웃을 사용할때 공통 레이아웃이 한개일때 하나의 공통된 Layout을 쓰는 경우는 pages/_app.js에 공통 레이아웃 컴포넌트를 작성하였다. 공통 레이아웃이 여러개일때 그렇다면 1페이지에서는 1번 헤더 2페이지에서는 2번 헤더 3페이지에서는 3번 헤더 이런식으로 활용하고 싶다면 어떻게 해야 할까?? Page.getLayout이라는 함수가 있다 이런식으로 pages/csr.js에 getLayout함수를 작성해주고 import { useEffect, useState } from "react"; import Layout from "../components/Layout"; import SubLayout from "../components/SubLayout"; export default function CSR() { ..생.. 2022. 9. 14. 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. 이전 1 다음 반응형
