[Next.js] 공식문서 살펴보기(1) (하이브리드 앱, SSR, SSG, CSR)

SSG(Static Site Generators) 와 SSR(Server Side Rendering)

사용자가 처음에 페이지에 접속을 요청했을 경우 사용자에게 렌더링될 빈페이지가 아닌 완성된 html파일을 응답값으로 전달해 준다. 그 후 요청이 들어올때마다 만들어진 html파일을 응답해준다.

웹사이트에 접속하면(요청이 들어오게 되면) 서버측에서 html파일을 렌더링하여 완성된 html파일을 클라이언트로 전달을하고 클라이언트에서는 이 html파일을 DOM트리로 전환하여 보여주게 되고 js파일을 해석한다.

SSG 는 모든 요청에 대해 일일이 페이지를 렌더링 하는 것이 아니기 때문에 SSR 에 비해 훨씬 빠른 응답속도를 보인다.
그렇기 때문에 Next.js에서는 가능하면 정적생성을 사용하는 것을 추천한다.

그러나 Next.js에서도 각각의 상황에 맞게 SSG, SSR, CSR을 사용해야한다고 말한다.

SSG 는 사용자의 요청이 발생하기전에 미리 페이지를 렌더링하여 완벽한 모습을 보여줄 수 있는가? 를 가장 중요시하게 보고있다. 만일 그럴수 없다면 SSG 는 좋은선택이 아니라고 말한다.

해당 페이지에 자주 업데이트되는 데이터가 표시되는 경우 모든 요청에 따라 페이지콘텐츠가 변경될 수 있기 때문이다.

Next.js는 이 경우에 SSR 을 추천한다. 응답속도는 다소 느려질 수 있지만 SSR 의해 미리 렌더링된 페이지가 항상

최신의 상태를 유지할 수 있기 때문이다. 또한 클라이언트쪽에서 렌더링을 담당하는 CSR 도 사용될 수 있다.

즉 모든 요청에대해서 데이터를 항상 최신상태로 유지하고 싶다면 SSR, CSR 을 그렇지 않고 데이터의 변화가 많지 않고사용자의 요청이 있기전에도 미리 렌더링을 할 수 있다면 SSG 사용을 지향하도록 한다.

각각의 페이지에 적합한 방식을 채택해 사용 할 수 있다.

이러한 것들을 통틀어 하이브리드 앱 이라고 Next.js에서는 지칭한다.