[NEXT.JS] 서버사이드 렌더링(SSR)

소개

서버사이드 렌더링(Server-Side Rendering, SSR)은 서버에서 HTML을 생성하여 클라이언트에 전달하는 방식입니다. Next.js는 이 기능을 통해 초기 로딩 속도와 SEO를 향상시킬 수 있습니다.

 

 

SSR의 장점

 

초기 로딩 속도 향상: 서버에서 미리 렌더링된 HTML을 제공하여 초기 로딩 시간을 단축합니다.

SEO 최적화: 검색 엔진이 미리 렌더링된 HTML을 인덱싱할 수 있어 SEO 성능이 개선됩니다.

유저 경험 개선: 초기 콘텐츠가 빠르게 표시되어 사용자 경험이 향상됩니다.

 

 

 

getServerSideProps 사용법

Next.js에서 SSR을 구현하기 위해 getServerSideProps 함수를 사용합니다. 이 함수는 각 요청 시 서버에서 실행되며, 페이지 컴포넌트에 데이터를 전달합니다.

pages/index.js

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

const HomePage = ({ data }) => {
  return (
    <div>
      <h1>Data from Server</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default HomePage;

 

 

컨텍스트 활용

getServerSideProps 함수의 인자로 들어오는 context 객체를 사용하여 다양한 정보를 활용할 수 있습니다.

params: 동적 라우팅에서 URL 파라미터에 접근합니다.

req, res: 요청 및 응답 객체에 접근하여 커스텀 헤더 설정이나 쿠키 읽기가 가능합니다.

query: 쿼리 스트링 파라미터에 접근합니다.

 

 

예외 처리

서버에서 데이터 패칭 중 에러가 발생할 경우, 사용자에게 에러 메시지를 표시하거나 별도의 에러 페이지로 리디렉션할 수 있습니다.

export async function getServerSideProps() {
  try {
    const res = await fetch('https://api.example.com/data');
    if (!res.ok) {
      throw new Error('Failed to fetch data');
    }
    const data = await res.json();

    return {
      props: {
        data,
      },
    };
  } catch (error) {
    return {
      props: {
        error: error.message,
      },
    };
  }
}

const HomePage = ({ data, error }) => {
  if (error) {
    return <div>Error: {error}</div>;
  }
  return (
    <div>
      <h1>Data from Server</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default HomePage;

 

 

문의사항이나 피드백은 댓글로 남겨주세요.