React에서 SSR이 필수일까요?

프론트엔드는 서버 기반의 여러 템플릿 프레임워크 에서, 클라이언트 사이드 렌더링으로 갔다가, 일부는 SSR로 다시 돌아가고 있습니다. 대표적으로 Next.js, Remix가 있고, Fresh, astro, Qwik 같은 친구들도 있습니다. 우리는 무엇을 써야할까요 😞?

 

Islands Architecture

🗣️ 클라이언트의 자바스크립트 최소화하자.

• 서버에서 HTML 페이지를 렌더링하고, 동적으로 상호작용 해야 하는 위젯에 슬롯을 삽입한다.
  위젯의 슬롯에는 서버에서 렌더링된 HTML이 포함되고, 이 HTML을 재사용하여 hydrated할 수 있다.
• 페이지의 부분이 개별적으로 초기화될 수 있다.
• 상호작용이 필요한 컴포넌트의 자바스크립트만 서버에서 클라이언트로 전달된다.
• Fresh, astro, Marko, Qwik 등이 여기에 포함된다.
  Fresh는 빌드 단계(번들링, 트랜스파일링 없음)가 없다. 서버에 요청이 들어오면 Fresh는 각 페이지를 즉석에서 렌더링하고 HTML만 내보낸다.

 

SSR, SSG, ISR

💡 Next.js 13 부터는 확장된 fetch API로 변경되었습니다. 아래는 간략한 변화점들입니다.

// SSG : getStaticProps
// { cache: force-cache }가 디폴트
// 빌드 시점에 fetch하고 생성
fetch(URL);

// SSR : getServerSideProps
// 매 요청마다 refetch해서 페이지를 생성
fetch(URL, { cache: 'no-store' });

// ISG : revalidate옵션이 있는 getStaticProps
// revalidate는 초단위
fetch(URL, { next: { revalidate: 10 } });

• SSG → 빌드 시점에 fetch하고 생성된 페이지
• SSR → 매 요청마다 retch해서 페이지를 생성
• ISG → revalidate 단위마다 무효화해서 페이지를 새로 생성
• 프레임워크들의 지원 범위
  • astro는 기본적을 SSG이지만, SSR을 활성화할 수 있다.
  • fresh는 SSG를 지원하지 않는다. (빌드타임이 없어서..)
  • next.js는 셋 다 지원한다.

 

Server components

💡 이전에는 getStaticProps나 getServerSideProps같은 것들은 page 단위에서만 가능했습니다. 위의 확장된 fetch를 사용해서 컴포넌트 단위에서 비슷한 기능을 사용할 수 있습니다.

 

🗣️ 서버에서, 클라이언트에서 각자 더 잘 할 수 있는 일을 나눠서 처리해서 사용자 경험을 보완하자.

• 서버에 컴포넌트 렌더링을 캐시할 수 있다.
• server component의 자바스크립트는 번들되지 않는다. → 상호작용이 안된다.
• Route가 로드되면 캐싱이 가능하고 크기를 예측할 수 있는 Next.js 및 React 런타임이 로드된다. (이 런타임은 애플리케이션이 커져도 크기가 증가하지 않는다.)
• 서버에서 렌더링해서 생성된 HTML → React가 클라이언트에서 인계받으면 이것을 다시 그리기 위한 hydrate 단계가 일어난다.
  • 추가적인 자바스크립트가 필요
  • 여기서 서버에서 시간이 오래 걸린다면..? 이 지점에서 스트리밍이 등장

 

Next.js의 스트리밍 → 서버에서 다운이 오래 걸린다면..을 개선

• 서버에서 렌더링한 트리를 먼저 가져와서, 클라이언트에서의 시작 시간을 개선하는 동시에 HTML을 일찍 반영하여 데이터와 에셋의 다운로드를 동시에 병렬화한다.
• 최신 브라우저에는 읽기 가능한 스트림으로 페치 응답을 사용할 수 있는 페치 API가 내장되어 있으며, reponse body는 읽기 가능한 스트림으로, 클라이언트가 서버에서 데이터를 사용할 수 있게 될 때 한 청크씩 받을 수 있다.
• 공식 문서에 따르면..
  Next.js의 서버 컴포넌트와 중첩 레이아웃을 사용하면 특별히 데이터가 필요하지 않은 페이지의 일부를 즉시 렌더링하고 데이터를 가져오는 페이지의 일부에 대해 로딩 상태를 표시할 수 있습니다. 이 접근 방식을 사용하면 사용자가 페이지 전체가 로드될 때까지 기다렸다가 페이지와 상호 작용을 시작할 필요가 없습니다.

 

🤔 그럼 React에서 SSR이 필수일까요?

https://react.dev/learn/start-a-new-react-project

React의 새로운 공식문서의 getting start에서 프레임워크 없이 React만으로 시작하는 방법이 나와있지 않아, 여러 의견이 오갔습니다. 

• SEO가 중요하지 않고, 콘텐츠가 중요하지 않다면 (ex 백오피스/대시보드) React를 사용하는 것을 추천합니다. Next.js는 운영 리소스도, 지켜야 하는 규칙도 더 많기 때문입니다.
• 상호작용이 별로 없으며 콘텐츠 중심이라면, astro같은 프레임워크가 더 적합할지도 모릅니다.

 

참고

Islands Architecture - JASON Format

Rethinking React best practices

[Next.js] Next.js 13 - Data Fetching, Server Components

Next.js 13

Next.js의 렌더링 과정(Hydrate) 알아보기