サーバサイドレンダリング( SSR ) : Reaction [パート2 ]

ハローフォークス👋, この記事では、どのように実際にサーバー側が反応アプリをレンダリングすることを学ぶでしょう.
これはパート2です.あなたがこの記事を利用することをお勧めします.
記事ミラー
プラットフォームでお読みください.

hashnode

クイックリープ

SSRは、クライアント側のレンダリングされたアプリケーションが初期のロード時間のように直面し、SEOでそれ自身の欠点があったという問題を解決しました.たびに我々のウェブサイトの新しいページを訪問すると、頻繁に要求は、サーバーと我々のアプリのレンダリングから地面に行われます.
さて、SSRによってこの問題をどのように解決できるかについて議論します.それにまっすぐ行きましょう.

反応するSSR

我々は、反応とSSRの導入と両方の世界の最高を持つことができます.
アイデアは最初にサーバーからアプリケーションをレンダリングし、クライアント側で単一のページアプリケーション(SPA)の利点を活用しています.
温泉は高速であり、良いユーザーエクスペリエンスを提供します.したがって、我々は最初にし、そこからスパとして我々のアプリを実行する上でサーバー上で我々のアプリをレンダリングすることができます.したがって、このようにレンダリングされたアプリはユニバーサルAppsと呼ばれています.

Applications that have the ability to render both on the server and the client are called universal apps.

SSR + SPA =ユニバーサルアプリ
さて、次の利点をお楽しみください.

初期レンダリングの高速読み込み時間

ウェブクローラは、SEOを確実にしている我々のページをインデックスすることができます

また、我々は現在、温泉が提供する利点を活用することができます.

SSRで私たちを助けるいくつかの反応方法

最初に我々の普遍的なアプリや同形反応アプリ、そのようなアプリの別の用語を作成するために支援される方法を見てみましょう.

Hydrate ()

The react-dom パッケージはhydrate() SSRとクライアント側のレンダリングを組み合わせたメソッドです.
これはdocsが言うことに反応することですhydrate() ,

Same as render(), but is used to hydrate a container whose HTML contents were rendered by ReactDOMServer. React will attempt to attach event listeners to the existing markup.

まず見てみましょうReactDOMServer そうです.

reactdomserver

反応ドキュメントに従って

The ReactDOMServer object enables you to render components to static markup. Typically, it’s used on a Node server.

ReactDOMサーバ。renderToString ()

今、私はそれが少し混乱を得ているということを知っています、しかし、私が彼らがSSRで働くために反応によって提供されるちょうど方法であると私に信じてください.私は、あなたが知っていなければならないこの最後の方法の後、すべてを要約しています.
再び、我々の親友が言うものを見ましょう.反応するドキュメントとして

Render a React element to its initial HTML. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.

わかりましたので、今、あなたはこの上記の方法が何をするかについて若干の考えがあります.

ゴール

私たちの目的は、当社のサーバーサーバー側から直接最初のページをレンダリングするために我々の初期の要求をレンダリングし、我々は我々のクライアント側のアプリを使用して継続することができます私たちの初期ページをロードした後、そこからその上から.したがって、我々はこのように高速な初期負荷を確保する必要がある我々の普遍的(または同形)アプリを設定することができます.
我々は、我々のレンダリングApp.js サーバーからのコンポーネントとこれが我々が必要とする反応成分であるのでReact and ReactDOMServer サーバ側で.
目的は、ビルドフォルダー内の静的なHTMLファイルを作成することです(私たちは後でどのように表示されます)、そのアプリケーションを使用して、サーバーからの明示的なアプリケーションを使用してファイル.
次に、renderToString() reactdomserverのメソッド.前述の通りReactDOM.renderToString() はHTML文字列を返します.サーバ側では、このHTMLマークアップをレンダリングし、React.hydrate このサーバー側でレンダリングされたHTMLマークアップを待ちます.
もう少し明確に、しかし、今は概念を固めましょう.

実際のSSR

私たちはあなたのお気に入りのポケモンを検索することができますシンプルなポケモンデータベースアプリケーションを作ることでしょう.我々は、反応でSSRをセットアップするだけに集中します.ソースコード全体を見つけることができますhere .

興奮?続けましょう.

ステップ1 :プロジェクトのセットアップ

まず最初に、インストールしましょうcreate-react-app ボイラープレートコードをクリーンアップします.

npx create-react-app ssr-with-react

次に、サーバーが必要です.インストールしましょうexpress .

npm install express

ステップ2：インデックスで。JSファイル変更.reactdomへのrender ()Hydrate ()

これは、HTMLマークアップをサーバーから来るように反応するように指示します.

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';
import App from './App';

ReactDOM.hydrate(<App />, document.getElementById('root'));

ステップ3：サーバー側での作業

今、サーバーサイドコードを設定するために残っています.
クリエイトアserver.js ファイルを設定します.

import initialRenderRoutes from './routes/initialRenderRoutes.js';
import path from 'path';
import express from 'express';

const app = express();
app.use('^/$', initialRenderRoutes);

app.use(express.static(path.resolve(__dirname, '../build')));

const port = 5000;

app.listen(port, () => console.log(`Server running on port ${port}`));

そのコードを調べましょう.最初の行のインポートinitialRenderRoutes.js . 私はMVCアーキテクチャに従って自分のコードを分割するのが好きです.
インinitialRenderRoutes.js 私たちは、

import express from 'express';
import initialRenderController from '../controller/initialRenderController.js';

const router = express.Router();

router.get('/', initialRenderController);

export default router;

コードを分割する必要はありませんでしたが、個人的にはMVCアーキテクチャを好みます.
現在initialRenderRoutes.js 輸入しましたinitialRenderController.js ここで我々のロジックは、再び業界標準に従うために行われます.

import fs from 'fs';
import path from 'path';
import React from 'react';
import ReactDOMServer from 'react-dom/server';

import App from '../../src/App.js';

const initialRenderController = (req, res, next) => {
  console.log(path.resolve());
  fs.readFile(
    path.resolve('../client/build/index.html'),
    'utf8',
    (err, data) => {
      if (err) {
        console.log(err);
        return res.status(500).send('Internal Server Error');
      }
      return res.send(
        data.replace(
          '<div id="root"></div>',
          `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`
        )
      );
    }
  );
};

export default initialRenderController;

OK今すぐ戻って来るserver.js ファイルは以下の行で静的ファイルを提供します.

app.use(express.static(path.resolve(__dirname, '../build')));

今面白い部分です.今、あなたは中で論理に気づいたかもしれませんinitialRenderController.js 我々は、最初に我々のインデックスを読んでいます.私たちのビルドフォルダからHTMLファイルをnpm run build コマンド、私たちは、後でこれを議論します
HTMLマークアップをプリレンダリングします.以下のコードinitialRenderController.js それを示す.

  ...
 return res.send(
        data.replace(
          '<div id="root"></div>',
          `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`
        )
...

あなたが明らかに見ることができるように、我々は我々の内容を取り替えていますindex.html HTMLマークアップで.
したがって、この方法では、我々は事前に我々のサーバーからレンダリングされたアプリを持って、今ではサーバーからの初期のHTMLリクエストを読み込むの利点を知っている.

Step 4 :サーバへのエントリポイントの管理

新規作成index.js サーバのエントリポイントとなるファイル.

require('ignore-styles');

require('@babel/register')({
  ignore: [/node_modules/],
  presets: ['@babel/preset-env', '@babel/preset-react'],
});

require('./server');

さて、これは何ですか.🤯 ので、私は私たちのアプリが必要に応じて動作するようにいくつかのパッケージを必要とすることを教えてください.
無視スタイルは、正しく我々のスタイルをレンダリングするために必要です.あなたがこのアプリを削除する場合は、レンダリングされますが、スタイルなしで、誰がそれを望んでいる.それで、あなたがこれを含むことを確認してください.
/レジスタは単にコードを転送するために必要です.詳細については、私のチェックアウトすることができますstackoverflow 最近質問した質問.また、そこから多くを学びます受け入れられた答えのコメントセクションをチェックアウトすることを忘れないでください

ステップ5：我々のアプリをテストする

さて、あなたはすべて完了です.我々のアプリをテストしましょう.我々のサーバーが静的なファイルを提供しているので、我々は最初に彼らを生成する必要があります.作業ディレクトリと型に移動します

npm run build

現在build フォルダは、我々のサーバーが必要とするすべての静的なファイルが含まれて生成されます.
次に、端末タイプ

node server/index.js

今すぐあなたのブラウザをチェックしますlocalhost:5000 あなたのアプリは、画面上にレンダリング表示されます.ハーレイ!⚡
したがって、我々のユーザーに事前にレンダリングされたHTMLマークアップを送信する私たちの目標を達成しました.
ホウそれは多くの今、あなたは普遍的(または同形)アプリをあなたと準備ができている.おめでとう.🎉

結論

この記事は、私はすべてのこの背後にある理由を知って、このクイック記事を読むことをお勧めしますので、継続していた.
閉じるこの動画はお気に入りから削除されています.より多くの記事は、途中で進行中です!🔥
何か提案や質問がある場合は、この記事を参考に、コメントでお知らせください.
フォローミーオン.

参考文献

SSR with React : Unexpected token '<' in call to renderToString()

What's the difference between hydrate() and render() in React 16?

How to implement server-side rendering in your React app in three simple steps

Enabling server-side rendering in React for improved app performance