[Next.js] MPA 부터 SSR 까지

 

MPA(Multi Page Application)

 

원시적인 서버사이드 렌더링 방식으로, 페이지 이동시나 렌더링시 깜빡 거리는 것으로 유저 사용성을 저하시킨다. 이를 보완하기 위해 CSR 방식의 React 를 사용해서 SPA 를 만들기 시작함.

 

/about → about.html

/profile → profile.html

 

 

SPA (Single Page Application) - CSR (Client Side Rendering)

 

React 의 SPA 를 이용하게 되면서 새로고침이나 깜빡임 없이 유저 사용성이 개선되었으나, 단점이 존재한다. 자바스크립트 번들 사이즈가 커짐에 따라서 초기 로딩 속도가 증가하는 것 (클라이언트 사이드 렌더링의 문제점) 빈 HTML 부터 시작해서 시간이 오래 걸림.

 

// React 이전 DOM 추가하는 방법
const div = document.createElement("div")
div.textContent = "Hello"
body.append(div)

// JSX
return <div> Hello </div>

 

Code Splitting (Lazy-Loading) 

 

위의 초기로딩속도 개선을 위해 나온 방식으로, 현재 꼭 필요한 곳에서만 자바스크립트 파일을 로딩하는 방식으로, 하나로 번들 된 코드를 여러 코드나 컴포넌트로 분리해서, 지금 당장 필요한 코드가 아니라면 나중에 필요할 때 불러와서 사용하는 것

 

---

검색 엔진에서 웹사이트의 정보를 가져오기 위해서 사용하는 크롤링봇은, 방문하는 웹사이트의 HTML 정보를 읽고 데이터를 축적한다. CSR 방식의 웹 사이트의 경우 방문한 시점에는 웹 사이트의 정보가 없다. 방문 이후 JavaScript 를 통해서 현재 페이지에 내용이 나타나는 CSR 형식이기 때문임. 이로 인해 서버에서 렌더링해서 클라이언트에 곧바로 내용을 보여주는 SSR 이 대두되었다.

 

SSR(Server Side Rendering) or SSG (Static Site Generation)

Next.js (react), Nuxt.js (vue) 로 대표되는 렌더링 프레임워크가 등장하고, 개발자들이 SEO 를 쉽게 할 수 있게 됨.