인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

Inflearn Community Q&A

eazycode's profile image
eazycode

asked

Next.js (v15) to be eaten in bite-sized pieces

ISR 구현에 궁금한 점이 있습니다.

Resolved

Written on

·

33

0

안녕하세요.

강의 정말 재밌게 보고 있습니다.

 

딱 두 가지 몇번을 돌려봐도 궁금증이 풀리지 않아 문의드립니다.

(* Page Router 를 사용하는 Next 14버전 기준)


1) ISR 질문

ISR은 기본적으로 SSR의 형태라고 생각 되는데(빌드 타임에 페이지를 생성해놓는것이..)

일정 시간을 두고 페이지를 재 생성 한다는 게 이해가 안 갑니다..

 

이미 빌드를 마치고 서버에 배포를 했다고 가정하고(제가 원래 백엔드 개발자라..)

그 후에 페이지가 서버에서 재 생성되면 빌드가 다시 한번 이뤄지는건가요..?

(빌드가 계속해서 이뤄질수는 없을텐데..)

 

아니면 처음에는 미리 생성 된 페이지를 전달해주고 이후로는 SSR 형태로

페이지가 생성되는걸까요? 데이터가 계속 최신으로 변경 되니
전체 페이지가 SSG일수는 없을거고(처음 요청에 응답한 페이지만 미리 생성된 페이지일텐데)


초기 SSG에 변경된 데이터만 SSR형식으로 만들어지는 건지..

상식적으로 리빌드가 계속 될일은 없는데 페이지가 새로 생성이 된다고하니

빌드를 안 했는데 페이지가 생성될수 있나 싶고..제가 너무 틀에 갖혀서..

 

2) 동적 페이지 + SSG 방식으로 렌더링하기

이것도 비슷한 결의 질문인 것 같은데요

 

fallback 옵션을 true로 했을 때 서버에서 필요한 작업을 마치면,

그 이후로는 캐싱이 되어서 없던 요청에 대한 페이지가

반쪽짜리 SSG에서 완전한 SSG로 작동하는건지 궁금합니다.

 

그리고 만약 캐싱이 되는게 맞다면 서버에서 캐싱이 되는걸까요?

 

추운 날씨에 감기조심하세요 감사합니다.

reacttypescriptnext.js

Answer 1

1

winterlood님의 프로필 이미지
winterlood
Instructor

안녕하세요 이정환입니다. 순서대로 답변드리겠습니다.

 

1) ISR

우선 ISR은 SSR의 형태가 아닌 SSG의 업그레이드 형태입니다.

SSR은 Server Side Rendering의 약자로, 런타임에 매 요청마다 실시간으로 페이지를 생성하는 방식이고, SSG는 Static Site Generation의 약자로, 빌드 타임에 미리 정적으로 페이지를 생성해두는 방식입니다.

일정시간을 두고 페이지를 재 생성한다는 말은 빌드를 다시 한다는 이야기는 아닙니다. Next.js 서버가 자체적으로 브라우저로부터 요청이 발생한 것 처럼, 페이지 컴포넌트를 실행하여 정적인 HTML 페이지를 생성해 서버측에 저장해둔다는 이야기 입니다. 더 쉽게 이야기하자면 정적으로 빌드 타임에 생성된 페이지를 백그라운드에서 다시 생성해 캐시를 갱신한다고 이해하시면 될 것 같습니다.

빌드를 하지 않아도 서버측 백그라운드에서 페이지 생성은 얼마든지 가능합니다 😃 이는 Next.js가 제공하는 기능입니다.


2) 동적 경로를 갖는 페이지 + SSG 방식으로 렌더링하기

네 맞습니다. 캐싱이 되어 있지 않은 페이지는 실시간으로 생성해 응답 + 캐싱에 저장하고, 캐싱이 되어 있는 페이지는 캐싱된 페이지를 응답하는 방식으로 동작합니다.

 

추가적으로 궁금하시거나 사소하게라도 헷갈리시는 부분 있으면 편하게 답글 or 추가 질문 부탁드립니다!

감사합니다 codeflow님도 감기 조심하시구 새해 복 많이 받으세요 🙇‍♂

eazycode님의 프로필 이미지
eazycode
Questioner

간만에 정말 훌륭한 강의를 보면서 너무 즐거운 시간을 보내고 있습니다.

궁금증이 전부 해소되었네요.

답변 감사합니다.

eazycode's profile image
eazycode

asked

Ask a question