next.js 학습 (1)

 

 

next.js

 

 

 

 

 

👇 네트워크 확인하는 법

 

---

 

 

 

 

ssr (server side render)

서버가 그리는 것

 

-> 새로고침할 때마다 바로바로 서버에서 시간대를 받아옴

 

서버에서 데이터를 가져오고 props로 데이터를 전달해주는 방식

 

getServerSideProps 안에 console.log(111) 찍으면

터미널에 콘솔이 찍히고 브라우저에는 안 찍힘

 

 

 

 

csr (client side render)

클라이언트가 데이터를 가져와서 그린다

 

-> csr 를 담당하는 함수는 없음

기존 리액트 사용법과 동일

 

useEffect, useState 사용해서 시간을 넣어주는 방식

 

console.log(1111) 찍을 시 클라이언트에서 찍힘

 

: ttfb : 리소스를 요청하고 난 후 해당 요청에 대한 첫번째 바이트가 걸리는 시간

 

: fcp : 텍스트 / 이미지 등 페이지가 로드되기 시작한 시점, 콘텐츠 일부가 렌더링 되기 시작한 시점의 시간

=> fcp 가 빠르면 서비스를 더 빠르게 이용할 수 있음 (1.8초는 좋은 점수)

 

: ttl : 앱이 사용자와 상호작용하는데 준비가 된 시점 (화면 그려지는 것과 무관)

 

 

https://web.dev/rendering-on-the-web/

 

동작

 

서버에 최초 get 요청 -> 빈 html -> js css 등 asset 다운로드 -> js 파일 실행 -> react 실행 후 렌더링 -> 화면 출력

 

 

 

---

 

 

ssg (static side generation)

정적인 사이트를 생성(데이터를 가져와서 그려둠)

blog에 적합(글을 쓸 때 이외엔 바뀔 일이 없기 때문)

 

-> ssg 담당하는 함수

getStaticProps, getStaticPaths

 

 

 

동작

 

https://web.dev/rendering-on-the-web/

 

 

서버에 get 요청-> 미리 완성된 html 응답 -> 화면 출력

 

 

getStaticProps

 

console.log(111) 서버에서 가져오기 때문에 터미널에 찍힘

ssg 는 ssr 처럼 동작해서 헷갈림

 

 

ssg 보는 방식

 

build 후에 start

-> 시간 안 찍힘... 빌드 후에 만들어진 페이지를 보여주는 것이기 때문

 

 

그럼 언제 필요?

ssr 은 새로 고침 할때마다 서버에서 가져옴 -> 서버 부하

ssg는 빌드할때 만들어진 것을 그대로 보여주는 것이기 때문에 서버에 부하 없이 보여줄 수 있음

 

 

 

 

getStaticProps

 

 

getStaticProps 와 함께 쓰이는 함수

path를 미리 불러오게 함

 

 

 

 

 

ISR (incremental static Regeneration)

 

증분 사이트를 재생성

-> 특정 주기로 데이터를 가져와서 다시 그려둔다

 

getStaticProps with revalidate

-> revalidate 라는 값을 같이 리턴하는 것

 

 

 

time을 리턴하는 코드

revalidate : 1

 

1초마다 다시 패칭 = 다시 생성

실제로 새로 고침시 콘솔이 1초 정도 늦게 뜸

 

 

 

---

 

pre-render // SEO

 

 

 

 

 

 

 

next.js는 모든 페이지를 기본적으로 pre-render(ssr, ssg) 함

 

 

원래 React 는 js가 로드 되어서야 UI를 그림

pre-rendering은 js 가 로드 되기 전에 HTML를 먼저 그림

 

 

==> SEO

 

pre-rendering 해두면 검색엔진에게 필요한 데이터를 제공할 수 있음

 

 

ssr => 요청 타임에 pre-render

ssg => 빌드 타임에 pre-render

 

 

 

---

 

 

pageprops 를 통해 공통 layout을 조건부로 구현 가능

 

 

 

 

---

 

Image 최적화

 

import Image from "next/image"
import cat from "../pubilc/cat.jpg"

export const imageComponent = () => {
	<Image
    	alt=""
        src={cat}
        width={700}
    />
}

 

옵션에 따라서 리사이징 가능

 

 

 

 

csr & ssr & ssg

 

 

가장 쉽게 이해할 수 있었던 영상

 

https://www.youtube.com/watch?v=YuqB8D6eCKE