react vs next.js vs svelte

프론트엔드 직군에서 가장 많이 사용되고 있는 react, next.js와 제가 눈여겨 보고 있는 svelte에 대해서 알아보려고 합니다.

 

스마트폰이 등장하게 되면서 모바일로 웹페이지를 확인하는 일이 잦아졌는데 당시의 웹페이지들은 모바일에 최적화되지 않아 사용하는데 커다란 불편함이 있었습니다. 이런 불편함을 개선하고자 모바일에서도 사용자 인터페이스를 적용하기 위해 React나 Vue.js 등 여러 라이브러리와 프레임워크가 등장하였고, CSR이 가능한 SPA(Single Page Application)가 등장하게 되었습니다.

 

CSR vs SSR

SSR

SSR은 전통적인 웹 어플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 페이지에 대한 요청을 합니다. 이때 서버에서는 HTML, View와 같은 자원(Resource) 들을 어떻게 보여줄지 해석하고 렌더링 하여 사용자에게 반환합니다.

장점

검색엔진최적화(SEO) 가능

next.js에서는 Pre-rendering 방법(Static Generation , Server Side Rendering)을 사용하여 HTML, CSS, Javascript로 만들어진 HTML을 제공함으로써 SEO 문제를 해결할 수 있다.

• Static Generation은 HTML을 빌드 타임에 생성한다. pre-render된 HTML은 그 다음에 각 리퀘스트에서 재사용된다.

import React from "react";
import { data } from "../data/myInfo";
const Info = ({ jsonData }) => {
  return (
    <div>
      <h1>this is about</h1>
      {jsonData.map((data) => (
        <div key={data.id}>
          <h3>{data.name}</h3>
          <ul>
            <h4>{data.email}</h4>
          </ul>
        </div>
      ))}
    </div>
  );
};

export async function getStaticProps(context) {
  return {
    props: {
      jsonData: data,
    },
  };
}
export default Info;

• Server-side Rendering은 HTML을 각 리퀘스트가 일어날 때 생성하는 방식이다.

단점

트래픽이 증가한다.

서버에 매번 요청을 하기 때문에 서버의 부하가 커진다.

매번 새로고침이 발생한다.

매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 경험이 SPA에 비해 좋지 않다.

CSR

CSR은 클라이언트 측에서 최초에 1번 서버에서 전체 페이지를 로딩하여 보여준다. 그 이후에는 사용자의 요청이 올 때마다, 자원(Resource)을 서버에서 제공한 후, 클라이언트가 해석하고 렌더링 하는 방식이다.

장점

빠른 인터랙션

CSR의 작동 구조를 TTV(Time to View)와 TTI(Time to Interaction) 측면에서 살펴보면 알 수 있습니다.

 

1) 먼저 서버에서 빈 HTML 파일을 받아온 뒤
2) 이 HTML 파일에 링크된 자바스크립트 파일을 요청하게 됩니다.
3) 요청의 결과로, 웹사이트 구동에 필요한 모든 로직이 담겨 있고 동적으로 HTML 파일을 생성할 수 있는 자바스크립트 파일을 받아오게 되면
4) 그때 사용자에게 화면이 보여지면서 클릭이 가능해집니다.

즉, 사용자의 TTV(Time to View) 시점과 TTI(Time to Interaction) 시점이 일치한다는 것을 알 수 있습니다.

트래픽 감소

전체 렌더링이 아닌 부분 렌더링을 하기 때문에 트래픽 감소의 효과와 빠른 렌더링이 가능합니다.

단점

초기 구동 속도가 느리다.

처음부터 모든 리소스들을 가져와야 하기 때문에 사이트의 데이터와 컨텐츠의 용량이 크다면, 사용자가 첫 화면을 보기까지 시간이 길어지게 된다.

검색엔진 최적화(SEO)가 어렵다.

초기에 빈 HTML 파일을 로딩하기 때문에 구글을 제외한 검색 엔진이 웹페이지를 분석하는데 어려움

SPA 방식이 모두 CSR이 아니다. 하지만 최근 현업에서 자주 사용하는 react, angular, vue는 SPA면서 CSR입니다.

svelte

Svelte 특징

Write less code

import React, { useState } from 'react';

export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  function handleChangeA(event) {
    setA(+event.target.value);
  }

  function handleChangeB(event) {
    setB(+event.target.value);
  }

  return (
    <div>
      <input type="number" value={a} onChange={handleChangeA}/>
      <input type="number" value={b} onChange={handleChangeB}/>

      <p>{a} + {b} = {a + b}</p>
    </div>
  );
};

리액트로 작성된 코드를 svelte로 바꾸면 어떻게 될까요?

<script>
  let a = 1;
  let b = 2;
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {a + b}</p>

코드가 절반이 되는 마술을 보실 수 있을 것입니다. 이렇게 코드의 양이 줄어들면 컴파일 되어 생성된 번들 파일의 크기도 줄어듭니다.

SPA의 전형적인 단점은 첫 로딩 시 사용되는 모든 리소스를 다운로드하고, 파싱하고, 실행되기 때문에 첫 로딩에 많은 시간이 걸린다는 것입니다.

코드 양이 줄어들면 유지 보수에 사용되는 비용이 감소합니다.

 코드를 유지 보수하는 입장에서도 코드를 읽고 이해하는데 코드 양이 적으면 좀 더 빠르고 쉽게 이해할 수 있습니다.

No Virtual DOM

가상돔을 사용하는 것이 항상 빠른 것은 아닙니다. 가상돔이 변경되면, 새로운 가상돔과 변경되기 전의 가상돔을 비교하여 변경된 내용을 실제돔에 적용을 하는데, 이때 가상돔을 비교하는 오버헤드가 발생합니다. 오버헤드가 발생하지 않는다면 React에서 shouldComponentUpdate를 사용하여 최적화하는 방법은 필요 없을 것입니다.

Truly reactive

Vue.js와 React는 런타임에 가상돔을 비교하여 변경된 내용을 파악하는 방식을 사용합니다. 반면에 Svelte는 빌드 타임(Build Time)에 어느 부분이 변경될지 파악하는 방식을 사용합니다.