NextJS integration: How does the NextJS server interact with the embedded GraphQL server when doing a server-side render?

[gregbrowndev]

Hi,

I'm trying to understand how to create a monolithic NextJS/GraphQL server. I've seen that graphql-yoga integrates well with NextJS and that the GraphQL server can be embedded into a NextJS route. This setup is perfect for client-side rendering (CSR). However, I haven't found much information on what happens during server-side rendering (SSR).

I will play around with this to better understand, but I wanted to ask here first in case others have the same question.

The main question I want to understand is how does the NextJS server interact with the embedded GraphQL server when doing a server-side render?

It seems like there are three options as to where the graphql requests made by the components/pages are routed:

• out onto the internet then back into the NextJS route handler (large latency)
• over localhost:3000 (small latency)
• in-memory to the graphql server (negligible latency)

Ideally, I want the third option for the best performance, but also, because I plan to deploy this app on GCP Cloud Functions, I want to avoid unnecessary function calls.

Any help would be appreciated. I will update when I find some answers.

[gregbrowndev]

So I found this can be achieved through features in the GraphQL client rather than the server. More specifically, Apollo Client allows you to pass in a SchemaLink object in place of where you normally pass the HttpLink object. This allows the client to make an in-memory call directly to the schema and avoid any network calls.

This solution is quite elegant. It also avoids making calls over localhost to loopback. I suspected this could be problematic in a FaaS environment - the link below states that localhost is firewalled on Heroku.

The only issue is now you have two ways of serving the GraphQL queries, directly via ApolloClient and remotely via the graphql-yoga server. Though it does look like the schema created by Yoga can be passed to the ApolloClient (since it expects a graphql-tools schema - presumably this is what Yoga's schema is based on too).
Refs:

• https://www.apollographql.com/docs/react/performance/server-side-rendering/#avoiding-the-network-for-local-queries
• https://www.apollographql.com/docs/react/api/link/apollo-link-schema/

[EmrysMyrddin]

Yes, the problem of apollo-link-schema is that you will skip every plugins you've defined in Yoga. This can for example be your authentication or authorization layer.

Another approach you can use to avoid network latency is to directly call the Yoga instance. Yoga is not an HTTP server, it's an HTTP handler, meaning you can actually use it to execute a request without any HTTP server in front of it.

You can probably customize the fetch function of the HttpLink to either use the default fetch function in client mode, or yogaInstance.fetch in SSR mode.
This will skip the network layer and directly execute the request, but still behave as if it was a normal HTTP request, passing through the same validation and plugins.

[EmrysMyrddin]

Here an example (this is pseudo code, I haven't tested it)

import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
import yoga from './path/to/your/yoga/instance';

const isSSR = typeof globalThis.window === 'undefined'

const graphqlClient = new ApolloClient({
  cache: new InMemoryCache(),
  ssrMode: true,
  link: new HttpLink({
    uri: "http://localhost:4000/graphql",
    fetch: isSSR ? yoga.fetch : fetch
  })
});