[英]reactjs - fetch as google displays blank page only
我剛剛使用reactjs編寫了我的第一個網站，但當我查看谷歌如何看到我的網站時，我收到以下結果：
我的HTML文件如下所示：
<!DOCTYPE html>
<html>
<head>
<title>MySite</title>
</head>
<body>
<div id="root"></div>
<script async type="text/javascript" src="index.browser.js"></script>
</body>
</html>
我已經停用了所有用於測試的AJAX調用，並且在加載了js文件后立即執行了ReactDOM.render。 JS文件本身是經過編譯，壓縮的，大小不到300 KB（包括所有庫，如反應本身）。
在這一點上，我不明白我可以做哪些更改谷歌正確渲染我的頁面？ 據我所知，反復化的谷歌渲染問題通常來自AJAX調用或在網站本身被渲染和DOM更改之前在應用程序代碼中完成的其他長期工作。 但是在刪除大型庫（除了i18next並做出反應），最小化和壓縮代碼之后，我看不出我能做些什么來顯着提高性能或渲染時間。 PageSpeed Insights是99/100點（桌面，只抱怨我可以最小化html以節省110個字節）。
我的錯誤可能是什么想法？ 服務器端渲染對我來說不是一個合適的選擇。
您可以在此處查看演示頁面： http ： //comparo.com.mx
正如您所看到的，沒有太多 - 但顯示的HTML內容在加載index.browser.js之后立即呈現，這是一個<300KB的文件，因此不應該使谷歌搜索控制台無法正確呈現頁面。
編輯：我的服務器位於歐洲，並且遠離谷歌服務器從美國爬行。 這可能是一個問題嗎？
將babel polyfill添加到您的項目中：
npm install --save babel-polyfill
然后在index.js（入口點）中導入它：
import 'babel-polyfill';
希望這能解決您的問題。
我不確定谷歌是如何看待你的網站的，因為大多數模擬器只是剝離了Javascript。
您使用過https://www.google.com/webmasters/tools/googlebot-fetch嗎？
一般來說，Javascript支持僅限於搜索引擎，所以如果您真的想讓爬蟲為您的站點編制索引，則必須為React實現服務器端呈現。
我使用https://github.com/kriasoft/react-starter-kit來生成http://gifhub.net這是一個有點復雜的經歷，但它最終有效。
還有像NextJS https://github.com/zeit/next.js/這樣的框架，您可以利用這些框架確保您擁有服務器呈現的內容。
第三種方法是使用Google Headless Chrome瀏覽器為抓取工具生成內容https://github.com/GoogleChrome/puppeteer
實施上述選項之一可確保抓取工具查看您想要的所有內容。 依賴Javascript渲染不會給你預期的結果。
在我的一個遺留項目中，我運行Angular.js將動態內容插入到后端呈現的頁面中。 Google抓取工具非常智能，可以讓它呈現動態javascript內容並將其編入索引（例如，該表完全是從Ajax數據中動態呈現的）。
所以我強烈反對它與服務器端渲染問題有關。
我不建議花時間做SSR，因為@AlexGvozden建議 - 這很乏味，尤其是Webpack設置。 甚至可能使用Next.js和Create React App。
這似乎是Google Bot JS引擎的一個已知問題。 我仍然試圖了解究竟是什么問題，但似乎在您的應用中添加'babel-polyfill'可以解決問題。
在“抓取谷歌”的空白頁面上遇到同樣的問題，上面關於babel-polyfill的建議並沒有解決問題所以我做了更多的挖掘：
長話短說，這是對我有用的修復：
npm install --save babel-polyfill npm install --save url-search-params-polyfill npm install --save whatwg-fetch
import 'babel-polyfill'; import 'url-search-params-polyfill'; import 'whatwg-fetch' import React from 'react'; import ReactDOM from 'react-dom';* ...
要讓Google按原樣查看您的頁面，您應該實現服務器端呈現。 在這里通過查看您的代碼它是客戶端呈現，這里瀏覽器使用java腳本來加載您的DOM。
我不知道它是否還是一個問題，但......
對於每個項目，可能有不同的原因。 首先，我建議您嘗試在開發模式下運行項目（包括控制台日志）並使用PhantomJS v2.1.1測試。 結果可以顯示一些有用的錯誤。
接下來你可以看到我的phantomjs樣本（稱為website.js ）：
var system = require('system') var page = require("webpage").create(); var homePage = "http://<link to your localhost>"; var captureName = "result.png"; page.onConsoleMessage = function(msg) { system.stderr.writeLine('console: ' + msg); }; page.onError = function(msg, trace) { var msgStack = ['PHANTOM ERROR: ' + msg]; if (trace && trace.length) { msgStack.push('TRACE:'); trace.forEach(function(t) { msgStack.push(' -> ' + (t.file || t.sourceURL) + ': ' + t.line + (t.function ? ' (in function ' + t.function +')' : '')); }); } console.log(msgStack.join('\\n')); phantom.exit(1); }; page.onLoadFinished = function(status) { var url = page.url; console.log("Status: " + status); console.log("Loaded: " + url); window.setTimeout(function () { page.render(captureName); phantom.exit(); }, 5000); }; page.open(homePage);
順便說一句，結果你會得到與website.js所在目錄相同的result.png快照
嘗試添加瀏覽器填充程序。 請注意，如果您使用Babel編譯代碼並不重要，您仍需要舊版瀏覽器和Google無人機瀏覽器（如Google Bot或PhantomsJS）的無填充瀏覽器。
npm install --save es5-shim es6-shim
// in your frontend/index.js, as early as possible
import 'es5-shim';
import 'es6-shim';
你可以在這里閱讀更多
Reactjs 托管的 PWA 在 android 設備上顯示空白頁，並且在桌面上工作正常。當我添加 webview 時？
[英]Reactjs hosted PWA displays blank page on android device and works fine on desktop .when I added webview?
Google 抓取時返回帶有錯誤意外令牌的空白頁面 =>
[英]Fetch as Google returns blank page with error unexpected token =>
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.