렌더링 전략?

• 웹 페이지또는 웹 애플리케이션을 웹 브라우저에게 제공하는 방법.
• Gatsby 같은 프레임워크는 정적으로 생성한 페이지를 제공하기에 안성맞춤이다.
• Next.js는 어떤 특정 페이지를 빌드 시점에 정적으로 생성하고, 어떤 페이지를 빌드 시점에 동적으로 제공할 것인지 정할 수 가 있다.
• 추가로 반드시 클라이언트에서 랜더링해야할 컴포넌트도 지정할 수 있어서 개발이 훨씬 쉽다.

알아 볼것

1. 서버 사이드 렌더링을 사용해서 각 요청별로 페이지를 동적으로 렌더링 하는 방법 ⇒SSR
2. 특정 컴포넌트를 클라이언트에서만 렌더링 하는 다양한 방법 ⇒ CSR
3. 빌드 시점에 정적 페이지를 생성하는 방법 ⇒ SSG
4. 증분 정적 재생성으로 정적 페이지를 재 생성하는 방법 ⇒ ISR

서버 사이드 렌더링 (SSR)

• 서버 사이드 렌더링은 웹 페이지를 제공하는 가장 흔한 방법이다.
• PHP, 루비, 파이썬과 같은 언어의 경우 HTML 페이지를 웹 브라우저로 전송하기 전에 전부 서버에서 렌더링한다.
  • 해당 페이지의 모든 자바스크립트 코드가 적재되면 동적으로 페이지 내용을 렌더링한다.

<aside> 🔥 Next.js도 각 요청에 따라 서버에서 HTML 페이지를 동적으로 렌더링하고, 웹 브라우저로 전송 할 수 있다.

</aside>

• 추가로 서버에서 렌더링한 페이지에 스크립트 코드를 집어 넣어서 나중에 웹 페이지를 동적으로 처리할 수 있게 되는데 이를 하이드레이션이라고 한다.

• ex) 블로그 사이트를 만들어서 어떤 사람이 작성한 모든 글을 한 페이지에 렌더링한다고 하면 SSR 적합하다.

  1. 사용자가 페이지에 접근
  2. 서버는 페이지를 렌더링한다.
  3. 결과로 생성한 HTML 페이지를 클라이언트에게 전송한다.
  4. 브라우저는 서버에서 받은 페이지에 있는 <src>태그의 자바스크립트를 다시 다운로드한다.
  5. 다운로드하고 나면 DOM 위에 각 스크립트 코드를 하이드레이션 한다.

  <aside> 🔥

  리액트의 하이드레이션 덕분에 이제 부터 이 웹앱은 SPA처럼 작동할 수 있다.

  </aside>

  • 결론적으로 이 웹앱은 SSR과 CSR의 장점을 가질 수 있다.