Razzle: サーバーレンダリングのトラブルシューティングを行うにはどうすればよいですか？

作成日 2019年02月05日 · 9コメント · ソース: jaredpalmer/razzle

こんにちは、

Googleの検索コンソールにログインしてGoogleとして取得すると、ウェブサイトが空白のページとして表示されるという問題に気づきました。

私はいくつかの調査を行いました、そしてそれのいくつかは私をこの記事に導きます：

https://medium.com/@gajus/react -application-seen-as-a-blank-page-via-fetch-as-google-afb11dff8562

それは検索エンジンである可能性が非常に高く、グーグル自体が同じように動作しないのでフェッチします。そうしないと、今までにランキングを失っていたでしょうが、それでも、ウェブサイトの所有者を目覚めさせてしまうので、この問題を解決したいと思います。

phantomjsをダウンロードしましたが、これはGoogleと同じフェッチであると想定しており、レンダリングしようとすると、いくつかのエラーが返されます。

この問題は、コンパイルするターゲットブラウザを変更するのと同じくらい簡単に解決できる場合がありますが、babel / polyfilをインストールしてインポートするだけでは機能しません。

誰かが私をここで正しい方向に向けることができるでしょうか？

stale

ソース

wagnerjsilva

👍1

最も参考になるコメント

したがって、私の提案（そしておそらくこれに関するドキュメントのトラブルシューティングガイドが必要です）は、 server.js 、 client.js 、 App.js 、そして潜在的にはできるだけ多くコメントアウトすることですWebpackのアスペクト（存在する場合）をオーバーライドして、Razzleアプリケーションを「HelloWorld」のような状態に戻します。また、すべてのスクリプトが箱から出して正しくロードされていることを確認するために、RazzleのHTMLテンプレートをserver.jsファイルにコピーして戻すことをお勧めします。実行したら、Chrome開発ツールを開き、[パフォーマンス]タブに移動し、[スクリーンショット]チェックボックスをオンにして、[更新]アイコンを押します。以下のGIFを参照してください。

kapture 2019-02-05 at 8 33 42

目標は、タイムライン領域に空白の白いフレームがないことを確認することです。フラッシュなしで適切なレンダリングを取得したら、古いコードをさらに追加する必要があります。赤ちゃんの一歩を踏み出します。注意しないと、これは非常に簡単に混乱します。

あなたの特定のケースに関しては、私はあなたがしているすべてのグーグルタグマネージャーのもの、あなたのCSS、そしてどんなコード分割も削除することから始めます。レンダリングして逆方向に動作させるだけです。次に、Reduxを動作させます。次に、react-helmetを追加し直し、問題がないと思ったら、Lighthouseテストも実行して再確認します（[監査]タブ）。この状態を新しいブランチにコミットして、将来その状態に戻ることができるようにします。次に、分析スクリプトを追加し直して、レンダリングを再度確認します。最後に、コード分割を追加し直してみてください。

注：cssを保持し、Razzleを開発モードで上記の分析を行うと、Razzleは開発中にサーバー（クライアントのみ）で.cssスタイルを処理しないため、FOUCが発生する可能性があります。したがって、 .cssファイルを使用している場合にスタイルハイドレーションを使用して適切なSSRを実行していることを完全にテストするには、本番用にRazzleをビルドし、本番サーバーをローカルで実行する必要があります。ただし、サーバーからHTMLの存在を確認するだけの場合は、これを開発モードで実行できます。

jaredpalmer 2019年02月05日

👍6

全てのコメント9件

ページが空白を取得している場合は、SSRまたはハイドレーションスキームが壊れています。 Razzleは、箱から出して説明した内容に悩まされることはありません。実際、BBC.comのようなSEOに焦点を当てたサイトで使用されています。 server.jsファイルを貼り付けることができますか？サーバーでデータを取得していますか？

jaredpalmer 2019年02月05日

こんにちはジャレド、

迅速な返信をありがとう、はい、サーバーからデータをフェッチします。

これが私のserver.jsです

import App from './App';
import React from 'react';
import Helmet from 'react-helmet';
import { StaticRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import express from 'express';
import compression from 'compression';
import { renderToString } from 'react-dom/server';

import configureStore from './store/configureStore';
import { remoteLoader } from './api/remoteLoader';
import serialize from 'serialize-javascript';

import { Capture } from 'react-loadable';
import { getBundles } from 'react-loadable/webpack';
import stats from '../build/react-loadable.json';

import { IS_PRODUCTION } from './components/shared/constants';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const server = express();
server.use(compression());

if (!IS_PRODUCTION) {
    server.set('cache', false);
}

server
    .disable('x-powered-by')
    .use(express.static(process.env.RAZZLE_PUBLIC_DIR, { Expires: '30d' }))
    .get('/*', (req, res) => {
        //Ensures clients with old css paths are served the current file
        if (req.path.indexOf('/static/css') > -1 && assets.client.css) {
            const currentCssFile = `${process.env.RAZZLE_PUBLIC_DIR}${assets.client.css}`;
            return res.sendFile(currentCssFile);
        }

        remoteLoader(apiResult => {
            const responseCode = typeof apiResult.status === 'undefined' ? 404 : apiResult.status;

            if (responseCode === 301) {
                return res.redirect(responseCode, apiResult.headers.location);
            }

            // Compile an initial state
            const initialState = {
                remote: {
                    cms: {
                        result: apiResult ? apiResult.data : false,
                        loading: false
                    },
                    myDrewberry: {
                        searchResults: null,
                        loading: false,
                        failed: false
                    }
                }
            };
            // Create a new Redux store instance
            const store = configureStore(initialState);

            const context = {};
            const modules = [];
            const markup = renderToString(
                <Capture report={moduleName => modules.push(moduleName)}>
                    <StaticRouter context={context} location={req.url}>
                        <Provider store={store}>
                            <App />
                        </Provider>
                    </StaticRouter>
                </Capture>
            );
            const helmet = Helmet.renderStatic();

            if (context.url) {
                res.redirect(context.url);
            } else {
                const bundles = getBundles(stats, modules);
                const chunks = bundles.filter(bundle => bundle.file.endsWith('.js'));

                res.status(responseCode).send(
                    `<!doctype html>
                    <html ${helmet.htmlAttributes.toString()}>
                    <head>

                        ${assets.client.css ? `<link rel="stylesheet" href="${assets.client.css}">` : ''}
                        ${helmet.title.toString()}
                        ${helmet.meta.toString()}
                        ${helmet.link.toString()}
                        <link rel="icon" type="image/png" href="/favicon16.png" sizes="16x16"/>
                        <link rel="icon" type="image/png" href="/favicon32.png" sizes="32x32"/>
                        <link rel="icon" type="image/png" href="/favicon96.png" sizes="96x96"/>
                        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!--320-->
                        <meta http-equiv="expires" content="0">
                    </head>
                    <body class="drewberry-preload">

                        <!-- Google Tag Manager -->
                            <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
                            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
                            })(window,document,'script','dataLayer','GTM-TKPXWB');</script>
                        <!-- End Google Tag Manager -->

                        <div id="root">${markup}</div>
                        <script>
                            window.__PRELOADED_STATE__ = ${serialize(initialState)}
                        </script>
                        ${
                            IS_PRODUCTION
                                ? `<script src="${assets.client.js}"></script>`
                                : `<script src="${assets.client.js}" crossorigin></script>`
                        }
                          ${chunks
                              .map(chunk =>
                                  IS_PRODUCTION
                                      ? `<script src="/${chunk.file}"></script>`
                                      : `<script src="http://${process.env.HOST}:${parseInt(process.env.PORT, 10) + 1}/${
                                            chunk.file
                                        }"></script>`
                              )
                              .join('\n')}
                          <script>window.main();</script>
                    </body>
                </html>`
                );
            }
        }, req.path);
    });

export default server;

wagnerjsilva 2019年02月05日

箱から出してRazzleに問題がないことを確認できます。クリーンインストールをロードし、phantomjsを使用すると、警告は表示されませんでした。これは、おそらくライブラリがインストールしたものであることを意味します。

上記で明らかなことはありますか？

今はガチョウの追跡のようです！ :-)

wagnerjsilva 2019年02月05日

kapture 2019-02-05 at 8 33 42

注：cssを保持し、Razzleを開発モードで上記の分析を行うと、Razzleは開発中にサーバー（クライアントのみ）で.cssスタイルを処理しないため、FOUCが発生する可能性があります。したがって、 .cssファイルを使用している場合にスタイルハイドレーションを使用して適切なSSRを実行していることを完全にテストするには、本番用にRazzleをビルドし、本番サーバーをローカルで実行する必要があります。ただし、サーバーからHTMLの存在を確認するだけの場合は、これを開発モードで実行できます。

jaredpalmer 2019年02月05日

👍6

さて、Razzleとの素晴らしい仕事に感謝します、そして今これに感謝します。私はそれをうまく監査し、報告するつもりです。

wagnerjsilva 2019年02月05日

もちろん、「空の」（空白ではない、エラーです）seoページを最初にチェックするのは、表示するデータをロードするためにページがcomponentDidMountに依存しているかどうかです。 curlを使用してすばやく確認できます。はいの場合、プリロードするにはAfter.jsのようなものが必要です。

mschipperheyn 2019年02月06日

1000msマークの周りに空白のページがある場合、[パフォーマンス]タブを使用してデバッグする方法をアドバイスできますか？私の問題は、アイコンフォントライブラリがサーバーにロードされないことであり、したがって、初期ロード時にこれらの空白の空の正方形が表示されることを知っています...

screen shot 2019-02-11 at 9 57 30 am

andrefox333 2019年02月11日

ああ、私のカスタムフォントはすべて、ずっと後になるまで読み込まれません。 CSSの@ font-face {}を介してフォントをロードしています。

@font-face {
  font-family: 'SFProText';
  font-display: auto;
  src: url('fonts/SFPro/SF-Pro-Display-Regular.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

andrefox333 2019年02月11日

👍1

@jaredpalmer私も同じ問題を抱えています。フォントとアセットがクライアントページに読み込まれません。

アプリケーションのセットアップにwebpack.configファイルを追加していません。これは、リポジトリから複製したものです。リポジトリからコピーを取得してnpmモジュールをインストールした後、npmstartコマンドを実行してアプリケーションの使用を開始しました。
設定に失敗したもの、またはこの問題を解決するために新しいwebpackファイルを使用する必要があるものはありますか？

この問題の解決にご協力ください。

私のApp.cssファイルは次のようになります。
@ font-face {
font-family： 'Roboto-medium';
src：url（ "./ static / fonts / Roboto-Medium-webfont.eot"）;
src：url（ "./ static / fonts / Roboto-Medium-webfont.eot？#iefix"）format（ "embedded-opentype"）、url（ "./ static / fonts / Roboto-Medium-webfont.woff"） format（ "woff"）、url（ "./ static / fonts / Roboto-Medium-webfont.ttf"）format（ "truetype"）; }

@ font-face {
font-family： 'Roboto-regular';
src：url（ "./ static / fonts / roboto-regular-webfont.eot"）;
src：url（ "./ static / fonts / roboto-regular-webfont.eot？#iefix"）format（ "embedded-opentype"）、url（ "./ static / fonts / roboto-regular-webfont.woff"） format（ "woff"）、url（ "./ static / fonts / roboto-regular-webfont.ttf"）format（ "truetype"）; }

ありがとうinadvane :)

bakkiyaraj0530 2019年04月05日

👍5

このページは役に立ちましたか？

0 / 5 - 0 評価

Razzle: サーバーレンダリングのトラブルシューティングを行うにはどうすればよいですか？

最も参考になるコメント

全てのコメント9件

関連する問題