Suspense and server side rendering

[strothj]

Hello,

I was curious if you knew what the behavior would be like if this package was used with server side rendering.

My understanding is that Suspense is not currently supported when server side rendering. I think it shows loading state for Suspense components. I'm not sure how the interaction will play out when used in combination with the data collector from Apollo Server.

Do you happen to have any insight on this? Thank you.

[trojanowski]

Hi @strothj

Yes, Suspense is not currently supported with SSR. The React team is working on a new server-side renderer with support for it, but it's going to be released (if I remember correctly) probably in the next year. However, we should be able to implement support for SSR in react-apollo-hooks even without it (similar how it was done it apollographql/react-apollo#2533). The idea is that in the SSR mode we use an additional React context which provides, e.g. an array of promises to resolve and instead of throwing promises (as with suspense in the client mode), we add them to that array. Our SSR rendering function would invoke renderToString, and if there are any promises in the array it will wait for them to be resolved (repeating the process until everything will be resolved).

[atoy40]

Hi @trojanowski,
Is it really a good idea to throw a promise and enforce the use of Suspense ? the result contains all you need to check on the component (for example the 'loading' key).
I 've commented it, and it's imho more easy to use. But may be I missed something :)

Thks
Anthony.

[trojanowski]

Hi @atoy40
I think the usage of Suspense has many benefits:

1. It's going to be a default way to manage loading indicators in React. It's already used by React.lazy, and it will be used by [react-cache](unstable right now).
2. In the future, it will provide server-side rendering support out of the box (the way react-apollo does it right now is a kind of hack).
3. It's usually less code, especially in more advanced configurations - e. g. you can lazy load JS bundles, GraphQL queries, images etc and support loading state only in one place of code, e. g.:

<Suspense fallback={<LoadingIndicator />}
  <MyLazyPageComponent />
</Suspense>

where

const MyLazyPageComponent = React.lazy(() => import('./MyPageComponent'));

and there are GraphQL queries inside of MyPageComponent there is no need to add additional checks if bundle and GraphQL queries are loaded.

Alternative example with react-router v4:

<Router>
  <Suspense fallback={<LoadingIndicator />}
    <Switch>
      <Route path="/" exact component={Index} />
      <Route path="/about/" component={About} />
      <Route path="/users/" component={Users} />
    </Switch>
  </Suspense>
</Router>

That way you don't have to check loading state in each of route components - it's enough to do it in one place, higher in the tree.

I 've commented it, and it's imho more easy to use.

If there's a case which can be better solved without using suspense I'm OK with adding an option to disable it (but I'd like suspense enabled to be the default behavior).

BTW you'll find more info about suspense in this video: https://www.youtube.com/watch?v=ByBPyMBTzM0&t=1779s

[atoy40]

@trojanowski Thanks for this reply, after some tests since my message ... I agree :) it's easy to use and will become something standard.

[langpavel]

I created #27 where you can easily configure if you want suspense by default
I think about adding configuration to context but I didn't like it

[geirman]

I was playing with this in a NextJS app that was already setup for SSR, so that <Query> was run before the page was delivered to the client. I would never see "Loading..." on initial page load. Swapping out the query render prop with the hooks caused "Loading..." to show briefly on each full refresh. Is there something I need to be doing differently to get the SSR to work?

[langpavel]

As stated above, suspense is not ready for SSR. I'm excited about too, but I'm waiting...