Pre-rendring[SSR vs CSR _2]

기존 SPA의 문제점

 

1. 로딩 속도

CSR에서의 문제점은   html파일과 스타일시트(css), 상대적으로 큰 js파일이 하나 존재하는데,

모든 페이지의 내용을 첫 로딩때 모두 불러오는것이다.내가 볼 필요도 없는 파일까지 모두 불러오기 때문에 로딩 시간이 느려진는 것이다.

 

2.SEO

서버의 렌더링과 다르게 js가 로딩된 이후 js 동작에 따라서 dom이생성된다. 이는 크롤러가 빈껍데기인 템플렛 상태에서 내용들을 파악 하지 못한다는 것이다. 이는 검색엔진에 매우 불리하다.

 

 

 

Pre-rendring는

서버 렌더링 보다 조금 더 복잡한 분리 기술이다.이는 어플리케이션에 첫 진입 시간을 개선하고자 하는 렌더링 방식이다.

build time시간동안 static HTML files 제공한다. 그 이후에 어플리케이션에 필요한  JavaScript bundles를 전달한다.

이를 위한 다양한 프레임 워크들이 존재하고 그중 하나가 Next.js이다.

 

 

 

Two Forms of Pre-rendering

Pre-rendring을 위해서는 두 가지 방법이 있다.

 

1.Static Generation

HTML을 build time에 생성 하고 pre-render된 HTML을 그 다음에 각 요청 들에서 재사용된다.

2.Server-side Rendering

모든 요청 사항에 대해 HTML을 만드는 방식,매 요청 마다 콘텐츠가 달라지는 경우 주로 사용된다.

 

 

But… Server-side Rendering 다른 경로로 이동할 때마다 서버는 모든 작업을 다시 수행해야한다.

서버로 부터  데이터를 가져 와서 컴파일하고 HTML을 전달해야하고 모든 CSS와 JS까지 !!

이는 서버에게 많은 부하를 준다. 따라서 Next.js 공식 홈페이지에서는 Static Generation 방식을 추천한다!

 

 

 

 

www.toptal.com/front-end/client-side-vs-server-side-pre-rendering