├── .gitignore
├── README.md
├── components
├── Header.js
└── List.js
├── data
└── apollo.js
├── package.json
├── pages
├── _app.js
├── _document.js
├── index.js
└── refetch.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Next.js & Apollo GraphQL Server-Side Rendering
2 |
3 | The [recommended Apollo method for Server-Side Rendering in Next.js](https://www.apollographql.com/blog/apollo-client/next-js/next-js-getting-started/) involves duplicating queries, separate code for server and client, and a bunch of added complications.
4 |
5 | This approach uses built-in methods from Next.js and Apollo to server-side render GraphQL queries and fill the Apollo Cache so the client doesn't have to refetch the data.
6 |
7 | See comments in \_document.js and \_apollo.js for the most important bits.
8 |
9 | ## Advantages
10 |
11 | - Relatively simple to implement
12 | - Query as normal with `useQuery`; no duplication or special methods for SSR queries
13 | - No special client-side detection/rendering needed in most cases
14 | - Cache hydration so the client doesn't have to re-query data the server already fetched, but the client-side query & data will update properly with changes.
15 | - Can enable/disable SSR for all queries (ApolloClient `defaultOptions`) or only certain ones ( `useQuery(..., { ssr: true|false })` ) to optimize page delivery
16 |
17 | ## Demo:
18 |
19 | - Live preview: https://xubfl.sse.codesandbox.io/
20 | - Server & Code: https://codesandbox.io/s/github/shshaw/next-apollo-ssr/tree/main/
21 |
22 | ## References:
23 |
24 | - https://nextjs.org/docs/advanced-features/custom-document
25 | - https://www.apollographql.com/docs/react/performance/server-side-rendering/
26 | - https://gist.github.com/Tylerian/16d48e5850b407ba9e3654e17d334c1e
27 | - https://github.com/vercel/next.js/discussions/15736
28 |
29 | To run this example:
30 |
31 | - `npm install` or `yarn`
32 | - `npm run dev` or `yarn dev`
33 |
--------------------------------------------------------------------------------
/components/Header.js:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 |
3 | export default function Header() {
4 | return (
5 |
6 |
7 | Next.js Server-Side Rendering with Apollo GraphQL
8 |
9 |
10 |
11 | Examples:
12 |
14 |
15 |
16 | Data provided by{" "}
17 |
22 | https://api.graphql.jobs/
23 |
24 |
25 |
26 |
27 |
28 |
29 | A simple approach to server-side rendering in Next.js with Apollo
30 | GraphQL, featuring no duplicate queries or complicated client/server
31 | logic, cache hydration and live queries for the client.
32 |
33 |
34 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/components/List.js:
--------------------------------------------------------------------------------
1 | export default function List({ data }) {
2 | return (
3 |
10 | {[...data].map((item) => {
11 | return (
12 |
22 | {Object.entries(item).map(([key, value]) => {
23 | if (typeof value !== typeof "" || key === "__typename")
24 | return null;
25 |
26 | return (
27 |
28 | {key} : {value}
29 |
30 | );
31 | })}
32 |
33 | );
34 | })}
35 |
13 |
14 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
1 | import Document from "next/document";
2 |
3 | import { getDataFromTree } from "@apollo/client/react/ssr";
4 | import { getApolloClient } from "../data/apollo.js";
5 |
6 | class DocumentWithApollo extends Document {
7 | // Reference: https://gist.github.com/Tylerian/16d48e5850b407ba9e3654e17d334c1e
8 | constructor(props) {
9 | super(props);
10 |
11 | /**
12 | * Attach apolloState to the "global" __NEXT_DATA__ so we can populate the ApolloClient cache
13 | */
14 | const { __NEXT_DATA__, apolloState } = props;
15 | __NEXT_DATA__.apolloState = apolloState;
16 | }
17 |
18 | static async getInitialProps(ctx) {
19 | console.clear();
20 |
21 | const startTime = Date.now();
22 |
23 | /**
24 | * Initialize and get a reference to ApolloClient, which is saved in a "global" variable.
25 | * The same client instance is returned to any other call to `getApolloClient`, so _app.js gets the same authenticated client to give to ApolloProvider.
26 | */
27 | const apolloClient = getApolloClient(true);
28 |
29 | /**
30 | * Render the page through Apollo's `getDataFromTree` so the cache is populated.
31 | * Unfortunately this renders the page twice per request... There may be a way around doing this, but I haven't quite ironed that out yet.
32 | */
33 | await getDataFromTree(
22 |
23 | This page's data was fetched on the{" "}
24 | {cached ? "Next.js server" : "client"} .
25 |
26 |
27 |
28 |
24 |
25 | This page's data was fetched on the{" "}
26 | {cached ? "Next.js server" : "client"} .{networkStatus} {" "}
28 |
30 | refetch({
31 | fetchPolicy: "network-only"
32 | })
33 | }
34 | >
35 | Refetch
36 |
37 |
38 |
39 |
40 |