[실전에서 바로쓰는 Next.js] 렌더링 전략

Next.js에서는 페이지를 빌드시점에 정적으로 생성하고 페이지 실행시점에 동적으로 제공할 것인지 쉽게 정할 수 있다. 어플리케이션의 특정 페이지에 대한 요청이 있을 때마다 페이지를 다시 생성할 수 있다.

서버 사이드 렌더링(SSR)

서버에서 HTML페이지를 동적으로 렌더링하고 웹 브라우저로 전송한다. HTML페이지를 웹브라우저로 전송하기 전에 서버에서 전부 렌더링한다. 해당 페이지의 모든 자바스크립트 코드가 적재되면 동적으로 페이지 내용을 렌더링한다.

사용자가 페이지에 접근하면 서버는 페이지를 렌더링해서 결과로 생성한 HTML페이지를 클라이언트로 전송한다. 그리고 브라우저는 페이지에서 요청한 모든 스크립트를 다운로드 한 다음 DOM위에 각 스크립트 코드를 하이드레이션한다. 그래서 페이지를 새로 고치치않고 아무문제없이 사용자와 웹 페이지가 상호작용 할 수 있음. “리앤트 하이드레이션” 때문에 SPA처럼 작동할 수 있음. CSR+SSR이 되는 것!

SSR 장점

• 더 안전함
• 쿠키관리, 주요API, 데이터 검증과 같은 작업을 서버에서 처리한다.
• 더 뛰어난 웹 사이트 호환성
• 오래된 브라우저 사용하더라도 웹페이지를 제공 가능하다.
• 뛰어난 SEO
• 클라이언트에서 서버가 렌더링한 HTML콘텐츠를 받기때문에 봇이나 웹 크롤러같은 검색엔진 웹 문서 수집기가 페이지를 렌더링할 필요는 없다.

그러나! 단점

• SSR을 사용하려면 클라이언트가 요청할 때마다 페이지를 다시 렌더링 할 수 있는 서버가 필요하다.
  • 반면에 CSR이나 정적사이트는 그 파일을 vercel이나 netlify와 같은 클라우드 서비스에 배포하고 클라이언트에 제공할 수 있다.
• 페이지 요청을 처리하는 시간이 길어진다.

클라이언트 사이드 렌더링 (CSR)

서버가 웹 애플리케이션이 필요로 하는 스크립트와 스타일만 포함된 기본 HTML마크업만 전송하기 때문이다. 실제 렌더링은 클라이언트로 전송한 웹 애플리케이션에서 이루어진다. CRA는 컴파일한 자바스크립트와 CSS파일을 HTML페이지에서 불러오도록 만들고 root div요소에 전체 애플리케이션을 렌더링한다. 이 페이지를 호스팅 서비스 제공자에게 배포한 다음 해당 URL로 접근하면 브라우저는 HTML마크업을 받아서 화면에 렌더링한다. CRA가 빌드 과정 동안 주입한 script link태그의 자바스크립트 번들과 CSS파일을 다운로드하여 브라우저가 이를 통해 전체 애플리케이션을 렌더링한다.

CSR 장점

• 다른 페이지로 이동할때 서버에서 그 페이지에 해당하는 새로운 콘텐츠를 다운 안하고 바로 새로운것으로 바꿀수 있음(새로고침 필요 없음) 페이지 전환이 쉽다.
• 서버 부하 감소 : 렌더링이 브라우저에서 일어나기 때문에 AWS Lamda , Firebase같은 서버리스 환경에서도 웹앱 제공 가능하다.

그러나 단점!

• 네트워크가 느린환경에서는 자바스크립트나 css받는것이 오래걸릴 수있음
• SEO영향을 준다. 검색엔진 봇들이 웹앱 수집해도 빈 페이지처럼 보임

Next.js는 기본적으로 서버에서 렌더링 하기 때문에 window, document와 같은 객체나 API(브라우저 전용)를 제공하지 않는다. 이때 CSR이 필요하다.

해결 >>>

1. React.useEffect훅 사용!
2. process.browser 변수
   1. 해당 값에 따라서 스크립트와 컴포넌트를 조건별로 실행 (boolean : 클라이언트에서 실행(true) / 서버에서 실행(false) 값을 가진다) but 지원 중단 된다해서 >> typeof window 로 바꿔서 사용

동적 컴포넌트 로딩

dynamic 을 사용하면 컴포넌트를 동적 임포트로 불러온다. ssr:false 옵션으로 클라이언트에서만 코드를 실행한다 명시하면 해당 컴포넌트는 서버에서 렌더링 하지 않는다. 보통 검색 엔진에 노출될 필요가 없는 페이지를 만드는 경우에 사용한다.

비공개 프로필 페이지같은 검색엔진 신경슬 필요없는 동적 페이지를 만들고 싶다면?

정적 사이트 생성(SSG)

일부or 전체 페이지를 빌드 시점에 미리 렌더링 한다. 내용이 거의 변하지 않는 페이지 case. 마크업 형태로 제공

SSG 장점

• 캐시에 저장하기 쉬워서 서버에 부하를 주지 않는다.
• 요청별로 발생할 수 있는 지연시간 최소화
• 중요한 데이터를 클라이언트롤 보낼 필요가 없어서 안전하다. (빌드시점에 페이지로 다 렌더링 되기 때문)

그러나 단점!

오타 같있다면? 수정하기위해 필요한 데이터를 다 가져오고 다시 다 생성해야함.. (빌드시점에 렌더링 되기 때문)

Next.js에서 “증분 정적 재생성(ISR)”을 사용해서 해결 할 수 있다. 어느 주기로 정적페이지를 다시 렌더링하고 업데이트 하는지 결정할 수 있음 getStaticProps 함수 사용