[Next + React Query로 SNS 서비스 만들기] 섹션 5 정리

섹션5

request memoization과 data cache

Next 13 앱라우트 부터는 프론트서버에 부담이 늘었다. 서버컴포넌트 도입

next 캐시는 4종류가 있다. request memoization, Data Cache, Full Route Cache, Router Cache

BUILD TIME은 개발하고 배포할 때, Request Time은 페이지에 접근하는 경우를 말한다.

Request memoization

같은 서버컴포넌트에서 동일한 api를 두번찌르는경우 부담이 가는것 아닐까 하는데

Next에서 알아서 최적화해서 한번으로 요청을 줄여준다.

Duration (지속기간)

한페이지에 중복된 api 요청을 최적화 해주는 기능이기때문에
지속기간은 한페이지에 한한다. 다른페이지로 이동하는경우 다시 불러와진다.

 

Revalidating (캐시 무효화)

페이지 이동시 캐시가 무효화 되면서 다시불러옴

 

Opting out (캐시 안하는 방법)

 

데이터캐시

프론트서버에서 백엔드로 보낸요청, DB로 보낸요청 얼마나 오래 캐시할 것이냐

request memoization은 한페이지에 국한되었지만 데이터캐시는 페이지에 국한되지 않는다.

데이터 캐시를 사용하지 않는방법

fetch할 때 { cache: 'no-store'}를 사용한다. 캐시를 사용하지 않겠다는 기능

 

Duration

no-store를 사용하지 않으면 프론트서버가 백엔드 캐시를 가지고 있는데 새로고침하거나, 캐시를 사용하지 않는이상 유지된다.

 

Revalidating

• Time based revalidation (시간 베이스 )
• on demand Revalidation (의도적 )

Time based revalidation

1시간동안 캐시에 있는 값을 가져오다가 이후에는 새로운 데이터를 가져온다.

fetch('http://...', { next: {revalidate: 3600 }}) // 초 단

on demand revalidation

fetch('http://...', { next: {
    revalidate: 3600,
    tags: ['posts', id]
})

tags가 있는경우 캐시초기화를 시켜야할때 서버에서 revalidateTag('posts')를 사용해서 초기화 할 수 있다.

revalidatePath('/home') 을 이용하면 해당 패스에 모든요청을 초기화한다.

data-cache가 프론트서버, data source가 백엔드 서버라고 생각하면된다.

stale은 캐시 유효시간이 지난것

라이브러리가 백엔드서버 요청을 보내는것도 캐싱이되는데
라이브러리의 캐싱을 막으려면 page.js 에 넣어주면된다.

넣어주면 페이지에서 사용하는 요청모두를 캐싱하지 않겠다는 선언이다.

export const dynamic = 'force-dynamic'

 

Full Route Cache

적용을 하려면 변경이 없어야한다.

 

Duration

계속 유지가 된다.

 

Revalidating

데이터캐시가 수정되는순간 full Route cache도 수정된다.

fetch할 때 no-store를 사용하면 데이터를 매번가져오고, full route cache도 매번

재배포할때 캐시 갱신이 된다.

컨텐츠가 변하지않는 페이지를 만들지 않는이상 사용할수가 없다.

 

Opting out

dynamic = 'force-dynamic'

Revalidate = 0

no-store

데이터캐시를 안쓰면 풀라우트 캐시를 사용하지 않느것이다.

cookie, headers, useSearchParams 를 사용하면 풀라우트 캐시가 적용되지 않는다.

 

Router cache

클라이언트 캐시

한번받아온 레이아웃 컴포넌트는 재사용한다.

같은 레이아웃을 가진 페이지로 이동하면 rsc에 layout 코드가 들어있지 않다.

 

Duration

페이지를 새로고침하기전까지 유지된다.

자동 무효화 시간

라우트가 static 이면 5분

라우트가 dynamically rendered 면 30초 (다이나믹 function(cookie, headers, useSearchParams) 사용, 새로운 데이터를 계속 가져오는 경우 )

다이나믹 라우트는 기본이 30초인데 더 늘리고 싶은경우 prefetch={true}를 사용하면 된다.

 

Revalidating

• revalidatePath, revalidateTag
• cookies.set, cookies.delete
• router.refresh

opting out

라우터 캐시는 끌수없다. 기본적으로 30초

로그인하고 프로필 사진이 안바뀌는경우 레이아웃에 최소 30초 캐시가 있어서 그런거다.

초기화하려면 router.replace 해줘야한다.

static(ssg) 모드와 사라진 ISR 모드

두가지 배포모드가 있다.

static모드 , 다이나믹모드

next.config.js 에 output: 'export' 가 있으면 static 모드

const nextConfig = {
    output: 'export', // 있으면 static, 없으면 dynamic 모드 
    async rewrites() {
        return [
        ...
        ]
    }
}

static모드는 next 서버없이 정적인 html 페이지로 구성되어있는 정적인 사이트

빌드를 할때 모든 컨텐츠가 결정이 된다. 그래서 서버가 필요없다.

static exports

unsupported features 기능중에 하나라도 사용하면 다이나믹 모드로 사용해야한다.

https://nextjs.org/docs/app/building-your-application/deploying/static-exports

 

ISR

페이지 라우터에 있던 모드

앱라우터에는 없다.

뉴스나 블로그같이 변경이 많지 않은 컨텐츠에 사용한다. (주기적으로 변경이 있는지 확인하고 html을 다시 만들거나 새로운 컨텐츠를 추가하는 )

앱라우터에서는

Fetch, cache, revalidating 전략을 통해 ISR모드 처럼 사용할수있다.

data cache를 변경하지 않으면 매번 캐시된 데이터를 내려주는 Full Route Cache 를 사용해 적용 할 수 있다.

ISR 모드는 기존컨텐츠가 수정, 새로운 컨텐트가 생성되는 것인데

기존컨텐츠 수정은 - 데이터캐시를 revalidate 하는 것으로 사용

새로운 컨텐츠는 full route cache를 적용해 구현 할 수있다.

배포직전 build 하기

npm run build

npm run build를 하면 페이지가 static인지 dynamic 인지 구분해서 빌드해준다.

페이지 빌드 사이즈는 1mb는 크다. 최대 300kb 정도가 다운로드 하는데 이슈가 없다.

배포 맛보기

github, aws 에 가입

git 설치

git init 

git commit -m "배포준비완료"

git remote add origin http://github.com/아이디/저장소이름.git

git push origin main

 

주의할점

public 로 올리는경우 .env를 삭제해야한다.

 

aws 로그인

ec2 -> 인스턴스 -> 인스턴스 시작

인스턴스 이름 입력

우분투 선택

인스턴스유형 t2.small로 선택

키페어 - 키페어 없이 계속 진행

보안그룹 생성

인스턴스 시작

소스코드의 포트번호 3000을 80으로 변경

package.json 에 start 스크립트에 next start -p 80으로 수정

aws에서 인스턴스가 만들어졌으면 연결누르기

node 설치하기

Digitalocean ubuntu node option3 번째 설치방법

nvm install v20

git clone https://

cd 저장소 이름

npm i

npm i sharp (이미지 옵티마이제이션 성능 업그레이드 )

npm run build

vim .env.production 파일만들어서 .env.local에서 사용한 코드 복붙

:wq 해서 저장 후 닫기

cat .env.production으로 쳐보면 잘 작성이 되었는지 확인할수있다.

npm run build

탄력적 ip 할당 (고정 ip를 가져가는것 )

우측상단 셀렉트박스에 작업눌러서 연결

생성한 인스턴스 연결해준다.

Npm start 했을때

Permission deny 뜨면 sudo npm start로 해준다.

카톡 공유용 데이터 넣기

오픈그래프 이미지를 사용해야 sns 공유시 이미지가 노출된다.

generateMetadata

이미지, 타이틀 등등 많은 정보를 수정해서 넣을수있다.

설정하면 html 메타태그 property og:image라고 들어온것을 확인할수있다.

웹소켓으로 실시간 채팅 구현

npm i socket.io-client@4

소켓을 사용하면 실시간으로 정보를 가져올수있다.