Integrated SSR #83

jbaxleyiii · 2016-06-24T19:30:18Z

active work on #54

// no changes to client :tada:

// server application code (integrated usage)
import { renderToStringWithData } from "react-apollo/server"

// during request
const markup = await renderToStringWithData(app)


// server application code (custom usage)
import { getDataFromTree } from "react-apollo/server"

// during request
getDataFromTree(app, ).then(({ initialState, store, client }) => {
  // markup with data from requests
  const markup = ReactDOM.renderToString(app);
});

The client does have the option to ignore SSR for particular queries

const WrappedElement = connect({
  mapQueriesToProps: () => ({
    data: { query, ssr: false }, // wont block the SSR
  })
})(Element);

getDataFromTree

The getDataFromTree method takes your react tree and returns an object with initialState, the apollo client (as client) and the redux store as store.
initialState is the hydrated data of your redux store prior to app rendering. Either initialState or store.getState() can be used for server side rehydration.

renderToStringWithData

The renderToStringWithData takes your react tree and returns a promise that resolves to your stringified tree with all data requirements. It also injects a script tag that includes window. __APOLLO_STATE__ which equals the full redux store for hyrdration.

Server notes:

When creating the client on the server, it is best to use ssrMode: true. This prevents unneeded force refetching in the tree walking.

Client notes:

When creating new client, you can pass initialState: __APOLLO_STATE__ to rehydrate which will stop the client from trying to requery data.

@stubailo @tmeasday this needs more tests, but I thinks its pretty close

I'd like to experiment with adding a streaming API so you can stream the html to the client. But I'll probably do this after the API refactor

Vanuan · 2016-06-27T16:58:40Z

ssr: true, // block during SSR render

What's this and why it's needed?

jbaxleyiii · 2016-06-27T17:13:52Z

@Vanuan that is an option for each query that tells react-apollo to actually fetch the data during rendering on the server

Vanuan · 2016-06-27T17:18:24Z

What's getData for then?

Vanuan · 2016-06-27T17:20:27Z

I mean, why can't it be true by default?

Vanuan · 2016-06-27T17:25:51Z

So it means that some queries aren't meant to be executed during ssr?

Vanuan · 2016-06-27T19:44:40Z

I believe, the most flexible API would be like this:

import {  getQueries, runQueries } from "react-apollo"

let queries = getQueries(app, /* props to be pased as ownProps */);

/*
  filter out queries you don't want on server side
  according to routing or some other logic
*/
queries = ...

runQueries(queries).then((data) => {
  // in redux you dispatch query action
  // store.dispatch(querySucceeded({data}));
  // or update the store somehow else
  // fetched data is saved in the store 
  // in plain React, you'd just provide data to properties
  // or use Apollo's store
  const markup = ReactDOM.renderToString(app);
  // Provider provides stored state to connected components during rendering
}, (err) => {
  // dispatch and render errors
});

Of course, dispatching can be hidden inside apollo, but it would be hard to follow and unclear whether it's dispatched or not.

Vanuan · 2016-06-27T19:52:36Z

src/getData.ts

+    return queries;
+  }
+
+  const rawQueries = getQueriesFromTree(tree);


Would be much more flexible if getQueriesFromTree is exported

@Vanuan I think we would export it for sure once it is working correctly 👍

I think exporting a few options to allow you to build your own rendering process, or just use react-apollo would be best:

i.e:

getQueries, runQueries for a fully custom solution

getData which runs all queries tagged as SSR

a renderWithData that returns back the full SSR payload with the initial state injected into the markup.

jbaxleyiii · 2016-06-28T11:31:11Z

@Vanuan this is still very much a WIP

tmeasday · 2016-06-29T02:56:40Z

src/server.ts

+export function getPropsFromChild(child, defaultProps = {}) {
+  const { props, type } = child;
+  let ownProps = assign(defaultProps, props);
+  if (type && type.defaultProps) ownProps = assign(defaultProps, type.defaultProps, props);


Is this how react does it internally?

pretty much yes, if I'm reading this correctly: https://github.com/facebook/react/blob/49238b944046abf086ba80ab5e984ce8a8175a1d/src/isomorphic/classic/element/ReactElement.js#L207-L214

jbaxleyiii · 2016-07-12T02:44:23Z

This could use a lot more testing for sure, but I'm going to cut a release so we can start trying it out in some applications. I've added tests for a few tree structures ranging from simple to mildly complex with mixed classes and components.

gauravtiwari · 2016-07-12T07:16:39Z

@jbaxleyiii Awesome work. I can give it a try 👍

jbaxleyiii · 2016-07-12T17:45:13Z

@gauravtiwari 🎉 thanks so much! I'd use the 0.3.17 version (has a bug fix)

gauravtiwari · 2016-07-13T08:51:04Z

@jbaxleyiii I gave it a try and it seems that I am missing something. Could you a post a minimal setup example for SSR - including component and all (both client and on server) ?

import React, from 'react';
import { connect } from 'react-apollo';

const SomeComponent = (props) => {
    const { data } = props;
    return (
      <div className="nav">
        something to render
      </div>
    );
}

function mapQueriesToProps({ ownProps, state }) {
  return {
    data: `{ someQuery }`
  };
};

const SomeComponentWithData = connect({
  mapQueriesToProps,
})(SomeComponent);

export default SomeComponentWithData;

// Where to pass initial state or props?
 const htmlResult = await renderToStringWithData(SomeComponentWithData);

Is it possible to just use server to hydrate the store on server and then pass it on to client after render? ( Like react default server side rendering. It renders the component on server and then when the client detects the component it binds all component events etc. )

tmeasday · 2016-07-14T03:11:41Z

Hey @jbaxleyiii -- worked great for me in this commit: https://github.com/apollostack/saturn/commit/9943e3b72e625bf70efc76f594ca4f0de8c4bef9 for an app which did SSR without queries on the server.

However, for githunt, it just hangs: https://github.com/apollostack/GitHunt/tree/saturn-ssr

I see some output from (I'm guessing) react-apollo:

[0] { shouldForceFetch: false }
[0] -------fetching query { kind: 'Document',
[0]   definitions:
[0]    [ { kind: 'OperationDefinition',
[0]        operation: 'query',
[0]        name: [Object],
[0]        variableDefinitions: [],
[0]        directives: [],
[0]        selectionSet: [Object] } ] }
[0] -------fetching query { kind: 'Document',
[0]   definitions:
[0]    [ { kind: 'OperationDefinition',
[0]        operation: 'query',
[0]        name: [Object],
[0]        variableDefinitions: [Object],
[0]        directives: [],
[0]        selectionSet: [Object] } ] }

gauravtiwari · 2016-07-14T13:30:55Z

Hey @jbaxleyiii

So, I tried again and it seems that, for NON-JS environment this won't work (unless the JS environment supports callbacks). The response returned is always empty as the server doesn't wait for callback to be finished.

jbaxleyiii · 2016-07-14T14:59:43Z

@tmeasday I've seen it hang every so often for my stuff locally too. I'll be working on that today / tomorrow but would love some help if you can spare!

@gauravtiwari ah that makes sense! I need to find a way to make the getData sync for a lot of js use cases anyway. Would it work for you then?

tmeasday · 2016-07-14T23:37:52Z

@jbaxleyiii I'd love to help although I'm not sure I'll have too much time today. I would say that for githunt it consistently, rather than occassionally hangs. Ping me on slack if I can help though.

tmeasday · 2016-07-15T00:35:12Z

@jbaxleyiii Ok, I couldn't help myself. There are two problems that are causing the issue, when I hack around them, it works great!:

If there's a problem in getDataFromTree, the error is silently dropped. We should add a catch handler to the promise here: https://github.com/apollostack/react-apollo/blob/master/src/server.ts#L185
The error comes because this line fails: https://github.com/apollostack/react-apollo/blob/master/src/server.ts#L128

The reason is that (yay, thanks npm!) I end up with 2 copies of apollo-client installed in githunt, as I was npm-linking saturn (so it had its own copy).

So it actually works if you run my saturn-ssr branch of githunt without linking anything (yay!), but I think in general it's risky to check types like that unless you set a peerDependency on apollo-client[1] to ensure you get the "app's version" of apollo-client as a dep.

Oh, and as an aside on deeper calls to getQueriesFromTree you implicitly don't check the type, as you allow the context from the component to override here: https://github.com/apollostack/react-apollo/blob/master/src/server.ts#L123

I'm not sure what the best solution is. One option is to just not check the type :/

[1] In short npm is terrible at helping you with this problem. I could rant for a while about it.

jbaxleyiii · 2016-07-15T00:37:46Z

@tmeasday this is awesome! I can fix those!

gauravtiwari · 2016-07-15T04:12:04Z

@jbaxleyiii Yeah, I think so, because rendering react component normally on the server works and returns the response so, as long as the response from react-apollo is synchronous it should work.

Vanuan · 2016-07-17T03:24:09Z

src/server.ts

+        let fieldsToNotShip = ['minimizedQuery', 'minimizedQueryString'];
+        for (let field of fieldsToNotShip)  delete initialState[key].queries[queryId][field];
+      }
+      initialState = encodeURI(JSON.stringify(initialState));


I assume encodeURI is wrong? It'll result in
Uncaught SyntaxError: Unexpected token %

markudevelop · 2016-09-25T17:39:25Z

Hey guys, anyone had any luck doing this with Meteor?

jbaxleyiii self-assigned this Jun 24, 2016

zol added the in progress label Jun 24, 2016

Vanuan reviewed Jun 27, 2016
View reviewed changes

jbaxleyiii force-pushed the ssr-api branch from da01a4e to d89dd2d Compare June 28, 2016 21:58

jbaxleyiii mentioned this pull request Jun 28, 2016

Server rendering and hydrating apollo store #22

Closed

tmeasday reviewed Jun 29, 2016
View reviewed changes

James Baxley added 11 commits July 11, 2016 19:18

fix merge conflict

680bfb5

ITS WORKING

d7062d7

turn back on all the client tests

e2de911

improved tree walking, ssr: false inclusion, and api exporting

e58f5e9

update gql tag

98a8958

fix test

d3e33cb

bump gzip size

3e44d73

lint fixes

eca9e97

naming changes

b28bd4b

notes from ssr meeting

e4d6178

reworked tree walking and context support from feedback

9524e15

jbaxleyiii force-pushed the ssr-api branch from 81d0956 to 9524e15 Compare July 12, 2016 02:06

build bump

edaac19

jbaxleyiii merged commit 2847115 into master Jul 12, 2016

jbaxleyiii deleted the ssr-api branch July 12, 2016 02:49

zol removed the in progress label Jul 12, 2016

jbaxleyiii mentioned this pull request Jul 12, 2016

Server-side rendering: Create an API for async data fetching #54

Closed

stubailo mentioned this pull request Jul 12, 2016

Integrate SSR? saikat/react-apollo-starter-kit#1

Open

Vanuan reviewed Jul 17, 2016
View reviewed changes

jbaxleyiii mentioned this pull request Jul 17, 2016

Are there plans to support server side rendering? #114

Closed

adamsoffer mentioned this pull request Jul 21, 2016

Can we add SSR integration to docs? #119

Closed

renovate bot mentioned this pull request Feb 7, 2018

chore(deps): update dependency rollup-plugin-babel-minify to v4 #1629

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Integrated SSR #83

Integrated SSR #83

jbaxleyiii commented Jun 24, 2016 •

edited

Loading

Vanuan commented Jun 27, 2016

jbaxleyiii commented Jun 27, 2016

Vanuan commented Jun 27, 2016

Vanuan commented Jun 27, 2016

Vanuan commented Jun 27, 2016

Vanuan commented Jun 27, 2016 •

edited

Loading

Vanuan Jun 27, 2016 •

edited

Loading

jbaxleyiii Jun 27, 2016

jbaxleyiii Jun 27, 2016

jbaxleyiii commented Jun 28, 2016

tmeasday Jun 29, 2016

jbaxleyiii Jul 12, 2016

jbaxleyiii commented Jul 12, 2016

gauravtiwari commented Jul 12, 2016

jbaxleyiii commented Jul 12, 2016

gauravtiwari commented Jul 13, 2016 •

edited

Loading

tmeasday commented Jul 14, 2016

gauravtiwari commented Jul 14, 2016

jbaxleyiii commented Jul 14, 2016

tmeasday commented Jul 14, 2016 •

edited

Loading

tmeasday commented Jul 15, 2016 •

edited

Loading

jbaxleyiii commented Jul 15, 2016

gauravtiwari commented Jul 15, 2016

Vanuan Jul 17, 2016

markudevelop commented Sep 25, 2016

Integrated SSR #83

Integrated SSR #83

Conversation

jbaxleyiii commented Jun 24, 2016 • edited Loading

getDataFromTree

renderToStringWithData

Server notes:

Client notes:

Vanuan commented Jun 27, 2016

jbaxleyiii commented Jun 27, 2016

Vanuan commented Jun 27, 2016

Vanuan commented Jun 27, 2016

Vanuan commented Jun 27, 2016

Vanuan commented Jun 27, 2016 • edited Loading

Vanuan Jun 27, 2016 • edited Loading

Choose a reason for hiding this comment

jbaxleyiii Jun 27, 2016

Choose a reason for hiding this comment

jbaxleyiii Jun 27, 2016

Choose a reason for hiding this comment

jbaxleyiii commented Jun 28, 2016

tmeasday Jun 29, 2016

Choose a reason for hiding this comment

jbaxleyiii Jul 12, 2016

Choose a reason for hiding this comment

jbaxleyiii commented Jul 12, 2016

gauravtiwari commented Jul 12, 2016

jbaxleyiii commented Jul 12, 2016

gauravtiwari commented Jul 13, 2016 • edited Loading

tmeasday commented Jul 14, 2016

gauravtiwari commented Jul 14, 2016

jbaxleyiii commented Jul 14, 2016

tmeasday commented Jul 14, 2016 • edited Loading

tmeasday commented Jul 15, 2016 • edited Loading

jbaxleyiii commented Jul 15, 2016

gauravtiwari commented Jul 15, 2016

Vanuan Jul 17, 2016

Choose a reason for hiding this comment

markudevelop commented Sep 25, 2016

jbaxleyiii commented Jun 24, 2016 •

edited

Loading

Vanuan commented Jun 27, 2016 •

edited

Loading

Vanuan Jun 27, 2016 •

edited

Loading

gauravtiwari commented Jul 13, 2016 •

edited

Loading

tmeasday commented Jul 14, 2016 •

edited

Loading

tmeasday commented Jul 15, 2016 •

edited

Loading