renderToStringWithData runs twice #1361

ravilution · 2017-11-28T22:46:25Z

Hi,
renderToStringWithData is trying to render the supplied React element twice. Please check the below code and output. I am using node v8.9.0

package.json

{
  "name": "ssr-renders-twice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "apollo-client-preset": "^1.0.3",
    "apollo-server-express": "^1.2.0",
    "express": "^4.16.2",
    "react": "^16.2.0",
    "react-apollo": "^2.0.1",
    "react-dom": "^16.2.0"
  }
}

index.js

var React = require("React");
var express = require("express");
var renderToStringWithData = require("react-apollo").renderToStringWithData;

const app = express();

function App() {
  console.log("inside App");
  return React.createElement("div", null, "app");
}

app.get("/", async (req, res) => {
  console.log("req.url", req.url);
  const reactHTML = await renderToStringWithData(
    React.createElement(App, null)
  );
  res.send(`<!doctype html><html><body>${reactHTML}</body></html>`);
});

app.listen(3000, () => {
  console.log("started at ", new Date().toLocaleString());
});

output

started at  2017-11-28 14:07:57
req.url /
inside App
inside App

The text was updated successfully, but these errors were encountered:

foxCanFly · 2017-11-30T11:20:55Z

The same with await getDataFromTree(bodyComponent);.

ravilution · 2017-11-30T19:58:23Z

Because of this, when I do SSR, I always get html between if(loading){} and not on else if (data){}

ghost · 2018-02-25T21:22:44Z

+1

foxCanFly · 2018-02-26T08:11:24Z

Maybe this could be useful. For me this was happening because of not very obvious usage of Provider which is not only pass functionality or variables inside context but wrap component in another "util" component. And that's fine. So we have to use this ApolloProvider or something like this. Before I just set context manually and had the same problem because I didn't have this additional functionality from ApolloProvide.

ghost · 2018-02-26T09:00:31Z

@foxCanFly can you post an example? Maybe on https://codesandbox.io/?

mkochendorfer · 2018-08-02T00:33:21Z

I have run into the same thing causing various weird unexpected behaviors in my app due to the duel render/constructors. This occurs because getDataFromTree and ReactDOM.renderToString both construct independent instances of the application.

This can lead to really baffling behaviors if you try to build your ApolloClient instance inside of a React component instead of outside of the React app in your SSR code. Specifically it causes the SSR to fail because it builds up all of the data requests in getDataFromTree on the first render/constructor, but then it throws that app away and builds a new one in ReactDOM.renderToString with a fresh ApolloClient built in the constructors of the components again but now with none of the data from the initial tree traversal.

lantos1618 · 2018-10-05T22:26:29Z

Same issue here,

reproduced at
https://github.com/LantosTG/ReactIssueSSRDoubleCall

the issue is in the renderToStringWithData function

export function renderToStringWithData(component) {
    return getDataFromTree(component).then(function () { return ReactDOM.renderToString(component); });
}

// the getDataFromTree will render the react component and then return the renderToString which renders again

this is also shown on the Wiki
https://www.apollographql.com/docs/react/features/server-side-rendering.html

import { getDataFromTree } from "react-apollo"

const client = new ApolloClient(....);

// during request (see above)
getDataFromTree(App).then(() => {
  // We are ready to render for real
  const content = ReactDOM.renderToString(App);
  const initialState = client.extract();

  const html = <Html content={content} state={initialState} />;

  res.status(200);
  res.send(`<!doctype html>\n${ReactDOM.renderToStaticMarkup(html)}`);
  res.end();
});

hwillson · 2019-06-15T10:19:24Z

This should no longer be an issue with current day versions of react-apollo. Thanks!

mkochendorfer · 2019-06-17T17:15:23Z

@hwillson Can you elaborate on how this was fixed/improved?

hwillson · 2019-06-17T22:06:28Z

@mkochendorfer Sure thing; getDataFromTree (which renderToStringWithData is using) was completely re-written in react-apollo 2.3.0. This new implementation has addressed many of the outstanding getDataFromTree / renderToStringWithData issues. Let us know if you're still running into any problems.

mkochendorfer · 2019-06-17T22:09:30Z

@hwillson Thanks for the extra context.

freder mentioned this issue Jun 26, 2018

SSR: instance.fetchData() does not resolve #2136

Closed

hwillson closed this as completed Jun 15, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

renderToStringWithData runs twice #1361

renderToStringWithData runs twice #1361

ravilution commented Nov 28, 2017

foxCanFly commented Nov 30, 2017 •

edited

Loading

ravilution commented Nov 30, 2017

ghost commented Feb 25, 2018

foxCanFly commented Feb 26, 2018 •

edited

Loading

ghost commented Feb 26, 2018

mkochendorfer commented Aug 2, 2018

lantos1618 commented Oct 5, 2018 •

edited

Loading

hwillson commented Jun 15, 2019

mkochendorfer commented Jun 17, 2019

hwillson commented Jun 17, 2019

mkochendorfer commented Jun 17, 2019

renderToStringWithData runs twice #1361

renderToStringWithData runs twice #1361

Comments

ravilution commented Nov 28, 2017

foxCanFly commented Nov 30, 2017 • edited Loading

ravilution commented Nov 30, 2017

ghost commented Feb 25, 2018

foxCanFly commented Feb 26, 2018 • edited Loading

ghost commented Feb 26, 2018

mkochendorfer commented Aug 2, 2018

lantos1618 commented Oct 5, 2018 • edited Loading

hwillson commented Jun 15, 2019

mkochendorfer commented Jun 17, 2019

hwillson commented Jun 17, 2019

mkochendorfer commented Jun 17, 2019

foxCanFly commented Nov 30, 2017 •

edited

Loading

foxCanFly commented Feb 26, 2018 •

edited

Loading

lantos1618 commented Oct 5, 2018 •

edited

Loading