Почему при загрузке компонента не вызывается getInitialProps?

Question

[Евгений]

Делаю переход с главной страницы на страницу "технологии":

render() {
        return (
            <Link href={{pathname: '/technology', query: {technology: this.props.title}}}>
                <a
                    ref={this.getLessonBlockRef}
                    className='lessonBlock'
                    style={{backgroundColor: this.props.backgroundColor,}}
                >
                    { this.props.title }
                </a>
            </Link>
        );
    }

Но страница "технологии" ака компонент не вызывает getInitialProps:

TechnologyPage.getInitialProps = async ({store, req, query}) => {
    console.log("GET INITIAL PROPS PAGE TECHNOLOGY!");
    try {
        const response = await axios.get(`${req.protocol}://${req.get('Host')}/api/getTechnologySections`, {params: {technology: query.technology}});
        store.dispatch({type: 'getTechnologySections', payload: response.data});
    } catch (error) {
        console.log(error);
    }
};

Но! Если я захожу на страницу "технологии" напрямую через адресную строку (вбиваю туда путь к этой странице), то всё срабатывает. Почему так? Кто может объяснить такое странное поведение?

Answer 1

[Евгений]

В общем решение такое:

1. Когда первый раз загружаешь приложение, то оно грузится с сервера. И данные по всем урлам берутся с сервера. В дальнейшем всё берётся с клиента.

2. Такой код рабочий:

TechnologyPage.getInitialProps = async ({store, req, query}) => {
    try {
        let response = null;
        if (process.browser) {
            response = await axios.get(`${window.location.protocol}/api/getTechnologySections`, {params: {technology: query.technology}});
        } else {
            response = await axios.get(`${req.protocol}://${req.get('Host')}/api/getTechnologySections`, {params: {technology: query.technology}});
        }
        store.dispatch({type: 'getTechnologySections', payload: response.data});
    } catch (error) {
        console.log(error);
    }
};

Так надо делать в каждом компоненте.

Comments

[Vann Damm]

А почему вы не используете Route? И в зависимости от линка рендерить потом компонент?! Только вот не могу понять какие вы данные хотите получать от клиента при первом заходе?

[Евгений]

Vann Damm, Sorry за долгий ответ) Да. У меня есть страница как сущность, но пользователь может на неё зайти с разных url и в зависимости от конкретного url будет подгружаться соответствующее содержимое.