/
Server-side rendering
To view this content, buy the book! 😃🙏
Or if you’ve already purchased.
Server-side rendering
As we mentioned in Background > SSR, server-side rendering often results in faster load times. But if we render our app on the server the same way we render on the client, then all our Apollo Client queries will be in the loading state, and the HTML the server sends to the client will have loading spinners and skeletons everywhere. In most cases, we want the HTML to contain all the GraphQL data from the completed queries, so that the client sees the data immediately. We can do this in six steps:
- Apollo Client makes all queries in our app and waits for them to complete.
- Once complete, we render the app to HTML.
- We get the current state of the Apollo cache.
- We create an HTML document that contains both #2 and #3.
- We send it to the client.
- When the page loads on the client, we create an instance of
ApolloClient
with the #3 cache data.
We go through these steps in the SSR chapter, included in the Pro edition of the book: