[Next.js] 4가지 Data Fetching, SSR/CSR/SSG/ISR

SSR : Server Side Render

서버가 그린다.

그린다: 데이터를 가져와서 그린다

서버가 그린다: 서버가 데이터를 가져와서 그린다.

 

SSR을 담당하는 함수

- getServerSideProps

 

정해진 틀로 props에 원하는 값을 넘겨주면되는데 이때 time에 현재시간을 넣어주었다.

위와 같이 getServerSideProps를 선언하고 Home이라는 컴포넌트에서 {time}을 매개변수로 사용한다.

그리고 jsx return 문에서 해당 time을 출력해보면 아래와 같이 뜬다.

이 getServerSideProps와 페이지 Home 컴포넌트 어디서 작동하는지 알기위해 console.log를 써놨는데 클라이언트 브라우저에서는 아무 로그도 찍히지 않았다.

대신 terminal을 통해 server에서 로그가 찍히는걸 확인할 수 있었다.

따라서 서버가 데이터를 가져와서 그린다 라는 것을 알수있다.

 

---

CSR: Client Side Render

클라이언트(브라우저)가 그린다

그린다: 데이터를 가져와서 그린다

클라이언트가 그린다: 클라이언트(브라우저)가 데이터를 가져와서 그린다

 

위의 SSR과 같은 코드지만 getServerSideProps함수를 없애고 기존의 react 형식으로 작성하여 확인해보았다.

여기서 console.log를 써놓은 것을 확인할 수 있는데 아까 SSR방식일때 Home컴포넌트에서는 server 쪽에서 로그가 찍혔지만

지금은 클라이언트에서 로그가 찍히는걸 확인할 수 있다.

---

SSG: Static Site Generation

정적인 사이트를 생성한다

생성한다: 데이터를 가져와서 그려둔다

정적인 사이트를 생성한다: 정적인 사이트를 데이터를 가져와서 그려둔다

 

SSG를 담당하는 함수

- getStaticProps (with getStaticPaths)

위와같이 SSG 컴포넌트함수를 만들고 위에 getStaticProps 함수를 만들어서 똑같이 time을 props로 넘겨주고 console.log가 어디서 찍히는지 확인해보았다. 이때도 똑같이 terminal 서버쪽에서 로그가 찍히는걸 확인하였다.

하지만 dev 로 실행한 환경에서는 SSR처럼 동작하는걸로 보이기 때문에 build해주는 시점에서 정적파일을 만들어주기때문에 build를 해주고 yarn start(npm start)를 해주어 build로 만들어진 start환경에서 확인해야한다.

다음과같이 (SSG) 에 하얀 동그라미가 체크되어있고 automatically generated as static HTML + JSON (uses getStaticProps) 라고 뜨는걸 알수 있다. 따라서 자동적으로 정적 html과 json파일을 getStaticProps를 이용하여 만들어주는 것이다.

 

그리고 console.log를 새로고침을 하여 확인해보면 서버쪽이나 클라이언트쪽에서 모두 안찍히는걸 확인하였다.

대신 정적인 html이기 때문에 새로고침을 하여도 생성했던 date 날짜만 뜨고 현재 최신 날짜로 업데이트 되지않는 다는걸 확인 되었다.

 

하지만 [slug].js 와 같이 딱 정해져있지 않고 동적인 라우팅인경우에는 getStaticPaths를 사용하는 것이다. -> 아직 이부분은 확실하게 이해는 가지 않는다.

---

 

ISR: Incremental Static Regeneration

증분 정적 사이트를 재생성한다

재생성한다: (특정 주기로) 데이터를 가져와서 다시 그려준다

증분 정적 사이트를 재생성한다: (특정 주기로) 정적인 사이트를 데이터를 가져와서 다시 그려둔다.

 

ISR 담당 함수

- getStaticProps with revalidate

 

SSG와 똑같이 getStaticProps를 사용하는데 대신 revalidate 를 초단위로 넘겨주면 그 시간 이후에 다시한번 데이터를 가져와서 그려주는 것이다.

이렇게 작성하고 build후에 start를 하고 isr 경로로 가서 새로고침시 SSG와 다르게 1초마다 time 값이 바뀌는걸 확인할 수 있다.

 

정리

따라서 Next.js 를 사용시 적절한 경로마다 필요한 방법으로 SSR/CSR/SSG/ISR 을 골라서 사용하면 될거같다.

내 개인적인 생각으로는 현재 진행하는 서비스 프로젝트는 ISR 방식이 가장 합리적인 선택이 되지 않을까 싶다.