SSR (server Side Rendering)
SSR은 서버에서 매 요청마다 페이지를 새롭게 생성하여, 항상 최신 데이터를 제공할 수 있다는 장점이 있다. 하지만 서버 상태나 네트워크 환경에 따라 요청마다 새롭게 데이터를 받아오는 과정에서 시간이 오래 걸릴 수 있으며, 데이터가 클 경우 사용자에게 대기 시간을 제공하게 되어 불편을 초래할 수 있다.
1. 요청마다 페이지 생성
사용자가 페이지에 접속할 때마다 서버에서 데이터를 요청하고 페이지를 렌더링하여 사용자에게 전달한다. 페이지의 데이터는 항상 최신 상태를 유지하지만, 데이터의 양이 많거나 서버의 상태가 불안정할 경우 로딩 시간이 길어질 수 있다.
2. 장점
페이지에 포함된 데이터가 항상 최신 상태로 유지된다.
데이터 업데이트가 빈번한 동적 페이지에 적합함.
3. 단점
서버 상태에 따라 페이지 로딩 속도가 느려질 수 있다.
요청할 때마다 새롭게 렌더링 되기 때문에 서버 부하가 증가할 가능성이 있으며, 서버 비용이 상승할 수 있다.
SSG (Static Site Generation)
SSG는 Next앱을 npm run build명령어로 build할 때 즉, build time에 미리 사전 렌더링을 진행을 해서 페이지를 미리 딱 한 번만 생성을 해둔다. 그래서 빌드 타임에 미리 페이지를 생성하여 요청 시 빠르게 응답하는 방식으로, SSR 방식의 단점을 보완한다. 빌드가 완료된 이후에는 더 이상 새롭게 페이지를 생성하지 않고, 요청이 들어오면 미리 생성된 페이지를 응답하는 방식으로 동작한다.
이후 과정은 SSR과 동일하다. SSG 방식에서도 사전 렌더링 과정에서 완성된 HTML 파일만 빌드 타임에 미리 생성되고, 브라우저는 서버로부터 받은 HTML페이지를 화면에 렌더링을 하게 된다.
그리고 브라우저가 서버로부터 HTML과 함께 제공받은 JS 번들을 실행해 Hydration을 완성하면 완성된 상호작용 가능한 페이지로 만들어준다.
1. 빌드 타임에 사전 렌더링
Next.js 애플리케이션을 빌드할 때 필요한 모든 데이터를 가져와 페이지를 생성하고, 이후에는 서버가 페이지를 다시 생성하지 않고 빠르게 응답한. 이렇게 미리 생성된 HTML 페이지는 서버 부하를 줄이고, 빠른 로딩 속도를 제공한다.
2. 장점
사전 렌더링 과정에 굉장히 많은 시간이 소요되는 페이지라도 build time에 미리 다 만들어 두기 때문에 요청 시 빠른 응답을 제공하여 언제나 똑같이 매우 빠른 속도로 응답할 수 있어 사용자 경험이 개선된다는 장점이 있다.
서버 자원을 절약하고, 로딩 속도가 빠르며, 정적 콘텐츠에 적합함.
3. 단점
빌드 이후 데이터가 변경되더라도 페이지에 즉시 반영되지 않는다.
최신 데이터가 필요한 페이지에는 적합하지 않다.
SSG는 주로 블로그 게시물, 공지사항 등 변경이 적은 정적 콘텐츠를 제공하는 페이지에 적합하며, 사용자의 요청에 빠르게 응답할 수 있다는 장점이 있지만, 최신 데이터를 반영하기 어렵다는 한계가 있다.
SSR과 SSG는 Next.js의 사전 렌더링 방식으로, 각각의 장단점이 명확하다. 데이터 업데이트 빈도가 낮고 빠른 응답이 중요한 페이지에는 SSG를, 데이터 갱신이 빈번히 필요하고 실시간 데이터가 중요한 페이지에는 SSR 방식을 선택하는 것이 좋다.
