Next.js 및 SSR: 고성능 서버 렌더링 애플리케이션 구축

1. 프로젝트 생성

create-next-app 스캐폴드를 사용하여 새 Next.js 프로젝트를 만듭니다.

npx create-next-app my-app
cd my-app

2. 자동 SSR

Next.js에서는 .js 또는 .jsx 파일의 각 구성 요소가 자동으로 SSR 페이지로 처리됩니다. 예를 들어 페이지/index.js 파일을 만듭니다.

// pages/index.js
import React from 'react';

function Home() {
  return (
    <div>
      <h1 id="Welcome-to-Next-js-with-SSR">Welcome to Next.js with SSR!</h1>
      <p>This is rendered on the server.</p>
    </div>
  );
}

export default Home;

npm run dev를 실행하여 개발 서버를 시작하고 http://localhost:3000을 방문하면 HTML에 이미 서버 렌더링 콘텐츠가 포함되어 있음을 알 수 있습니다.

3. 동적 라우팅 및 데이터 수집

Next.js는 페이지/게시물/[id].js와 같은 동적 라우팅을 지원합니다. getStaticPaths 및 getStaticProps 또는 getServerSideProps에서 데이터 가져오기:

// pages/posts/[id].js
import { useRouter } from 'next/router';
import { getPostById } from '../lib/api'; // Custom API to obtain data

export async function getServerSideProps(context) {
  const id = context.params.id;
  const post = await getPostById(id);

  return {
    props: {
      post,
    },
  };
}

function Post({ post }) {
  const router = useRouter();
  if (!router.isFallback && !post) {
    router.push('/404');
    return null;
  }

  return (
    <div>
      <h1 id="post-title">{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export default Post;

4. 정적 최적화 및 사전 렌더링

Next.js는 정적 최적화 및 사전 렌더링(정적 사이트 생성, SSG)도 지원합니다. getStaticPaths 및 getStaticProps에서 구성:

// pages/posts/[id].js
export async function getStaticPaths() {
  // Get all possible dynamic paths
  const paths = await getPostIds();

  return {
    paths: paths.map((id) => `/posts/${id}`),
    fallback: false, // Or 'true' to return 404 for non-prerendered paths
  };
}

export async function getStaticProps(context) {
  const id = context.params.id;
  const post = await getPostById(id);

  return {
    props: {
      post,
    },
  };
}

6. 동적 가져오기 및 코드 분할

Next.js는 동적 가져오기를 지원하여 요청 시 코드를 로드하고 초기 로드 시간을 단축합니다.

// pages/index.js
import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/Dynamic'), {
  ssr: false, // Avoid rendering on the server
});

function Home() {
  return (
    <div>
      <h1 id="Welcome-to-Next-js-with-SSR">Welcome to Next.js with SSR!</h1>
      <dynamiccomponent></dynamiccomponent>
    </div>
  );
}

export default Home;

7. 이미지와 리소스 최적화

다음/이미지 구성요소를 사용하여 이미지 로딩, 자동 압축 및 크기 조정을 최적화합니다.

// pages/index.js
import Image from 'next/image';

function Home() {
  return (
    <div>
      <h1 id="Welcome-to-Next-js-with-SSR">Welcome to Next.js with SSR!</h1>
      <image src="/example.jpg" alt="Example Image" width="{500}" height="{300}"></image>
    </div>
  );
}

export default Home;

8. 맞춤형 서버

더 세밀한 제어가 필요한 경우 사용자 정의 서버를 만들 수 있습니다.

// server.js
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url, true);
    const { pathname } = parsedUrl;

    if (pathname === '/api') {
      // Custom API route handling
      // ...
    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

9. 타사 라이브러리 및 프레임워크 통합

Next.js를 사용하면 Redux, MobX, Apollo 등과 같은 타사 라이브러리 및 프레임워크를 쉽게 통합할 수 있습니다.

// pages/_app.js
import React from 'react';
import App from 'next/app';
import { Provider } from 'react-redux';
import store from '../store';

function MyApp({ Component, pageProps }) {
  return (
    <provider store="{store}">
      <component></component>
    </provider>
  );
}

export default MyApp;

10. SEO 최적화

Next.js의 SSR 기능은 SEO 친화적이지만 메타 태그를 통해 최적화할 수도 있습니다.

// pages/index.js
import Head from 'next/head';

function Home() {
  return (
    
      
        <title>My Next.js App</title>
        <meta name="description" content="This is an example of using Next.js with SEO.">
      
      <h1 id="Welcome-to-Next-js-with-SEO">Welcome to Next.js with SEO!</h1>
    >
  );
}

export default Home;

11. 국제화(i18n)

Next.js 10에는 i18n 지원이 내장되어 있어 다국어 웹사이트를 쉽게 구현할 수 있습니다.

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
  },
};

12. 서버리스 모드

Next.js는 Vercel에서 기본적으로 활성화되는 서버리스 모드를 지원합니다. 이 모드에서는 애플리케이션이 요청 시 실행되므로 리소스 비용이 절약됩니다.

13. 웹 작업자

Next.js의 Web Worker를 사용하여 집약적인 컴퓨팅 작업을 처리함으로써 메인 스레드 차단을 방지하세요.

// components/Worker.js
import { useEffect } from 'react';
import { createWorker } from 'workerize-loader!./my-worker.js'; // Use workerize-loader to load worker files

function MyComponent() {
  const worker = createWorker();

  useEffect(() => {
    const result = worker.calculate(100000); // Calling worker methods
    result.then(console.log);
    return () => worker.terminate(); // Cleaning up workers
  }, []);

  return <div>Loading...</div>;
}

export default MyComponent;

14. 타입스크립트 통합

Next.js는 TypeScript를 지원하여 프로젝트에 유형 안전성을 추가합니다.

typescript와 @types/react를 설치하세요.

tsconfig.json 구성 파일을 생성합니다.

next.config.js를 수정하여 TypeScript 지원을 활성화하세요.

15. 사용자 정의 오류 페이지

pages/_error.js 사용자 정의 오류 페이지 만들기:

npx create-next-app my-app
cd my-app

16. Vercel에 배포

Next.js는 Vercel과 완벽하게 통합됩니다. 몇 가지 간단한 단계만 거치면 배포할 수 있습니다.

Vercel 웹사이트에서 계정을 만들거나 로그인하세요.

Vercel이 GitHub 또는 GitLab 저장소에 액세스하도록 승인하세요.

배포할 프로젝트를 선택하면 Vercel이 자동으로 Next.js 구성을 감지합니다.

프로젝트 도메인 이름과 환경 변수를 설정합니다(필요한 경우).

"배포" 버튼을 클릭하면 Vercel이 자동으로 애플리케이션을 빌드하고 배포합니다.

17. 성능 모니터링 및 최적화

성능 평가를 위해 Next.js에 내장된 Lighthouse 플러그인이나 Google PageSpeed ​​​​Insights와 같은 타사 도구를 사용하세요. 보고서를 기반으로 코드, 이미지 및 기타 리소스를 최적화하여 로딩 속도와 사용자 경험을 향상시킵니다.

위 내용은 Next.js 및 SSR: 고성능 서버 렌더링 애플리케이션 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!