No SSR

No SSR (서버 렌더링 생략)

No-SSR 컴포넌트는 자식 컴포넌트의 렌더링을 서버에서 클라이언트로 미루는 컴포넌트예요.

출처: 문서

본문

소개 (Introduction)

No-SSR은 자식 컴포넌트가 서버에서 렌더링되지 않도록 막고, 대신 렌더링을 클라이언트로 미루는 유틸리티 컴포넌트예요. 이는 다음과 같은 다양한 상황에서 유용할 수 있어요:

  • 서버 사이드 렌더링(SSR)을 지원하지 않는 깨진 의존성에 대한 탈출구(escape hatch)를 만들려고 할 때
  • 접힌 부분(above the fold)만 렌더링해 첫 페인트(first paint) 시간을 개선하려고 할 때
  • 서버에서의 렌더링 시간을 줄이려고 할 때
  • 서버 부하가 너무 심할 때 서비스 저하(service degradation)를 켜려고 할 때
  • (defer prop을 사용해) 중요한 것만 렌더링해 Time to Interactive(TTI)를 개선하려고 할 때

아래 데모는 이 컴포넌트가 어떻게 동작하는지 보여줘요:

import NoSsr from '@mui/material/NoSsr';
import Box from '@mui/material/Box';

export default function SimpleNoSsr() {
  return (
    <div>
      <Box sx={{ p: 2, bgcolor: 'primary.main', color: 'primary.contrastText' }}>
        Server and Client
      </Box>
      <NoSsr>
        <Box
          sx={{ p: 2, bgcolor: 'secondary.main', color: 'secondary.contrastText' }}
        >
          Client only
        </Box>
      </NoSsr>
    </div>
  );
}

기초 (Basics)

Import

import NoSsr from '@mui/material/NoSsr';

커스터마이즈 (Customization)

클라이언트 측 렌더링 지연시키기 (Delay client-side rendering)

No-SSR을 사용해 클라이언트 측에서 특정 컴포넌트의 렌더링을 지연시킬 수도 있어요 — 예를 들어 특히 복잡하거나 데이터가 많은 컴포넌트가 로드되기 전에 나머지 애플리케이션이 로드되도록 하려는 경우가 있죠.

아래 데모는 defer prop을 사용해 No-SSR 내부에 중첩된 것 외부의 앱 나머지 부분을 우선 렌더링하는 방법을 보여줘요:

import * as React from 'react';
import Box from '@mui/material/Box';
import NoSsr from '@mui/material/NoSsr';

function LargeTree(): any {
  return Array.from(new Array(5000)).map((_, index) => <span key={index}>.</span>);
}

export default function FrameDeferring() {
  const [state, setState] = React.useState({
    open: false,
    defer: false,
  });

  return (
    <div>
      <button
        type="button"
        onClick={() =>
          setState({
            open: !state.open,
            defer: false,
          })
        }
      >
        {'Render NoSsr defer="false"'}
      </button>
      <br />
      <button
        type="button"
        onClick={() =>
          setState({
            open: !state.open,
            defer: true,
          })
        }
      >
        {'Render NoSsr defer="true"'}
      </button>
      <br />
      <br />
      <Box sx={{ width: 300, display: 'flex', flexWrap: 'wrap' }}>
        {state.open ? (
          <React.Fragment>
            <div>Outside NoSsr</div>
            <NoSsr defer={state.defer}>
              .....Inside NoSsr
              <LargeTree />
            </NoSsr>
          </React.Fragment>
        ) : null}
      </Box>
    </div>
  );
}

:::warning 이런 방식으로 No-SSR을 사용하면 React는 하나가 아닌 두 개의 커밋(commit)을 적용해요. :::

NoSsr API

Demos

이 React 컴포넌트 사용법에 대한 예시와 자세한 내용은 컴포넌트 데모 페이지를 방문해 주세요:

Import

import NoSsr from '@mui/material/NoSsr';
// or
import { NoSsr } from '@mui/material';

Props

Name Type Default Required Description
children node - No 컴포넌트 콘텐츠입니다.
defer bool false No 렌더링을 클라이언트로 미룰지 여부입니다.
fallback node null No 클라이언트에서 렌더링되기 전에 대신 표시할 요소입니다.

Note: ref는 루트 요소로 전달됩니다.

소스 코드 (Source code)

이 페이지에서 정보를 찾지 못했다면 컴포넌트 구현을 살펴보는 것도 방법이에요.

더 알아보기 (Learn more)