search

apollographql / apollo-client-nextjs

Apollo Client support for the Next.js App Router
https://www.npmjs.com/package/@apollo/experimental-nextjs-app-support
MIT License
352 stars 25 forks source link

Difference between this and only using @apollo/client #218

Closed gervitz closed 2 months ago

gervitz commented 2 months ago

Hey, I am not sure I quite understand the need for this package when app directly with @apollo/client seems to work fine. Definitely not trying to make "a point" or anything, I'm genuinely curious as we're planning on using app directory in our existing project that uses @apollo/client.

phryneas commented 2 months ago

Next.js uses "streaming SSR". That means that your components are not only rendered in the Browser, but for every initial visit to your webpage, all your client components also render on the server.

The problem with that is that there is no "natural" way to transport data that was fetched during SSR on the server to the Browser.

So your Server makes all the requests, maybe even just renders a "loading" state and then the Browser takes over rendering and makes all the same requests again. Which doubles the time of your initial page load and makes every network requests happening there twice.

This package takes over that "data transportation" aspect and ensures that queries only happen once - on the server for useSuspenseQuery, and on the browser for useQuery (because the server will not wait for the result in this case).

gervitz commented 2 months ago

Fantastic! Thank you very much for the quick reply!

github-actions[bot] commented 2 months ago

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.