8장 서버사이드 렌더링 그리고 Next.js

서버사이드 렌더링 (server side rendering) 이란 서버에서 리액트 코드를 실행해서 렌더링하는 것을말한다

서버사이드 렌더링이 필요한 이유는 다음 두가지가 대표적임

- 검색 엔진 최적화 (search engine optimization, SEO) 를 해야 한다.

- 빠른 첫 페이지 렌더링이 중요하다

 

많은 수의 사용자를 대상으로 하는 사이트라면 검색 엔진 최적화를 위해서 서버 사이드 렌더링은 필수다.

 

서버사이드 렌더링을 하면 사용자가 요청한 페이지를 바르게 보여줄 수 있다.

클라이언트 렌더링만 한다면 자바 스크립트를 실행해야만 화면이 보이기 때문에 저사양 기기를 사용하는 사용자 일수록

요천한 페이지가 느리게 보인다. 네트워크 인프라가 약한 나라일수록 서비스를 해야한다면 서버사이드 렌더링을 중요하게 생각해야함

 

이번장에서는 먼저 프레임워크 도움 없이 직접 서버 사이트 렌더링 환경을 구축해봄.

so, 서버 사이드 렌더링을 지원하는 대표적인 프레임워크인 넥스트.js  를 알아봄.

 

리액트에서 제공하는 renderToString , hydrate 함수를 사용

서버에서 생성된 데이터를 클라이언트로 전달하는 방법

styled-components 로 작성된 스타일이 서버사이드 렌더링시 어떻게 처리 되는지

서버용 번들파일을 만드는 방법

 

나중에 서버사이드 렌더링을 구현하면 브라우저가 자바스크립트를 실행하지 않아도 화면의 내용한 확인할 수 있게 됨.

서버사이드 렌더링 함수 사용해보기 : renderToString

 

리액트에서는 서버사이드 렌더링을 위해 다음네개의 함수를 제공

 

renderToString

renderToNodeStream

renderToStaticMarkup

renderToStaticNodeStream

 

renderToNodeStream

renderToStaticNodeStream 

이 두개의 함수는 정적 페이지를 렌더링 할때 사용됨.