React 서버 측 렌더링 가이드: 프런트엔드 애플리케이션의 성능을 향상시키는 방법-JS 튜토리얼-php.cn

React 서버 측 렌더링 가이드: 프런트엔드 애플리케이션의 성능을 향상시키는 방법

PHPz

풀어 주다： 2023-09-26 12:33:36

원래의

1095명이 탐색했습니다.

React 서버 측 렌더링 가이드: 프런트엔드 애플리케이션의 성능을 향상시키는 방법

React 서버측 렌더링 가이드: 프런트엔드 애플리케이션의 성능을 향상하는 방법

요약: 프런트엔드 애플리케이션 개발이 지속적으로 발전하면서 성능 최적화가 중요한 문제가 되었습니다. 프런트 엔드 애플리케이션의 성능을 향상시키는 효과적인 방법으로 SSR(서버 측 렌더링)을 선택하는 개발자가 점점 더 많아지고 있습니다. 이 기사에서는 React 서버 측 렌더링의 원칙과 사례를 소개하고 독자가 프런트엔드 애플리케이션의 성능을 향상시키는 데 도움이 되는 구체적인 코드 예제를 제공합니다.

서버 측 렌더링(SSR)이란 무엇입니까?

서버 측 렌더링은 서버 측에서 프런트 엔드 코드를 실행하고 HTML 페이지를 생성하는 기술입니다. 기존 프런트엔드 애플리케이션은 JavaScript를 사용하여 브라우저 측에서 페이지를 렌더링합니다. 사용자가 방문하면 브라우저는 JavaScript 코드를 다운로드하고 실행하여 페이지 콘텐츠를 생성합니다. 서버 측 렌더링은 이 프로세스를 서버 측으로 발전시키고 사용자가 요청할 때 완전한 HTML 페이지를 생성하여 브라우저의 부담을 줄이고 페이지 로딩 속도와 사용자 경험을 향상시킵니다.

React 서버사이드 렌더링의 원리

React는 컴포넌트 기반의 JavaScript 라이브러리로, Virtual DOM(Virtual DOM)을 사용한다는 장점이 있습니다. Virtual DOM은 컴포넌트 트리를 JavaScript 객체로 표현하기 위해 React가 사용하는 기술입니다. 렌더링 전과 후에 렌더링된 가상 DOM 트리의 차이를 비교하여 브라우저 다시 그리기 및 재배열을 줄이고 페이지 렌더링 효율성을 향상시킬 수 있습니다.

서버 측 렌더링에서 React는 먼저 ReactDOMServer.renderToString 메서드를 통해 구성 요소를 문자열 형식의 HTML로 렌더링합니다. 그런 다음 이 HTML 문자열이 브라우저로 전송되고 브라우저는 HTML 문자열을 페이지에 삽입하여 렌더링을 완료합니다.

React에서 서버 측 렌더링을 구현하는 방법은 무엇입니까?

먼저 Express와 같은 Node.js 서버 프레임워크를 사용하여 서버를 만들어야 합니다.

// server.js
const express = require('express');
const React = require('react');
const { renderToString } = require('react-dom/server');
const App = require('./App'); // 你的React应用根组件

const app = express();

app.get('/', (req, res) => {
  res.send(`
    <html>
      <head>
        <title>React SSR</title>
      </head>
      <body>
        <div id="root">${renderToString(<App />)}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

로그인 후 복사

위 코드는 App이 React 애플리케이션 루트 구성 요소인 간단한 서버 측 렌더링 예제입니다.

다음으로, React 애플리케이션을 서버 측의 Bundle.js 파일로 패키징하기 위한 빌드 스크립트를 작성해야 합니다.

// build.js
const webpack = require('webpack');
const webpackConfig = require('./webpack.config');

const compiler = webpack(webpackConfig);

compiler.run((error, stats) => {
  if (error || stats.hasErrors()) {
    console.error('Build failed.');
    return;
  }
  console.log('Build successful.')
});

로그인 후 복사

마지막으로 브라우저 측에서 Bundle.js 파일을 페이지에 도입해야 합니다.

<!-- index.html -->
<html>
  <head>
    <title>React SSR</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

로그인 후 복사

서버 측 렌더링 성능을 더욱 최적화하세요

서버 측 렌더링이 프런트엔드 애플리케이션의 성능을 향상시킬 수 있지만 여전히 성능 병목 현상이 일부 존재합니다. 다음은 서버 측 렌더링 성능을 더욱 최적화하기 위한 몇 가지 제안 사항입니다.

캐시 사용: 렌더링 결과를 캐시에 저장하면 동일한 페이지를 반복해서 렌더링하는 것을 피할 수 있습니다. 이는 Redis 또는 Memcached와 같은 캐싱 기술을 사용하여 달성할 수 있습니다.
비동기 로딩: 데이터 요청, 데이터베이스 액세스 등과 같이 페이지 렌더링을 차단할 수 있는 일부 작업의 경우 비동기 방법을 사용해야 합니다.
코드 분할: 애플리케이션 코드를 여러 개의 작은 조각으로 분할하고 필요할 때 로드하여 전체 애플리케이션을 로드하지 않도록 합니다.

결론

이 글에서는 React 서버 측 렌더링의 원리와 사례를 소개하고 서버 측 렌더링 성능을 더욱 최적화하기 위한 제안 사항을 소개합니다. 서버 측 렌더링을 통해 프런트엔드 애플리케이션의 성능을 향상하고 사용자 경험을 최적화할 수 있습니다. 위의 내용이 독자들이 React 서버사이드 렌더링 기술을 더 잘 이해하고 적용하는 데 도움이 되기를 바랍니다.

참고 자료: