Next.js에서 SSR 마스터하기: SEO 및 사용자 경험을 향상하는 방법

SSR(Server-Side Rendering)은 Next.js에서 페이지를 생성하는 또 다른 방법입니다. 이 기사에서는 SSR이 무엇인지, 어떻게 작동하는지, Next.js 프로젝트의 페이지 라우터와 앱 라우터 모두에서 구현하는 방법을 설명하고 싶습니다.

SSR이란 무엇입니까?

SSR은 사용자가 요청한 후 정적 페이지(또는 사전 렌더링된 페이지)를 생성하는 방법입니다. 이는 모든 요청에 ​​대해 정적 페이지가 생성됨을 의미합니다. 이 방법은 데이터를 항상 최신 상태로 유지하므로 자주 업데이트해야 하는 페이지에 유용합니다

SSR은 어떻게 작동하나요?

Next.js에서 SSR을 사용하면 사용자가 SSR이 구현된 페이지를 요청할 때마다 해당 요청이 이루어진 후 페이지가 생성됩니다. 이는 사용자가 Next.js가 각 요청에 대해 정적 콘텐츠를 다시 생성하고 번들링하는 동안 기다려야 함을 의미합니다. 정적 페이지가 준비되면 사용자는 요청한 페이지를 볼 수 있습니다.

SSR은 서버에서만 실행되며 각 요청에 대해 정적 페이지를 생성하므로 프로젝트 빌드 프로세스 중에는 실행되지 않는다는 점에 유의하는 것이 중요합니다.

앱 라우터에서 SSR을 구현하는 방법

앱 라우터에서 SSR을 구현하려면 서버 구성 요소에서 기본적으로 활성화되어 있으므로 특별한 기능을 작성하거나 특정 구성을 설정할 필요가 없습니다.

예를 들어 정적 페이지가 있고 API에서 데이터를 가져오는 경우 이 페이지는 기본적으로 SSR을 사용합니다. SSR을 사용할 때 페이지는 빌드 시 번들로 제공되거나 사전 렌더링되지 않는다는 점에 유의하는 것이 중요합니다. 프로젝트에서 동적 페이지를 사용하는 경우 데이터를 가져오지 않으면 기본적으로 SSG가 사용됩니다. 그러나 API에서 가져오면 SSR로 전환되고 다시 빌드 시간 동안 정적 페이지가 번들로 묶이지 않습니다.

정적 경로에서 SSR을 구현하는 예입니다.

import React from 'react';

const AboutPage = async () => {
  // Fetch data from an API or any server-side source
  const data = getDataFromApi();

  return (
    <div>
      <h1>About Us</h1>
      <p>{data}</p>
    </div>
  );
};

export default AboutPage;

페이지 라우터에서 SSR을 구현하는 방법

페이지 라우터에서 SSR을 구현하려면 파일에 getServerSideProps 함수를 생성해야 합니다. 이 함수는 각 사용자 요청 후에 호출됩니다. [id] 파일과 같은 동적 경로를 사용하는 경우 파일에서 getServerSideProps도 사용해야 합니다. 이 함수는 동적 페이지의 값인 ID를 검색할 수 있는 context라는 인수를 사용합니다. 이 함수는 사용자 요청이 있을 때마다 서버에서 호출됩니다.

tsx 파일로 구현한 예입니다.

import { GetServerSideProps } from 'next';

interface AboutProps {
  data: string;
}

const AboutPage: React.FC<AboutProps> = ({ data }) => {
  return (
    <div>
      <h1>About Us</h1>
      <p>{data}</p>
    </div>
  );
};

// This function runs on the server on every request
export const getServerSideProps: GetServerSideProps = async () => {
  const data = getDataFromApi();
  return {
    props: {
      data,
    },
  };
};

export default AboutPage;

jsx 파일로 구현한 예입니다.

const AboutPage = ({ data }) => {
  return (
    <div>
      <h1>About Us</h1>
      <p>{data}</p>
    </div>
  );
};

// This function runs on the server on every request
export async function getServerSideProps() {
  const data = getDataFromApi();

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

export default AboutPage;

결론

SSR은 정적 페이지를 묶거나 생성하는 데 유용한 방법이지만 빌드 중에는 발생하지 않습니다. 사용자가 최신 데이터를 볼 수 있도록 각 사용자 요청에 대해 페이지를 업데이트해야 하는 경우 SSR을 사용할 수 있습니다. 그러나 각 사용자 요청에 대해 정적 페이지를 생성하기 때문에 SSG(정적 사이트 생성) 또는 ISR(증분적 정적 재생성)과 같은 다른 방법보다 시간이 더 오래 걸릴 수 있고 속도도 빠르지 않다는 점에 유의하는 것이 중요합니다.

이 기사가 즐거웠기를 바랍니다! 질문이 있으시면 언제든지 저에게 문의해 주세요. ISR 및 SSG에 대해 읽고 싶다면 ISR에 대한 기사와 SSG에 대한 기사를 확인하세요. 모든 것에 대해 더 자세히 알고 싶으시면 제 웹사이트를 팔로우하세요.

읽어주셔서 감사합니다! 이제 안녕!

위 내용은 Next.js에서 SSR 마스터하기: SEO 및 사용자 경험을 향상하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!