Как исправить `Предупреждение: текстовое содержимое не соответствует. Сервер: "Некоторые данные" Клиент: "Загрузка ..." `
Я получаю эту ошибку при начальной загрузке моего приложения SSR:
Warning: Text content did not match. Server: "SOME DATA" Client: "Loading..."
Как инициализировать клиентскую часть приложения, не устанавливая для флага loading значение true?
Я настраиваю SSR с помощью response, express и apollo. Я получаю правильно обработанный HTML-код с данными с сервера визуализации, но когда пакет клиента загружается, он пытается повторно получить данные. Установлена гидратация, и все данные с сервера рендеринга вводятся в HTML-код страницы.
/index.js
<Query query = {GET_USERS} variables = {queryVariables}>
{({
loading,
error,
data
}) => {
if (loading) return <p>Loading...</p>;
if (error) return `Error: ${error}`;
return data.users.map(user => <p key = {user.id}>{user.login}</p>);
}}
</Query>
/renderer.js
export default async (req, client) => {
const serverSideApp = (
<ApolloProvider client = {client}>
<StaticRouter location = {req.path} context = {{}}>
<div>{renderRoutes(RoutesList)}</div>
</StaticRouter>
</ApolloProvider>
);
return getDataFromTree(serverSideApp).then(() => {
const content = renderToString(serverSideApp);
return `
<html>
<head></head>
<body>
<div id = "root">${content}</div>
<script src = "bundle.js"></script>
<script>
window.__APOLLO_STATE__=${serialize(client.extract())}
</script>
</body>
</html>
`;
})
};
/server.js
const app = express();
app.use(express.static("public"));
app.get("*", (req, res) => {
const httpLink = createHttpLink({
uri: "http://10.10.10.139:4000/",
fetch
});
const client = new ApolloClient({
link: httpLink,
ssrMode: true,
cache: new InMemoryCache()
});
renderer(req, client).then((html) => res.send(html));
});
app.listen(3000, () => {
console.info("Server is up");
});
/client.js
const httpLink = createHttpLink({
uri: "http://10.10.10.139:4000/"
});
const client = new ApolloClient({
link: httpLink,
cache: new InMemoryCache().restore(window.__APOLLO_STATE__)
});
ReactDOM.hydrate(
<ApolloProvider client = {client}>
<BrowserRouter>
<div>{renderRoutes(RoutesList)}</div>
</BrowserRouter>
</ApolloProvider>,
document.getElementById("root")
);
Я ожидаю, что клиентская сторона приложения будет обновлять значения на стороне сервера и не запускать флаг loading при начальной загрузке.
@ Сидд привет! Еще нет. Пришлось переключиться на другой проект, поэтому не было времени углубляться в этот вопрос. А ты? Вы поняли, в чем проблема?
Ответы 2
Из документации react-apollo раздел Пропуск запросов для SSR представляет механизм, который позволяет разработчикам явно помечать компонент, чтобы он либо загружал данные для этого компонента на сервер, или отображает компонент на сервере в состоянии «загрузка».
Попробуйте следующее:
// index.js
<Query query = {GET_USERS} ssr = {false} variables = {queryVariables}>
{({
loading,
error,
data
}) => {
if (loading) return <p>Loading...</p>;
if (error) return `Error: ${error}`;
return data.users.map(user => <p key = {user.id}>{user.login}</p>);
}}
</Query>
При использовании nextjs с styled-jsxhttps://github.com/vercel/styled-jsx эта ошибка может возникнуть, если вы опустите атрибут jsx в теге style.
Хорошо (атрибут jsx обязателен):
<style jsx>{`...`}</style>
Плохой (опустить атрибут jsx):
<style>{`...`}</style>
Отсутствие атрибута jsx вызовет в консоли браузера следующее:
react-dom.development.js Warning: Text content did not match. Server: "..." Client: "..."
Привет, я столкнулся с той же проблемой - вы нашли решение, чтобы исправить это предупреждение?