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

검색 엔진과 fetch as google 자체가 같은 방식으로 작동하지 않을 가능성이 매우 높습니다. 그렇지 않으면 지금쯤 순위가 떨어졌을 것입니다. 그럼에도 불구하고 이 문제를 해결하고 싶습니다. 웹사이트 소유자가 깨어 있기 때문입니다.

phantomjs를 다운로드했는데 Google과 fetch가 같다고 가정하고 렌더링하려고 하면 여러 오류가 반환됩니다.

이 문제는 컴파일되는 대상 브라우저를 변경하는 것처럼 간단하게 해결할 수 있지만 단순히 babel/polyfil을 설치하고 가져오기가 작동하지 않습니다.

누구든지 여기에서 올바른 방향으로 나를 가리킬 수 있습니까?

stale

출처

wagnerjsilva

👍1

가장 유용한 댓글

따라서 내 제안(그리고 이에 대한 문서에서 문제 해결 가이드가 필요할 수 있음)은 server.js , client.js , App.js 및 잠재적으로 Razzle 애플리케이션을 "hello world"와 같은 상태로 되돌리기 위해 webpack의 여러 측면을 재정의합니다(있는 경우). 또한 Razzle의 HTML 템플릿을 server.js 파일로 다시 복사하여 모든 스크립트가 상자에서 제대로 로드되었는지 확인하는 것이 좋습니다. 실행되면 Chrome 개발 도구를 열고 "성능" 탭으로 이동하여 "스크린샷" 확인란을 선택한 다음 새로 고침 아이콘을 누릅니다. 아래 GIF를 참조하세요.

kapture 2019-02-05 at 8 33 42

목표는 타임라인 영역에 빈 흰색 프레임이 없는지 확인하는 것입니다. 플래시 없이 적절한 렌더링을 얻은 후에는 이전 코드를 점점 더 추가해야 합니다. 걸음마를 떼세요. 이것은 주의하지 않으면 엉망이 되기 쉽습니다.

귀하의 특정 사례에 관해서는 모든 Google 태그 관리자 항목, 모든 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일

안녕하세요 Jared,

신속한 답변에 감사드립니다. 예, 서버에서 데이터를 가져옵니다.

여기 내 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일

물론 "비어 있는"(공백이 아니라 오류임) 검색엔진 최적화 페이지에서 가장 먼저 확인해야 할 사항은 페이지가 표시할 데이터를 로드하기 위해 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 모듈을 설치한 다음 npm start 명령을 실행하여 응용 프로그램을 사용하기 시작했습니다.
이 문제를 해결하기 위해 구성하기 위해 놓친 것이 있거나 새 웹팩 파일을 사용해야 합니까?

이 문제를 해결하도록 도와주세요.

내 App.css 파일은 다음과 같습니다.
@글꼴 얼굴 {
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-family: 'Roboto-regular';
src: url("./static/fonts/robot-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 댓글

관련 문제