반응형 2022/0913 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. 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 2 3 4 다음 반응형
