Skip to content

Commit 05a5bc1

Browse files
Apply suggestions from code review
Co-authored-by: Jerel Miller <jerelmiller@gmail.com>
1 parent 7c36458 commit 05a5bc1

1 file changed

Lines changed: 17 additions & 9 deletions

File tree

docs/source/performance/server-side-rendering.mdx

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,9 @@ const client = new ApolloClient({
6060
});
6161
```
6262

63-
You'll notice that here you provide `ssrMode: true`. This prevents Apollo Client from accidentally polling on the server and tells it to prioritize cache values over network requests when possible.
63+
Provide `ssrMode: true` to prevent Apollo Client from polling on the server. This setting also tells the client to prioritize cache values over network requests when possible.
6464

65-
Note that you also might need to make sure your GraphQL endpoint is configured to accept GraphQL operations from your SSR server (for example, by safelisting its domain or IP). Also keep in mind that on the server, you always have to use absolute URLs for your GraphQL endpoint, as relative network requests can only be made in a browser.
65+
You also might need to configure your GraphQL endpoint to accept GraphQL operations from your SSR server (for example, by safelisting its domain or IP). Use absolute URLs for your GraphQL endpoint on the server, because relative network requests can only be made in a browser.
6666

6767
> It's possible and valid for your GraphQL endpoint to be hosted by the _same server_ that's performing SSR. In this case, Apollo Client doesn't need to make network requests to execute queries. For details, see [Avoiding the network for local queries](#avoiding-the-network-for-local-queries).
6868
@@ -129,9 +129,9 @@ It's important to create an _entirely new instance_ of Apollo Client for each re
129129

130130
### Executing queries with `prerenderStatic`
131131

132-
Because your app uses Apollo Client, some of the components in the React tree probably execute a GraphQL query with the `useQuery` or `useSuspenseQuery` hook. You can instruct Apollo Client to execute _all_ of the queries required by the tree's components with the `prerenderStatic` function.
132+
You can instruct Apollo Client to execute all of the queries executed by the `useQuery` or `useSuspenseQuery` hooks in the React tree's components with the `prerenderStatic` function.
133133

134-
This function rerenders your React tree until no more network requests need to be made. When you use suspenseful hooks (like `useSuspenseQuery`) with a suspense-ready rendering function, this means the tree is rendered once and suspends while network requests happen. When you use non-suspenseful hooks (like `useQuery`), this function renders all components, waits for all requests started by your rendered hooks to finish, and then renders the tree again, until no more requests are made.
134+
This function rerenders your React tree until no more network requests are made. When you use suspenseful hooks (like `useSuspenseQuery`) with a suspense-ready rendering function, the tree is rendered once and suspends while network requests are executed. When you use non-suspenseful hooks (like `useQuery`), this function renders all components, waits for all requests to finish, and then re-renders the tree until no more requests are made.
135135

136136
The function returns a `Promise` that resolves when all result data is ready in the Apollo Client cache and the final render is complete.
137137

@@ -362,7 +362,7 @@ const client = new ApolloClient({
362362

363363
If your GraphQL endpoint is hosted by the same server that you're rendering from, you can optionally avoid using the network when executing your SSR queries. This is particularly helpful if `localhost` is firewalled in the server's environment (e.g., on Heroku).
364364

365-
One option is to use Apollo Link to fetch data using a local GraphQL schema instead of making a network request. To achieve this, when creating an Apollo Client on the server, you could use a [SchemaLink](../api/link/apollo-link-schema/) instead of using `HttpLink`. `SchemaLink` uses your schema and context to run the query immediately, without any additional network requests:
365+
When creating an Apollo Client on the server, use a [SchemaLink](../api/link/apollo-link-schema/) instead of an `HttpLink`. `SchemaLink` uses your schema and context to run the query immediately, without the need for a network request:
366366

367367
```js
368368
import { ApolloClient, InMemoryCache } from "@apollo/client";
@@ -379,19 +379,27 @@ const client = new ApolloClient({
379379

380380
## Selectively disabling query execution during SSR
381381

382-
If you want to prevent a particular query from executing during SSR, you can include `ssr: false` in that query's options. This is useful for queries that should only run on the client side, such as user-specific data that isn't available during SSR.
382+
If you want to prevent a particular query from executing during SSR, use `ssr: false` in that query's options. This is useful for queries that should only run on the client side, such as user-specific data that isn't available during SSR.
383383

384-
When `ssr: false` is set, the component receives a result with `loading: true`, `dataState: "empty"`, and no data during server-side rendering. The query will execute normally once the component hydrates on the client side.
384+
When `ssr: false` is set, the component receives a result with `loading: true`, `dataState: "empty"`, and `data: undefined` during server-side rendering. The query will execute normally once the component hydrates on the client.
385385

386386
```jsx
387387
function ClientOnlyUser() {
388388
const { loading, data } = useQuery(GET_USER_WITH_ID, { ssr: false });
389-
if (loading) return <span>Loading...</span>;
389+
390+
if (loading) {
391+
return <span>Loading...</span>;
392+
}
393+
390394
return <span>User: {data?.user?.name || "Not loaded"}</span>;
391395
}
392396
```
393397
394-
Note that this is different from using `skip: true`, which prevents the query from executing on both the server and client until `skip` is set to `false`. During SSR, `skip: true` results in `loading: false` and `networkStatus: NetworkStatus.ready`.
398+
<Note>
399+
400+
`ssr: false` behaves differently than `skip: true`, which prevents the query from executing on both the server and client until `skip` is set to `false`. During SSR, `skip: true` results in `loading: false` and `networkStatus: NetworkStatus.ready`.
401+
402+
</Note>
395403
396404
## Legacy APIs
397405

0 commit comments

Comments
 (0)