Правильный способ получения данных с помощью рендеринга на стороне сервера (Next.js, когда использовать componentDidMount и когда использовать componentWillMount) - PullRequest
Новая
       46

Правильный способ получения данных с помощью рендеринга на стороне сервера (Next.js, когда использовать componentDidMount и когда использовать componentWillMount)

0 голосов
/ 03 января 2019

Я использую Next.js, на странице _app.js (где мы устанавливаем общее состояние веб-приложения) у меня есть 2 типа данных, которые мне нужно иметь в заголовке (так для каждого компонента).

1) Первый тип - это информация заголовка, эта информация должна отображаться до загрузки приложения.Я буду использовать get getInitialProps для вызова конечных точек и помещения их в реквизиты, а затем в componentWillMount, чтобы добавить их в состояние.

2) Второй тип - это данные для компонента поиска, так какданные, и я не возражаю против их загрузки, пока приложение уже визуализировано, так как оно не отображается в первом пользовательском визуале.Поэтому я полагаю, что здесь гораздо предпочтительнее использовать componentDidMount и асинхронно вызывать конечную точку, которая выбирает данные объекта поиска, чем добавлять настройку состояния с ним.

Цель этого вопроса двойная:

1) Обзор - я правильно об этом думаю или я что-то упустил?

2) Вопрос - теперь, когда данные загружаются после первого рендеринга, я передаю данные следующим образом: _app.js -> Layout -> Menu -> SearchBar, поэтому мой вопрос, в моем searchBar мне нужно сделать что-то вроде 

componentDidMount() {
    this.setState({ options: this.props.searchBarSource })
}

Но, поскольку _app.js заполняет эти данные с помощью асинхронного вызова, не будетЗначит ли это, что я всегда получу пустой объект?WWW, как правильно решить эту проблему?Если я установлюTimeOut примерно на 3 секунды, а затем установлю данные, это нормальное решение или очень хакерское и есть лучшие способы?

1 Ответ

0 голосов
/ 03 января 2019

То, что вы пытаетесь сделать, имеет смысл. Переходя к NextJS, вы должны очень тщательно продумать, какие данные должны загружать серверную часть, а какие нет.

Вот несколько указателей:

  1. Нет необходимости setState в компоненте поиска, вы можете используйте this.props.searchBarSource в качестве Kunukn упомянутых.

    [Примечание. Если вы объединяете getInitialProps и клиентскую сторону (неглубокая маршрутизация), когда пользователь переходит на новый клиентский маршрут, initialProps будет неопределенным. Обходное решение может заключаться в хранении initialProps в state или локальном хранилище.]

  2. Смысл getInitialProps - загрузить асинхронные данные до компонент монтируется. Вы всегда получите разрешенный Promise на componentDidMount, поэтому ваш this.props.searchBarSource никогда не будет быть пустым (или, вернее, pending).

...