Как я могу прочитать предварительно извлеченные данные на стороне сервера с помощью машинописного клиента?

Я использую приведенную ниже функцию для возврата исходной разметки и данных, отображаемых сервером, в случае отсутствия поддержки javascript:

    export const serverRender = async () => {
        const { port, host } = config;
        const resp = await 
    axios.get(`http://${host}:${port}/testData.json`);

        const initialData = resp.data;
        return {
            initialMarkup: ReactDOMServer.renderToString(<App initialData = {initialData} />),
            initialData,
        };
    };

Я передаю эти данные в свой шаблон следующим образом (детали не так важны):

    app.setViewEngine("pug");
    app.use(express.static(path.join(__dirname, "../public")));
    app.use(express.static(path.join(__dirname, "../assets")));
    app.enableCors();
    await app.listen(PORT, () => {
        console.info(`Nest App listening on port ${PORT}`);
    });

В моем шаблоне я использую интерполяцию pug для чтения initialData в объект window в javascript (window.initialData = #{initialData}). Если бы мой клиент был клиентом javascript, я мог бы читать из объекта window вот так: window.initialData, но Typescript не позволяет этого.

Мой вопрос: как лучше всего передать предварительно извлеченные данные и передать их на сторону клиента? Т.е. поэтому я могу сделать что-то подобное, когда я визуализирую клиента:

    /* somehow grab pre-fetched data */
    ReactDOM.hydrate(<App />, document.getElementById("root")); // entry point for webpack

Я не говорю, что это лучший способ (это еще одна причина, по которой я задаю этот вопрос), но в прошлом для небольших проектов с чистым javascript я назначал данные window, как указано выше, а затем в клиентском рендеринге мой react, я сделал что-то вроде этого:

    const initialData = window.initialData;
    ReactDOM.hydrate(<App initialData = {initialData} />, document.getElementById("root")); // entry point for webpack

Это не летает в Typescript

Н/Д

Сообщение об ошибке для случая window: Property 'initialData' does not exist on type 'Window'

Но я все равно хочу найти какой-то другой путь.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
207
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Объявите, как выглядит глобальный объект окна с вашим пользовательским значением initialData:

declare global {
    interface Window { 
        initialData: any; 
    }
}

После того, как вы объявили это, затем:

const initialData = window.initialData;

должно сработать.

Спасибо, это сработало! Из любопытства, есть ли лучший способ, о котором вы знаете?

StarLlama 01.06.2019 01:06

@StarLlama Когда мне приходилось это делать (т.е. получать данные в мое клиентское приложение с сервера), я сохранял данные в атрибут данных, а затем извлекал их на клиенте, используя, например, document.getElementById("yourDivId").dataset.initialData.

Ben Smith 03.06.2019 01:23

Другие вопросы по теме