Реагирование на стороне сервера и на стороне клиента не бесшовно

Question

Реагирование на стороне сервера и на стороне клиента не бесшовно

7

Сначала страница была отображена сервером, а затем на стороне клиента/браузера Javascript script повторно отобразил всю страницу!
Я не думаю, что так оно и должно быть, так как это очень плохой пользовательский опыт.

Одна вещь, которую я заметил, это то, что атрибут data-reactid моего корневого элемента, отображаемый сервером, имеет некоторый хеш, например .2t5ll4229s, и все дочерние элементы имеют это как префикс, например. .2t5ll4229s.0 (первый ребенок). Принимая во внимание, что на стороне браузера data-reactid есть .0 для корневого элемента и .0.0 для первого ребенка.
Если data-reactid действительно является виновником здесь, есть ли способ установить для него значение выбора как eric123 как для стороны клиента, так и для сервера.

Если data-reactid не является виновником здесь, как мне сделать создание рендеринга на сервере и на стороне клиента React seamless, то только некоторые элементы должны быть повторно отображены на стороне клиента, а не все!?

Мой шаблон index-server-local.html:

...
<body>
    <div id="content" class="container-fluid wrapper no-padding-left no-padding-right">
        {{{reactHtml}}}
    </div>
    <script src="bundle.js"></script>
</body>
...

My server.js:

server.get('*', function (req, res) {
        console.log('request url', req.url);
        log.debug('routes are', JSON.stringify(routes));
        res.header("Access-Control-Allow-Origin", "*");
        match({routes, location: req.url}, (error, redirectLocation, renderProps) => {
    if (renderProps) {
        let htmlStr = React.renderToString(<RoutingContext {...renderProps} />);
        res.render('index-server-local', { reactHtml: htmlStr });    
    }
}

My browser.js:

React.render(<Router history={history} routes={routeConfig} />, document.getElementById('content'));

Я использую response-router 1.0.0 и React 0.13.3.

ericn 26 апр. 2016, в 07:55

Источник

Теги:

reactjs

express

react-router

1 ответ

Ещё вопросы

David Guan · Answer 1 · 2016-04-26T11-46-00.000Z

Нам нужно сериализовать данные (или состояние) на стороне сервера и отправить их на клиентскую сторону для десериализации, в противном случае данные на стороне клиента будут отличаться от того, как сервер отобразит его. он будет перезагружен наверняка. Одно исключение: чистая статическая страница, в этом случае React рекомендует нам использовать renderToStaticMarkup

Подобно renderToString, за исключением того, что это не создает дополнительные атрибуты DOM, такие как data-react-id, которые React использует внутренне. Это полезно, если вы хотите использовать React как простой статический генератор страниц, так как удаление лишних атрибутов может сэкономить много байтов.

Итак, как мы сериализуем - десериализуем? Вот простая версия: в вашем шаблоне index-server-local.html:

   <script src="bundle.js"></script>

в

   <script dangerouslySetInnerHTML={{{{__html: 'window.__data=' + JSON.stringify({key: 'value'})}}}} />
   <script src="bundle.js"></script>

И с клиентской стороны мы теперь можем использовать __datadata. как сопоставить данные с вашим компонентом по вашему выбору.

Я рекомендую Reudx для этого:

   createStore(browserHistory, initialState)

И затем

   <Provider store={store}>
     { component }
   </Provider>

Спасибо @David Guan, у меня будет способ передать значение с сервера на браузер, не беспокойтесь об этом. Однако как мы можем получить префикс хеша на стороне сервера? Я не понимаю, о чем вы говорите, как сериализация и десериализация могут помочь мне здесь
@eric 'префикс хеша'. Вы используете hashHistory? Это не будет работать с рендерингом на стороне сервера.