React의 서버 측 렌더링

원래 단일 페이지 응용 프로그램이 아니었을 때 모든 페이지는 HTTP 호출에 대한 응답에서 반환된 다른 HTML이었습니다. 정적 콘텐츠 파일 또는 서버 측 언어(예: PHP, Python 또는 Java)를 통해 응답을 처리하고 보다 동적인 방식으로 응답합니다.

SPA를 통해 "요청 이동 시간"을 제거하여 표준 요청-응답 모델보다 훨씬 빠르게 작동하는 반응형 사이트를 제공할 수 있었습니다.

React 웹사이트에 액세스할 때 서버의 일반적인 응답은 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="/favicon.ico">
    <title>My React app</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="/app.js"></script>
  </body>
</html>

그게 왜 문제야?

느린 인터넷 연결은 app.js좋은 사용자 경험을 제공하기에 충분히 빠르게 로드되지 않을 수 있습니다.
구형 스마트폰과 같은 느린 장치는 자바스크립트 코드에서 가장 빠른 로딩 시간을 갖지 않을 수 있습니다.
검색 엔진 및 소셜 네트워크 는 클라이언트 측에서 로드되는 웹사이트 콘텐츠를 인식하지 못하거나 찾을 수 없습니다.

1. 주요 페이지를 정적으로 유지

당신은 사용자가 로그인 할 수있는 웹 사이트를 가지고 있고, 당신이 결정할 수있는 서명되지 않은 내용에 액세스 할 수없는 경우 공개 사이트 생성 ( "우리에 대해"인덱스 등을 "연락처"등) 정적 HTML로 페이지 , JS에서 렌더링하지 마십시오.

귀하의 콘텐츠는 로그인 요구 사항에 의해 제한되므로 검색 엔진에서 색인을 생성하거나 소셜 미디어에서 공유되지 않습니다.

2. 빌드 프로세스를 실행할 때 애플리케이션의 일부를 HTML 페이지로 생성

react-snapshot 과 같은 라이브러리를 사용하여 애플리케이션 페이지의 HTML 사본을 생성하고 지정된 폴더에 저장할 수 있습니다. 그러면 폴더를 다른 자산과 함께 배포할 수 있습니다. 이러한 방식으로 HTML은 JavaScript가 비활성화된 사용자, 검색 엔진, 소셜 네트워크 등이 귀하의 사이트에 액세스할 수 있도록 하는 응답과 함께 제공됩니다.

대부분의 경우 react-snapshot 구성은 프로젝트에 종속성을 설치하고 새 스크립트를 만드는 것만큼 간단합니다.

"build": "webpack && react-snapshot --build-dir static"

3. JS로 서버 측 렌더링 애플리케이션 만들기

새로운 세대의 자바스크립트 웹 애플리케이션의 매력적인 측면 중 하나는 클라이언트(브라우저)와 서버 모두에서 실행할 수 있다는 것입니다. 이를 통해 빌드 시에는 알려지지 않은 더 동적인 페이지용 HTML을 생성할 수 있습니다. 시각. 이것은 종종 "동형" 또는 "범용" 응용 프로그램이라고 합니다.

React에 SSR을 제공하는 가장 인기 있는 두 가지 솔루션은 다음과 같습니다.

다음.js — https://github.com/zeit/next.js/
개츠비 — https://github.com/gatsbyjs/gatsby

당신은 할 필요 해요 서버에 대한 노드 백엔드를 실행할 수 있습니다 . github 페이지와 같은 정적 호스트에는 이 솔루션을 배포할 수 없습니다.

우리가 취할 첫 번째 단계는 다른 React 애플리케이션과 마찬가지로 애플리케이션을 만드는 것입니다.

먼저 세 개의 패키지를 추가해야 합니다.

yarn add express babel-node pug --save-dev

babel-node 는 노드 용 래퍼로, 즉시 코드 변환을 수행할 수 있습니다.
pug 는 express와 함께 사용할 수 있는 템플릿 엔진입니다.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="root">!{app}</div>
    <script src="bundle.js"></script>
  </body>
</html>

우리 서버는 다음과 같이 보일 것입니다

import React from 'react';
import { renderToString } from 'react-dom/server';
import express from 'express';
import path from 'path';
import App from './src/App';
const app = express();
app.set('view engine', 'pug');
app.use('/', express.static(path.join(__dirname, 'dist')));
app.get('*', (req, res) => {
  const html = renderToString(
    <App />
  );
  res.render(path.join(__dirname, 'src/index.pug'), {
    app: html
  });
});
app.listen(3000, () => console.log('listening on port 3000'));

import { renderToString } from 'react-dom/server';

const app = express();
app.set('view engine', 'pug');
app.use('/', express.static(path.join(__dirname, 'dist')));

그런 다음 express에 dist폴더 에서 파일을 검색하도록 지시 하고 요청(예: /bundle.js)이 해당 폴더에 있는 파일과 일치하면 응답합니다.

app.get('*', (req, res) => {});

const html = renderToString(
  <App />
);

res.render(path.join(__dirname, 'src/index.pug'), {
  app: html
});

app.listen(3000, () => console.log('listening on port 3000'));

남은 일은 다음에 적절한 스크립트를 추가하는 것입니다 package.json.

"scripts": {
  "server": "babel-node server.js"
}

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="root">div data-reactroot="">
      Contents of App.js
     </div>
    <script src="bundle.js"></script>
  </body>
</html>

SSR은 주로 간단해 보이지만 처음에는 명확하지 않을 수 있는 몇 가지 주제에 주의해야 합니다.

React 구성 요소 수명 주기는 서버에서 호출되지 않습니다( componentDidMount)즉, 런타임에 렌더링하는 가져온 데이터가 SSR이 아님을 의미합니다. 필요한 경우 데이터를 소품으로 제공해야 하므로 일반적으로 좋은 일입니다. res.render데이터를 가져올 때까지 렌더링(호출 ) 을 지연해야 하므로 방문자에게 약간의 지연이 발생할 수 있습니다.
서버 측에서 생성된 상태는 클라이언트 애플리케이션 상태로 전달되지 않습니다. 즉, 백엔드가 일부 데이터를 가져와 HTML을 렌더링하는 데 사용 this.state하는 경우 브라우저에서 볼 수 있는 위치에 배치되지 않습니다.
반응 라우터를 사용하는 경우 서버에서 렌더링될 때 적절한 URL이 애플리케이션에 전달되는지 확인해야 합니다.