If you’re a Next.js user and are wondering how to use Apollo Client with the app
directory, we have news for you! Read on about our new experimental support for the App Router:
Blog post
Learn about the introduction of @apollo/experimental-nextjs-app-support, an experimental library to simplify the adoption of Apollo Client in Next.js, which makes it easier to use Apollo Client in both Server Components and Client Components.
RFC: The Next.js “App Router”, React Server Component & “SSR with Suspense” story
apollographql:main
← apollographql:pr/RFC-2
opened 11:25AM - 24 Apr 23 UTC
## The RFC
[You can read the rendered RFC here.](https://github.com/apollogr… aphql/apollo-client-nextjs/blob/pr/RFC-2/RFC.md)
### The examples
You can find some example applications in [the examples folder](https://github.com/apollographql/apollo-client-nextjs/tree/main/examples).
* The `polls-demo` is a simple poll app that showcases both Server Components and Client Components in a single app. It shows the difference between using Apollo Client in Server Components and Client Components.
* The `hack-the-supergraph-ssr` example is an example exploring the "SSR and data transporting" angle more in-depth. It also uses the `@defer`-related Links discussed in the last part of the RFC.
You can change the time deferred responses from the server take by adjusting it in the "Demo Settings" in the top-right corner. The link is configured so that any fragment coming in after 100ms will not be part of SSR, but be fetched on the client. Keep in mind that this uses a real network connection, so there might be some network delay on top of the number you choose here.
* The `app-dir-experiments` is more of an "experimenting around" app I used for building the package
## Points to look out for
* Starting the examples for the first time in `next` oftentimes leads to a hydration mismatch. This is due to `useId` not matching up between client and server. I assume that this could be a Next.js bug and have filed a bug report here: https://github.com/vercel/next.js/issues/48284
We track this in this issue in #16
3 Likes