Next.js Edge Rendering 및 전 세계적으로 분산된 데이터베이스로 웹 개발의 미래 구축

Next.js를 사용하면 React 애플리케이션을 빌드할 수 있습니다. 최근에는 뛰어난 개발자 경험과 즐겁게 사용할 수 있는 기타 여러 기능으로 인해 많은 인기를 얻었습니다.

이 기사에서는 Next.js Edge 및 Upstash Redis을 사용하여 최첨단 웹 애플리케이션을 구축합니다. Edge 컴퓨팅의 최근 개발과 함께 우리는 Next.js(Edge SSR 및 Edge API 경로)의 최신 기능을 사용하여 매우 빠르고 완전히 분산되고 확장 가능한 애플리케이션을 구축할 것입니다. 그리고 좋은 소식은 서버 관리가 없는 100% 서버리스라는 것입니다.

에지 컴퓨팅의 힘을 설명하기 위해 간단한 URL 단축 응용 프로그램을 만들 것입니다. URL 단축기는 URL을 가져와 더 짧은 URL로 변환하는 서비스입니다. 이는 Twitter 또는 기타 소셜 미디어 플랫폼에서 URL을 공유하려는 경우에 유용합니다. 사용자에게 실제 URL을 숨기려는 경우에도 유용합니다.

에지 컴퓨팅

과거에는 Next.js의 정적 사이트 생성(SSG)이 CDN의 도움으로 에지에서 제공되었습니다. 정적 HTML 콘텐츠는 전 세계에 배포되며 사용자는 가장 가까운 엣지 위치에서 콘텐츠를 가져옵니다. 대기 시간을 줄이고 응용 프로그램의 성능을 향상시키는 좋은 방법입니다.



동적 콘텐츠의 경우 Next.js는 SSR(Server Side Rendering)을 제공합니다. 콘텐츠는 서버에서 생성되어 클라이언트로 전송됩니다. 과거에는 SSG에 비해 SSR은 쉬운 설정을 위해 단일 위치에만 배포되었습니다.

최신 버전의 Next.js(Next.js 12.2)를 사용하면 Edge Rendering에 액세스할 수 있습니다. 이 기능은 아직 실험 모드에 있지만 이미 사용해 볼 수 있습니다. 이를 통해 에지에 SSR 및 API 경로를 배포할 수 있습니다. 따라서 이제 하나의 구성으로 여러 위치에서 동적 콘텐츠를 제공할 수 있습니다.

Edge로 이동한 후 데이터베이스에 병목 현상이 발생합니다. 복잡성과 운영 비용으로 인해 데이터베이스를 여러 위치에 배포하기가 어려웠습니다. 그러나 Upstash와 같은 최신 및 최신 데이터베이스 공급자를 통해 이제 한 번의 클릭으로 글로벌 Redis 데이터베이스를 배포할 수 있습니다. Edge Rendering/Computing과 완벽하게 일치합니다. 게다가 Upstash는 서버리스 데이터베이스이므로 인프라에 대해 걱정할 필요가 없습니다.

에지 서버 렌더링

Next.js 상용구를 시작점으로 사용하겠습니다. TypeScript 및 Tailwind CSS를 사용하여 Next.js를 시작하는 좋은 방법입니다. 또한 ESLint, Prettier, Husky, Jest 및 Cypress로 구성됩니다. GitHubNext.js Boilerplate에서 소스 코드를 찾을 수 있습니다.

먼저 admin라는 새 페이지가 있는 새 src/pages/admin/index.tsx 폴더를 생성해 보겠습니다.

import type { InferGetServerSidePropsType } from 'next';

const Index = (
  props: InferGetServerSidePropsType<typeof getServerSideProps>
) => <div>{props.runtime}</div>;

export const getServerSideProps = async () => {
  const runtime = process.env.NEXT_RUNTIME || '';

  return {
    props: { runtime },
  };
};

export const config = {
  runtime: 'experimental-edge',
};

export default Index;

Edge에 배포하려는 경우 모든 페이지에서 runtime 구성을 설정할 수 있습니다. 기본적으로 runtime는 nodejs로 설정됩니다. 그러나 Edge Rendering의 경우 experimental-edge 로 설정해야 합니다.

애플리케이션을 배포한 후 페이지가 가장자리에서 렌더링되는 것을 볼 수 있습니다. 브라우저에서 페이지를 열어서 확인할 수 있으며 서버는 edge를 반환해야 합니다.

Read the rest on Medium