🐇 CSR vs SSR

CSR과 SSR의 차이를 알아보기 전에 MPA와 SPA에 대해 알아보자.

SPA(Single Page Application)

• 한 개의 페이지로 구성된 어플리케이션이다.
• 최초 한 번 페이지를 전체 로드하고, 특정 부분만 데이터를 바인딩해서 렌더링한다.

MPA(Multi Page Application)

• 여러 개의 페이지로 구성된 어플리케이션이다.
• 인터렉션이 발생했을 때 서버로부터 정적 리소스가 다운로드 된다.
• 페이지를 이동하거나 새로고침하면 페이지 전체를 새로 렌더링한다.

일반적으로 MPA를 SSR로, SPA를 CSR로 렌더링한다고 말한다. 그렇다면 CSR과 SSR은 무엇일까?

CSR(Client-Side Rendering)

• 클라이언트에서 초기화면을 요청하면 서버에서 완전한 리소스를 응답한다.
• 장점
  • 페이지에서 이벤트가 발생했을 때 수정된 데이터가 있다면 바로 표시된다.
  • 데이터가 수정될 때 깜빡임이 없기 때문에 사용자 친화적이다.
• 단점
  • 모든 Javascript 파일을 다운 받아야 해서 초기 로딩이 오래 걸린다.

SSR(Server-Side Rendering)

• 서버로부터 완전하게 만들어진 HTML을 받아와 전체 렌더링한다.
• 장점
  • 필수 요소를 먼저 가져오기 때문에 초기 로딩이 빠르다.
  • 화면을 구성하는 각가의 페이지가 있고, 모든 데이터가 HTML에 담겨져 브라우저에 전달되기 때문에 SEO(Search Engine Optimization)에 유리하다.
• 단점
  • 페이지를 요청할 때마다 새로고침되기 때문에 사용자 경험이 나빠진다.
  • 페이지를 매번 서버에 요청하기 때문에 서버 부하가 발생할 수 있다.

🐇 Next.js는 무엇인가?

Next.js는 리액트 프레임워크이며 다음과 같은 기능들을 지원한다. 공식문서를 참고하여 Next.js의 기능들을 정리해보았다.

Pre-rendering

• Next.js는 모든 페이지를 pre-renders한다. 클라이언트 측의 Javascript로 모든 작업을 수행하는 대신 HTML을 미리 생성한다.
• SSG, SSR을 가능케 하며 SSR과 CSR을 혼합하여 사용할 수 있다.

Code splitting

• 자동으로 어플리케이션 번들을 작은 청크로 나눈다.
• 요청된 페이지만 로딩하게 함으로써 초기 로딩 시간을 줄일 수 있다.
• Dynamic import를 사용해서 모듈이 호출될 때만(사용될 때만) 모듈을 import 한다.

Client-side routing

• Link 태그를 통해 client-side route transition이 가능하다.
• Client 내부에서 Routing 하므로 root부터 해당 페이지까지 차례로 로딩한다.
• Link 컴포넌트가 뷰포트에 보였을 때 관련한 페이지를 백그라운드에서 미리 가져다 놓는다.
• 따라서 사용자가 빠르게 해당 페이지로 이동할 수 있고, 화면 전환 시 깜빡임이 없다.

CSS-in-JS 라이브러리

• Javascript 코드 안에서 CSS를 사용할 수 있다.
• 다만 성능에 영향을 줄 수 있다.

<style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
 `}</style>

🐇 빠르게 시작하기

프로젝트 초기화

npx create-next-app@latest --typescript

타입스크립트를 사용하지 않을 땐 뒤의 --typescript 부분을 제외하면 된다.

프로젝트 실행

npm run dev

페이지 생성

자동 생성된 pages 디렉터리에 파일과 폴더를 생성하면 자동으로 Routing 된다. init 폴더 안에 first-page를 생성하고 다음과 같이 작성해주었다.

const firstPage = () => {
  return <div>Let's start!</div>;
};
export default firstPage;

http://localhost:3000/init/first-page 에 접속하니 first-page가 화면에 뜬다.

Reference
Next.js 공식문서