Client-Side-Rendering 과 Server-Side-Rendering은 다른 velog나 블로그에 너무나 많이 정리 되어있어서 그거를 참고하면 좋을 것 같다. 나도 그런 것을 보고 공부를 더 확실하게 해야겠다.
Next.js에서는 next의 SSR을 이렇게 소개한다.
Exceptional Performance - 뛰어난 성능
SEO Ready - 검색엔진최적화 준비
Deploy Anywhere - 어디에서나 배포 가능
Zero Configuration - 환경설정 할 필요 없다.
그리고 상세한 설명으로 이렇게 적혀져있다.
뛰어난 성능
성능이 낮은 장치에서는 초기 페이지를 렌더링하는 데 시간이 오래 걸리고 성능이 저하될 수 있다. 컴퓨팅을 보다 강력한 서버로 오프로드함으로써 사용자가 대기하는 시간을 최소화하고 변환 속도가 저하되지 않도록 보장할 수 있다.
검색에 최적화됨
SSR는 당신의 페이지를 검색 엔진에 의해 쉽게 크롤링 되게 하고 소셜 미디어 플랫폼에서 미리 볼 수 있도록 보장한다. 클라이언트측 라우팅 솔루션은 웹 크롤링을 지연시킬 수 있으며, 결과적으로 검색 가능성이 낮아진다. Next.js로 SEO를 한 단계 업그레이드하고 문제를 해결할 수 있다.
번개처럼 빠른 렌더링 및 요청 응답
서버의 초기 데이터와 빌드 페이지를 미리 가져오면 사이트를 보는 데 필요한 요청, 응답 횟수가 크게 줄어든다. 이는 지연 시간을 줄이고 대역폭 사용을 줄인다는 것을 의미한다. 둘 다 강력한 모바일 경험을 위해 필수적이다.
점진적인 적용
현재 애플리케이션에 점진적으로 적용하길 원한다면, Next.js는 프로그래밍 방식으로 사용할 수 있으므로 기존 애플리케이션에 통합하는 것이 간단하다. next.js는 단일 도메인에서 여러 배포를 노출하기 위한 완전한 다중 영역 지원 기능도 제공한다.
어떤 것과도 통합 가능
170개 이상의 예제를 따라 Next.js를 사용한 서버측 렌더링을 Express, Koa 또는 Electron과 같은 현재 Node.js 백엔드와 쉽게 통합할 수 있다.
올바른 추상화
next.js는 리액션을 확장하여 어디서 왔든 페이지의 초기 데이터를 로드할 수 있는 강력한 방법을 제공한다. 페이지 컨텍스트를 미리 채울 수 있는 단일 플레이스로 Next.js를 사용한 서버측 렌더링은 기존의 모든 데이터 수집 전략과 원활하게 통합된다.
무한 확장 가능
동적 애플리케이션에 대해서는 확장성이 우려되는 경우가 많다. 다행히 next.js는 박스 밖으로 서버리스 빌드를 지원한다. 목표를 설정하기만 하면 Next.js는 ZEIT Now와 같은 플랫폼에 즉시 배포할 수 있는 각 페이지에 대해 SSR 장착 람다를 출력한다.
파파고 번역과 조금씩 이상한 부분을 고친 것인데 대충 이렇다. 그러니깐 SSR을 하여 성능, SEO 및 여러가지들을 도움을 준다는 것이다!!
vue의 Nuxt.js 설명을 보니 SSR + Client Side Navigation을 쓴다고 한다. Next.js도 비슷하지 않나 싶다.
라우팅은 CSR로 하되 페이지를 그릴 때에는 SSR로하여 둘의 장점들의 합쳐 놓은 것이라고 보면 될 것 같다.
사용자경험 향상 + 검색엔진 최적화 + 초기구동속도 빠름??
그러면 뒤에 이제 SSR 설정을 하는 방법을 알아볼 것이다!
