SSR

서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 보여주는 방식.

모든 데이터가 매핑된 페이지를 브라우저에 바로 보여줄 수 있다.

서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다. SEO (Search engine optimization)를 쉽게 구성할 수도 있다.


유저 요청 -> 서버 html 파일 전송 (view가 유저에게 보임, 인터렉션 불가능) -> 브라우저가 Js를 다운로드 (인터렉션 불가능) -> 브라우저가 프레임워크 실행


ssr


Pre-rendering

next.js는 기본적으로 모든 페이지를 pre-rendering 한다. 미리 각 페이지에 대해서 HTML을 만들어 두는 것.


pre-rendering을 사용하지 않을 때 (React.js만 사용할 때)는 초기 로드 시에 빈 화면이 노출된 후에 js가 로드가 된다.

하지만 사용할 때(Next.js를 사용할 때)는 초기 로드 시에 미리 생성된 HTML를 띄워 준 후에 js가 로드 된다.



  • Pre-rendering의 두 가지 형태

    • Static Generation (SSG) : 빌드할 때 HTML 페이지를 생성. 각 요청마다 재사용 됨. (getStaticProps)

    • Server-side Rendering (SSR) : 각각의 요청마다 HTML를 생성. (getServerSideProps)



Server Side Cycle

  1. next server가 Get 요청을 받는다.
  2. 요청에 맞는 Page를 찾는다.
  3. _app.js (최초로 실행되는 파일)의 getInitialProps가 있다면 실행.
  4. Page Component의 getInitialProps가 있다면 실행. pageProps들을 받아온다.
  5. _document.js의 getInitialProps가 있다면 실행. pageProps들을 받아온다.
  6. 모든 propse들을 구성하고, _app.js > page Component 순서로 렌더링.
  7. 모든 content를 구성하고 _document.js를 실행하여 html 형태로 출력.



Code Splitting

해당 페이지에 필요한 파일만 불러올 수 있도록 하나의 JS 파일이 아닌 여러 파일로 나누는 방법.

필요한 파일만 사용하기 때문에 로딩도 빨라지고 트래픽도 줄어서 사용자 경험이 좋아지는 장점이 있다.

또한 코드 양을 줄이지 않고도 필요하지 않은 코드를 불러오지 않으며 앱의 초기화 로딩에 필요한 비용을 줄여준다.



Dynamic import

런타임 시에 필요한 모듈을 불러오며 처음 불러오는 파일들의 용량을 줄이고 퍼포먼스적 향상을 불러오는 최적화 방법.

일반적인 정적인 module import를 필요한 시점에 로드할 수 있도록 도와준다.


//일반적인 import 

import DynamicComponent from '../components';

const Dynamic = () => {
    return <DynamicComponent />
}


//Dynamic import

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components'))

const Dynamic = () => {
    return <DynamicComponent />
}