[Front-End] CSR vs SSR 🎈

오늘은 CSR (Client Side Rendering)과

SSR (Server Side Rendering)에 대해 정리해보려 한다.

🎈 웹에서 Client와 Server 간 동작

1. Client에서 URL로 Server에게 요청을 보낸다.
2. Server에서는 그 요청을 토대로 정보가 담긴 html 문서를 다시 Client에게 응답해준다.
3. Client에서는 그걸 그린다.
   이런 과정을 반복하며 웹은 동작한다.

🎈 웹의 변화 (진화)

점점 Server에서 처리해야할 정보도 많아지고, 횟수가 늘어나다 보니
과부하가 걸리고 계속해서 응답한 것을 그리다보니 페이지 깜빡임도 늘어난다.
이때 등장하게 된 것이 바로 Ajax이다.
Ajax는 페이지의 일부만 요청하고 응답하며 전체 페이지를 다시 그리는 것이 아닌
응답된 일부만 다시 그릴 수 있었기 때문에 웹의 성능을 한층 업그레이드 시켜주었다.
하지만 더 나아가 SPA를 도입하게 된다.
SPA는 url이 변경되더라도 html을 다시 내려주지 않는다는 것이다.
우리가 잘 알고 있는 React는 CSR 방식으로 동작한다.

🎈 CSR

CSR은 기존 웹의 동작방식과는 다르게
Server에서 html을 내려받지 않고 온전히 Client에서만 코드를 받아 그려주는 동작 방식을 말한다.
어떻게??? (리액트를 예를 들어 설명한다)
Network 탭의 Doc와 | Element 탭을 비교하며 확인해보면
Doc(Server)에서는 root 태그가 비어있지만 Element 탭(Client)는 코드가 들어와있다.
그 말은, bundle.js에 코드가 담겨져 온다는 것이다. 빌드를 할 때 bundle.js에 모든 리액트 코드를 javascript로 변환해서 담아준다.

서버는 비어있는 html을 응답하고 클라이언트에서 bundle.js를 읽으면서 DOM 화면을 그려준다.

CSR의 장점과 단점

• 장점은 URL이 바뀌어도 html을 다시 받지 않고 클라이언트에서 처리한다는 것이다.
• 단점은 내용이 변경되고 추가될 때마다 bundle.js의 크기가 눈덩이처럼 커져 로딩이 점점 느려진다는 것이다. 그래서 첫 화면을 보기까지 시간이 오래걸린다.
  이런 단점을 해결하기 위해 CSR+SSR을 하면 어떨까! -> 이게 바로 Next.js이다.

🎈 해결책

그럼 첫 시작 화면은 서버에서 받아 렌더링하고, 나머지는 CSR 방식으로 동작하게 하면 어떨까?
첫 화면은 Server에서 내용이 채워진 html을 받고 Client에서는 그린다는 말이다.
-> 검색엔진최적화, 첫 화면 로딩 속도가 빨라진다.
-> 이후에는 사용자가 url을 이동해도 깜빡임 없이 이용이 가능하다.

더 쉬운방법은 없을까 ???? 있다! Next.js!

Next.js

Next.js의 가장 큰 특징 중 하나는 page기반으로 빌드를 한다는 것이다.
page는 여러개의 component들로 이루어져있다. pages에 있는 파일 이름에 기반하여 라우팅이 동작한다.

맨 처음은 index.js를 불러온다. 여기서 아까 확인했는 Network탭을 확인해보면, 서버에서 html을 담아서 응답해준다.
그 후 /home url로 이동을 해도 서버에서 html을 응답해준다.

그럼 CSR는 어디서 동작하는거야 ?
Next.js에 기본으로 제공되는 next/link나 next/router를 사용하면 내부적으로 CSR 방식으로 동작된다.

🎈 코드를 보며 이해도를 높여보자
Next.js 공식 문서에서 코드를 참고했다.

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
      <li>
        <Link href="/blog/hello-world">
          <a>Blog Post</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

next/link를 사용하면 CSR 방식으로 렌더링이 동작하게 된다.

<Link href="/about">

이라는 코드를 작성하면 pages 폴더 안의 about.js가 실행되는데
이때 서버에서 html을 응답하지 않고 Client 내부에서 렌더링되는 CSR로 동작한다🎈

첫 화면은 무조건 서버에서 html을 응답한다. 꼭 index.js가 아니라도 /about으로 실행해도 about의 html을 서버에서 받아서 렌더링(SSR)한다. 그럼 첫 화면 로딩이 빨라진다!

한 줄로 정리하면!
첫 화면은 SSR 방식으로 동작하고 그 이후는 모두 CSR 방식으로 동작하게 한다.

참고
유튜브 개발화라리님
Next.js 공식 문서