반응형 개발/Next.js35 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. 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. router.push, <Link />, <a /> 차이 Next로 만든 제품 코드리뷰를 하다가 다음과 같은 코드를 보았다. const handleFunc = () => { router.push(`/example/${example.slug}`); }; return ( {example.name} ... ) 단순 페이지 이동같은데 왜 Link를 안쓰고 router.push 를 쓸까?? 그런데 Link와 router.push의 차이가 뭐지??? 궁금해졌다. 한글자료만 찾아봐도 잘 안나와서 결국 스택오버플로우를 들어갔는데 너무 정갈하게 설명이 나와있었다. 진작에 볼껄.. router.push window.location과 비슷하지만 태그를 만들지 않음. => 크롤러가 탐색하지 못함 SEO에 좋지 못하니 단순 페이지 이동을 위해서라면 사용하지 않는 것이 좋음. 태그를 .. 2022. 7. 29. 이전 1 2 3 4 5 6 7 8 9 다음 반응형
