Next.js 및 SSR: 고성능 서버 렌더링 애플리케이션 구축-JS 튜토리얼-php.cn

Next.js and SSR: Building high-performance server-rendered applications

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>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>{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>Welcome to Next.js with SSR!</h1>
      <DynamicComponent />
    </div>
  );
}

export default Home;

로그인 후 복사

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

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

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

function Home() {
  return (
    <div>
      <h1>Welcome to Next.js with SSR!</h1>
      <Image src="/example.jpg" alt="Example Image" width={500} height={300} />
    </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 {...pageProps} />
    </Provider>
  );
}

export default MyApp;

로그인 후 복사

10. SEO 최적화

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

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

function Home() {
  return (
    <>
      <Head>
        <title>My Next.js App</title>
        <meta name="description" content="This is an example of using Next.js with SEO." />
      </Head>
      <h1>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;

로그인 후 복사