Razzle: मैं सर्वर रेंडरिंग का समस्या निवारण कैसे करूं?

को निर्मित 5 फ़र॰ 2019 · 9टिप्पणियाँ · स्रोत: jaredpalmer/razzle

नमस्ते,

हमने एक समस्या देखी है जहां यदि आप Google के खोज कंसोल में लॉग इन करते हैं, और Google के रूप में प्राप्त करते हैं, तो वेबसाइट एक रिक्त पृष्ठ के रूप में प्रस्तुत की जाती है।

मैंने कुछ शोध किया है, और उनमें से कुछ मुझे इस लेख तक ले जाते हैं:

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

यह बहुत संभावना है कि खोज इंजन, और Google स्वयं उसी तरह व्यवहार नहीं करता है, अन्यथा हम अब तक रैंकिंग खो चुके होंगे, फिर भी मैं इस मुद्दे को हल करना चाहूंगा, क्योंकि यह किसी भी वेबसाइट के मालिक को जगाए रखेगा।

मैंने फैंटमज डाउनलोड किया है, इस धारणा के साथ कि यह Google के समान है, और इसे प्रस्तुत करने का प्रयास करने से कई त्रुटियां मिलती हैं:

यह समस्या हल करने में उतनी ही सरल हो सकती है, जितनी कि संकलित किए जा रहे लक्ष्य ब्राउज़रों को बदलना, हालाँकि केवल बैबेल/पॉलीफ़िल को स्थापित करने और आयात करने से काम नहीं चलता।

क्या कोई मुझे यहां सही दिशा में इंगित करने में सक्षम होगा?

stale

स्रोत

wagnerjsilva

👍1

सबसे उपयोगी टिप्पणी

तो मेरा सुझाव (और शायद हमें इसके बारे में दस्तावेज़ों में समस्या निवारण मार्गदर्शिका की आवश्यकता है) server.js , client.js , App.js , और संभावित रूप से जितना हो सके टिप्पणी करना है आपके रैज़ल एप्लिकेशन को "हैलो वर्ल्ड" जैसे राज्य में वापस लाने के लिए आपके वेबपैक के पहलू ओवरराइड (यदि आपके पास कोई है)। मैं यह भी सुनिश्चित करने के लिए रैज़ल के एचटीएमएल टेम्पलेट को वापस अपनी server.js फ़ाइल में कॉपी करने का सुझाव दूंगा ताकि यह सुनिश्चित हो सके कि सभी स्क्रिप्ट बॉक्स से बाहर ठीक से लोड हो गई हैं। एक बार जब यह चल रहा हो, तो क्रोम देव टूल्स खोलें और "प्रदर्शन" टैब पर जाएं, "स्क्रीनशॉट" चेकबॉक्स को चेक करें, फिर रीफ्रेश आइकन दबाएं। नीचे जीआईएफ देखें।

kapture 2019-02-05 at 8 33 42

लक्ष्य यह सुनिश्चित करना है कि टाइमलाइन क्षेत्र में कोई खाली सफेद फ्रेम नहीं है। बिना किसी फ्लैश के एक उचित रेंडर प्राप्त करने के बाद, आपको अपने पुराने कोड को अधिक से अधिक वापस जोड़ना चाहिए। बच्चे कदम उठाएं। यदि आप सावधान नहीं हैं तो यह गड़बड़ करना काफी आसान है।

आपके विशिष्ट मामले के लिए, मैं Google टैग प्रबंधक सामग्री, आपके सभी सीएसएस, साथ ही साथ आप जो भी कोड-विभाजन कर रहे हैं, उसे हटाने के साथ शुरू करूंगा। बस इसे प्रस्तुत करने और पीछे की ओर काम करने के लिए प्राप्त करें। इसके बाद, Redux काम कर रहा है। फिर वापस प्रतिक्रिया-हेलमेट जोड़ें, और फिर, एक बार जब आपको लगता है कि आपने इसे सही कर लिया है, तो लाइटहाउस परीक्षण (ऑडिट टैब) करके दोबारा जांच करें। इस राज्य को एक नई शाखा के लिए प्रतिबद्ध करें ताकि आप भविष्य में इसमें वापस जा सकें। इसके बाद, अपनी एनालिटिक्स स्क्रिप्ट वापस जोड़ें और फिर से रेंडरिंग की जांच करें। अंत में, कोड-विभाजन को वापस जोड़ने का प्रयास करें।

नोट: यदि आप अपना सीएसएस रखते हैं और विकास मोड में रैज़ल के साथ उपरोक्त विश्लेषण करते हैं, तो आपको एक एफओयूसी मिल सकता है क्योंकि रैज़ल विकास के दौरान सर्वर पर .css शैलियों को संसाधित नहीं करता है (सिर्फ क्लाइंट पर)। इस प्रकार, यदि आप .css फ़ाइलों का उपयोग कर रहे हैं, तो यह पूरी तरह से जांचने के लिए कि आप स्टाइल हाइड्रेशन के साथ उचित SSR कर रहे हैं, आपको उत्पादन के लिए रैज़ल का निर्माण करना चाहिए और स्थानीय रूप से प्रोडक्शन सर्वर चलाना चाहिए। हालाँकि, यदि आप केवल सर्वर से अपने HTML की उपस्थिति की जाँच कर रहे हैं, तो आप इसे विकास मोड में चला सकते हैं।

jaredpalmer 5 फ़र॰ 2019

👍6

सभी 9 टिप्पणियाँ

यदि आपका पृष्ठ खाली हो रहा है तो आपने अपनी SSR या जलयोजन योजना को तोड़ दिया है। आपने जो लीक से हटकर वर्णन किया है उससे रैज़ल प्रभावित नहीं है, वास्तव में, इसका उपयोग बीबीसी डॉट कॉम जैसी एसईओ-केंद्रित साइटों पर किया जाता है। क्या आप अपनी सर्वर.जेएस फाइल पेस्ट कर सकते हैं? क्या आप अपना डेटा सर्वर पर ला रहे हैं?

jaredpalmer 5 फ़र॰ 2019

हाय जारेड,

शीघ्र उत्तर के लिए धन्यवाद, हाँ हम एक सर्वर से डेटा प्राप्त करते हैं।

यहाँ मेरा सर्वर है।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 5 फ़र॰ 2019

मैं पुष्टि कर सकता हूं कि बॉक्स के बाहर रैज़ल इससे पीड़ित नहीं है, बस एक क्लीन इंस्टाल लोड किया है और फैंटमज का उपयोग करके कोई भी चेतावनी दिखाई नहीं दी है, जिसका अर्थ है कि यह शायद कुछ ऐसी लाइब्रेरी है जिसे हमने इंस्टॉल किया है।

क्या आपको उपरोक्त में कुछ स्पष्ट दिखाई देता है?

यह इस समय एक जंगली हंस का पीछा करने जैसा लगता है! :-)

wagnerjsilva 5 फ़र॰ 2019

kapture 2019-02-05 at 8 33 42

नोट: यदि आप अपना सीएसएस रखते हैं और विकास मोड में रैज़ल के साथ उपरोक्त विश्लेषण करते हैं, तो आपको एक एफओयूसी मिल सकता है क्योंकि रैज़ल विकास के दौरान सर्वर पर .css शैलियों को संसाधित नहीं करता है (सिर्फ क्लाइंट पर)। इस प्रकार, यदि आप .css फ़ाइलों का उपयोग कर रहे हैं, तो यह पूरी तरह से जांचने के लिए कि आप स्टाइल हाइड्रेशन के साथ उचित SSR कर रहे हैं, आपको उत्पादन के लिए रैज़ल का निर्माण करना चाहिए और स्थानीय रूप से प्रोडक्शन सर्वर चलाना चाहिए। हालाँकि, यदि आप केवल सर्वर से अपने HTML की उपस्थिति की जाँच कर रहे हैं, तो आप इसे विकास मोड में चला सकते हैं।

jaredpalmer 5 फ़र॰ 2019

👍6

ठीक है, रैज़ल के साथ शानदार काम के लिए और अब इसके लिए धन्यवाद। मैं इसे अच्छी तरह से ऑडिट करने और वापस रिपोर्ट करने जा रहा हूं।

wagnerjsilva 5 फ़र॰ 2019

बेशक, किसी भी "खाली" (रिक्त नहीं, यह एक त्रुटि है) एसईओ पृष्ठ पर जांच करने वाली पहली चीज़ है: क्या आपका पृष्ठ प्रदर्शित होने के लिए डेटा लोड करने के लिए componentDidMount पर निर्भर करता है। जल्दी से जाँच करने के लिए आप curl का उपयोग कर सकते हैं। यदि हां, तो आपको प्रीलोड करने के लिए After.js जैसा कुछ चाहिए।

mschipperheyn 6 फ़र॰ 2019

क्या आप सलाह दे सकते हैं कि प्रदर्शन टैब का उपयोग करके डिबग कैसे करें, यदि 1000ms के निशान के आसपास कोई खाली पृष्ठ है? मुझे पता है कि मेरी समस्या एक आइकन फ़ॉन्ट लाइब्रेरी के आसपास है जो सर्वर पर लोड नहीं हो रही है और इस प्रकार यह प्रारंभिक लोड पर इन खाली खाली वर्गों को दिखाती है ...

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

andrefox333 11 फ़र॰ 2019

आह, मेरे सभी कस्टम फोंट बहुत बाद में लोड नहीं हो रहे हैं। मैं अपने फोंट को 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 11 फ़र॰ 2019

👍1

@jaredpalmer मुझे भी यही समस्या है। मेरे क्लाइंट पेज में फ़ॉन्ट्स और एसेट लोड नहीं किए गए हैं।

मैंने अपने एप्लिकेशन सेटअप में कोई webpack.config फ़ाइल नहीं जोड़ी है, जिसे मैंने आपके रेपो से क्लोन किया है। मैंने अभी आपके रेपो से कॉपी ली है और एनपीएम मॉड्यूल स्थापित किया है, फिर मैंने एनपीएम स्टार्ट कमांड चलाकर एप्लिकेशन का उपयोग करना शुरू कर दिया।
कुछ भी जो मैं कॉन्फ़िगर करने से चूक गया या इस समस्या को हल करने के लिए मेरी नई वेबपैक फ़ाइल का उपयोग करना चाहिए?

कृपया इस मुद्दे को हल करने में मेरी मदद करें।

मेरी App.css फ़ाइल इस तरह दिखती है ..
@फॉन्ट फ़ेस {
फ़ॉन्ट-परिवार: 'रोबोटो-माध्यम';
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"); }

@फॉन्ट फ़ेस {
फ़ॉन्ट-परिवार: 'रोबोटो-नियमित';
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"); }

धन्यवाद इनडवेन :)

bakkiyaraj0530 5 अप्रैल 2019

👍5

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Razzle: मैं सर्वर रेंडरिंग का समस्या निवारण कैसे करूं?

सबसे उपयोगी टिप्पणी

सभी 9 टिप्पणियाँ

संबंधित मुद्दों