저는 개인적으로 Server side rendering을 좋아하지 않지만 Open Graph Protocol과 트위터 카드에 대응하고 싶습니다. 이것은 일종의 시도입니다.

추기

는 2017/6/3-Netlify 편를 썼다.

2017/6/9-CSR의 또 다른 문제로서 초기 로드가 느린 문제에 대응하기 위해 Code-splitting 기사 가져오기를 썼다.

는 2017/23-Lambda@Edge편집자를 썼다.

Preerender란

이름처럼 Preerender는 미리 정적 파일로 렌더링해야 합니다.정적 파일이라면 웹 서버나 S3에 올려 보낼 수 있어 CDN의 은혜를 받을 수도 있고 OGP의 대응도 가능하다.Proerender는 Prerender.io 같은 서비스를 사용하는 것이 더 좋을 것 같지만, 이번에는 당분간 스스로 해 보겠습니다.
그나저나 이번 소스는 여기.에 있어요.

절차.

대부분의 절차는 create-react-app의 README에 쓰여 있다.

React 애플리케이션 작성

그래서 시위 행진create-react-app에서 충분하다고 생각해서 이걸로 할게요.

yarn create react-app prerender-demo

상술한 것은 처음 실행할 때 sudo를 추가하지 않으면 오류가 발생할 수 있습니다.

필요한 매크로 패키지 추가

우선 react-router를 루트로 사용한다.react-helmet 뿌리마다 머리를 다시 쓴다.helmet을 사용하여 실행 중인 사용자의 헤더를 다시 쓰기만 하면 실제 이 경로를 공유하는 것도 적합한 링크가 되지 않습니다.이것을 해결하기 위해 사용react-snapshot.또 react-helmet의 최신 버전은 react-snapshot과 함께 사용할 수 없기 때문입니다.4 계열을 사용한다.

cd prerender-demo
yarn add react-router-dom react-helmet@4
yarn add -D react-snapshot

다시 쓰다

react-router와 react-helmet

이번에는 테스트용 노선 두 개만 할게요.우선 개작App.js.
App.js

import React, { Component } from 'react';
import Helmet from 'react-helmet';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'
import logo from './logo.svg';
import './App.css';
import {
  Home,
  About
} from './containers';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Helmet title="Default title" />
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          <Router>
            <div>
              <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
              </ul>
              <hr/>
              <Route exact path="/" component={Home}/>
              <Route path="/about" component={About}/>
            </div>
          </Router>
        </p>
      </div>
    );
  }
}

export default App;

이어 각 노선용 컨테이너를 제작해 헤더 메시지를 적는다.
Home.js

import React from 'react';
import Helmet from 'react-helmet';

const Home = () => (
  <div>
    <Helmet
      title="Home"
      meta={[
        { name: 'twitter:card', content: 'summary' },
        { name: 'twitter:title', content: 'Home' },
        { name: 'twitter:description', content: 'description of Home' },
        { name: 'twitter:image', content: 'http://path/to/image' },
        { property: 'og:title', content: 'Home' },
        { property: 'og:type', content: 'website' },
        { property: 'og:url', content: 'http://path/to/this/url' },
        { property: 'og:image', content: 'http://path/to/image' },
        { property: 'og:description', content: 'description of Home' },
      ]}
    />
    <h2>Home</h2>
  </div>
)

export default Home;

About.js는 Home 대신 About으로 그림을 바꾸었기 때문에 생략합니다.

react-snapshot

이어 react-snapShot에 대한 변경으로 package.json의build구역을 다음과 같이 변경한다.
package.json

"build": "react-scripts build && react-snapshot"

그리고 index.js에서 사용한 렌더를 react-snapShot의 렌더 방법으로 변경합니다.
index.js

import { render } from 'react-snapshot';
(略)
render(<App />, document.getElementById('root'));

이렇게 yarn build하면 build 디렉터리 아래에 정적 파일이 생성됩니다.
하지만about.""이 완성되었기 때문에, 노선을/about에서 삭제합니다.) 또는 로 변경됩니다.> 을abut으로 이름을 바꾸십시오.

구성 및 확인

그리고 이거 설정해서 확인해.이번에는 테스트용 S3 확보에 클라우드 프론트를 통해 발표됐다.

나타내다

다음과 같이 브라우저에서 확인할 수 있습니다.
그나저나 여러 가지 이유로 도메인 이름이 숨겨졌다.

Home

About

Slack을 통해 확인

슬랙oEmbed, OGP 및 트위터 카드 정보를 볼 수 있습니다. 때문에 슬랙에 붙여봤고, 노선마다 OGP 정보를 제대로 입수할 수 있다는 것도 확인했다./에서 자신의 프로필 이미지/about에 Qiita의 로고를 설정했지만 설정에 따라 description도 반영되었다.

최후

이런 느낌으로 OGP에 상당히 간단하게 대응할 수 있다.그러나react-snapshot의 페이지에experimental이라고 쓰여 있기 때문에 다음에 적당한 프로그램이 정상적으로 작동하는지 확인하고 싶습니다.아니면 생산에 잘 활용하면 프리렌더가 먼저다.나는 IO 같은 서비스를 사용하는 것이 비교적 좋다고 생각한다.이 근처에서 해보면 보충하고 싶어요.
다만 prerender 이외의 방법으로 하려고 할 것 같아서 다음에 다른 방법을 소개하겠습니다.