Работа с асинхронными API-интерфейсами в рендеринге сервера

Кроме того, мы можем настроить это, как мы хотим. В этом случае мы меняем код статуса и заголовок в зависимости от нашего контекста.

Первый рендер

Внутри вашего кода вы должны знать, что вы работаете вне сервера или браузера, и в идеале вы хотите иметь комплексный контроль над этим. С React Router вы получаете статическую контекстную поддержку, и это здорово, поэтому мы будем ее использовать. Сейчас мы только что добавили объект данных и данные запроса, как мы узнали из Next.js. Наши API-интерфейсы различаются для сервера и клиента, поэтому вам необходимо предоставить серверный API-интерфейс, предпочтительно с интерфейсом, аналогичным интерфейсу API на стороне клиента:

 const context = {data: {}, head: [], req, api} const store = configureStore() renderToString( <provider store={store}> <staticrouter location={req.url} context={context} > <app></app> </staticrouter> </provider> ) 

Второй рендер

Сразу после вашего первого рендеринга мы просто возьмем эти ожидающие обещания и подождем, пока эти обещания не будут выполнены, а затем повторно выполним рендеринг, обновив контекст:

 const keys = Object.keys(context.data) const promises = keys.map(k=>context.data[k]) try { const resolved = await Promise.all(promises) resolved.forEach((r,i)=>context.data[keys[i]]=r) } catch (err) { // Render a better page than that? or just send the original markup, let the front end handle it. Many options here return res.status(400).json({message: "Uhhh, some thing didn't work"}) } const markup = renderToString( <provider store={store}> <staticrouter location={req.url} context={context} > <app></app> </staticrouter> </provider> ) 

Приложение

Быстрый переход от нашего сервера к коду приложения: в любом из наших компонентов, которые имеют подключение к маршрутизатору, теперь мы можем получить следующее:

 class FirstPage extends Component { async componentWillMount(){ this.state = {text: 'loading'} this._handleData('firstPage') } async _handleData(key){ const {staticContext} = this.props if (staticContext && staticContext.data[key]){ const {text, data} = staticContext.data[key] this.setState({text, data}) staticContext.head.push( <meta name="description" content={"Some description: "+text}/> ) } else if (staticContext){ staticContext.data[key] = this._getData() } else if (!staticContext && window.DATA[key]){ const {text, data} = window.DATA[key] this.state = {...this.state, text, data} window.DATA[key] = null } else if (!staticContext) { const {text, data} = await this._getData() this.setState({text, data}) } } async _getData(){ const {staticContext} = this.props const myApi = staticContext ? staticContext.api : api const resp = await butter.post.list() const {data} = resp.data const {text} = await myApi.getMain() return {text, data} } render() { const text = this.state.text return ( <div className='FirstPage'> {text} </div> ) } } 

Вау, это много сложного кода. На этом этапе вы, вероятно, захотите использовать более релейный подход, когда вы разделяете свой код извлечения данных на другой компонент.

К этому компоненту добавляются вещи, с которыми вы, вероятно, знакомы — шаг рендеринга и шаг componentWillMount . Четырехступенчатый оператор if обрабатывает различные состояния — предварительная выборка, пост-выборка, рендеринг сохранителя, рендеринг почтового сервера. Мы также добавляем в голову после загрузки наших данных.

Наконец, есть шаг получения данных. В идеале, ваш API и база данных имеют одинаковый API, что делает выполнение одинаковым. Возможно, вы захотите поместить их в действие в Thunk или Saga, чтобы сделать его более расширяемым.

За дополнительной информацией обращайтесь к статье « Рендеринг React на стороне сервера » и Рендеринг React на стороне сервера репозитория . Помните, что вам все равно нужно обрабатывать состояние, когда ваши данные не загружаются! Вы будете выполнять рендеринг сервера только при первой загрузке, поэтому вы будете показывать экраны загрузки на последующих страницах.

Измените index.html для добавления данных

Нам нужно отправить любые предварительно выбранные данные как часть нашего запроса страницы, поэтому мы добавим тег script:

 <script> window.DATA = {data:{}} // It doesn't really matter what this is, just keep it valid and replaceable </script> 

порция

Затем нам нужно добавить его в наш поиск и заменить. Тем не менее, HTML использует очень простой скрипт поиска тегов, поэтому вам нужно кодировать его в base-64, если у вас есть теги скрипта. Также не забывайте о наших бирках!

 // earlier on const headMarkup = context.head.map(h=>( renderToStaticMarkup(h) )).join('') // then render const RenderedApp = htmlData.replace('{{SSR}}', markup) .replace('{{head}}', headMarkup) .replace('{data:{}}', JSON.stringify(new Buffer(JSON.stringify(context.data)).toString('base64'))) if (context.code) res.status(context.code) res.send(RenderedApp) 

Мы также обрабатываем изменения кода состояния — например, для 404 — поэтому, если у вас есть страница 404, вы можете просто сделать это:

 class NoMatch extends Component { componentWillMount(){ const {staticContext} = this.props if (staticContext){ staticContext.code = 404 } } render() { return ( <div> Sorry, page not found </div> ) } } 

Резюме

Если вы не уверены, что делаете, просто используйте Next.js. Он предназначен для рендеринга на стороне сервера и универсальных приложений, или если вы хотите гибко делать все вручную, так, как вы хотите. Примером может быть, если у вас есть выборка данных в подкомпонентах, а не на уровне страницы.

Надеюсь, эта статья помогла вам на вашем пути! Не забудьте проверить репозиторий GitHub для работающей реализации.