title: How to fix `Warning: Text content did not match. Server: "Some Data" Client: "Loading..."`
body: <p>I'm getting this error on initial load of my SSR application:
  <code>Warning: Text content did not match. Server: "SOME DATA" Client: "Loading..."</code>
  How to initialize client side of the app without setting <code>loading</code> flag to true?</p>
  
  <p>I’m setting up a SSR with react, express and apollo. I get a properly rendered HTML with data from the renderer server, but when client bundle loads up it’s trying to refetch data.
  Hydration is set up and all the data from renderer server is injected into the HTML of the page.</p>
  
  <p>/index.js</p>
  
  <pre><code>&lt;Query query={GET_USERS} variables={queryVariables}&gt;
      {({
          loading,
          error,
          data
      }) =&gt; {
          if (loading) return &lt;p&gt;Loading...&lt;/p&gt;;
          if (error) return `Error: ${error}`;
          return data.users.map(user =&gt; &lt;p key={user.id}&gt;{user.login}&lt;/p&gt;);
      }}
  &lt;/Query&gt;
  </code></pre>
  
  <p>/renderer.js</p>
  
  <pre><code>export default async (req, client) =&gt; {
      const serverSideApp = (
          &lt;ApolloProvider client={client}&gt;
              &lt;StaticRouter location={req.path} context={{}}&gt;
                  &lt;div&gt;{renderRoutes(RoutesList)}&lt;/div&gt;
              &lt;/StaticRouter&gt;
          &lt;/ApolloProvider&gt;
      );
          return getDataFromTree(serverSideApp).then(() =&gt; {
              const content = renderToString(serverSideApp);
  
              return `
                    &lt;html&gt;
                        &lt;head&gt;&lt;/head&gt;
                        &lt;body&gt;
                            &lt;div id="root"&gt;${content}&lt;/div&gt;
                            &lt;script src="bundle.js"&gt;&lt;/script&gt;
                            &lt;script&gt;
  
      window.__APOLLO_STATE__=${serialize(client.extract())}
                            &lt;/script&gt;
                        &lt;/body&gt;
                    &lt;/html&gt;
              `;
      })
  };
  </code></pre>
  
  <p>/server.js</p>
  
  <pre><code>const app = express();
  
  app.use(express.static("public"));
  
  app.get("*", (req, res) =&gt; {
      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) =&gt; res.send(html));
  });
  
  app.listen(3000, () =&gt; {
      console.log("Server is up");
  });
  </code></pre>
  
  <p>/client.js</p>
  
  <pre><code>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(
      &lt;ApolloProvider client={client}&gt;
        &lt;BrowserRouter&gt;
          &lt;div&gt;{renderRoutes(RoutesList)}&lt;/div&gt;
        &lt;/BrowserRouter&gt;
      &lt;/ApolloProvider&gt;,
      document.getElementById("root")
  );
  </code></pre>
  
  <p>I expect client side of the app rehydrate server side values and not to trigger <code>loading</code> flag on initial load.</p>