Я использую приведенную ниже функцию для возврата исходной разметки и данных, отображаемых сервером, в случае отсутствия поддержки 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'
Но я все равно хочу найти какой-то другой путь.





Объявите, как выглядит глобальный объект окна с вашим пользовательским значением initialData:
declare global {
interface Window {
initialData: any;
}
}
После того, как вы объявили это, затем:
const initialData = window.initialData;
должно сработать.
@StarLlama Когда мне приходилось это делать (т.е. получать данные в мое клиентское приложение с сервера), я сохранял данные в атрибут данных, а затем извлекал их на клиенте, используя, например, document.getElementById("yourDivId").dataset.initialData.
Спасибо, это сработало! Из любопытства, есть ли лучший способ, о котором вы знаете?