Next.js App Router x @apollo/client

Self introduction Yoshiki Kurihara (@kuriyosh) Work experience Yuimedi (software engineer) AWS (cloud support engineer) Skills TypeScript Node.js AWS

Agenda What is Next.js App Router What is @apollo/client Cache optimization in app router Server side Client side

What is Next.js App Router React Server Component call API closer to data source reduce JS sent to client Stream SSR get page earlier without waiting entire page etc...

What is @apollo/client GraphQL client library Client side cache

Rendering phase in App Router React Server component Client component (server side) Client component (client side)

Query phase

Challenge optimize cache Server side want to share a cache with multiple server components one apollo client cannot be used globally Client side needs to share cache in two runtimes (server/client)

Note Currently experimental support Can not share RSC & client component cache

@apollo/experimental-nextjs-app-support For server components Create a client instance between server components For client components Hydrate query result executed in server side to browser cache

Server side

Server side Create a client instance between server components

const { getClient } = registerApolloClient(() => { return new NextSSRApolloClient({ cache: new NextSSRInMemoryCache(), link: new HttpLink({ uri: ENDPOINT, }), }); }); const QueryFromServer = async ({ index }) => { const { data } = await getClient().query({ query: userQuery }); ... }; const Page = () => { return (

How to provide RSC cache sharing Use React.cache for providing client (registerApolloClient) React.cache enables caching callback function for each request Ref: https://zenn.dev/cybozu_frontend/articles/react- cache-and-nextjs

Client side

Client side Hydrate query result executed in server side to browser cache

No content

"use client"; const SuspenseQueryUser = ({ children }) => { const result = useSuspenseQuery(userQuery); ... }; const QueryUser = ({ children }) => { const result = useQuery(userQuery); ... }; const Page = () => { // call query user only once return ( ); };

How to provide cache hydration Use ServerInsertedHTMLContext (useServerInsertedHTML ) Insert HTML to client arbitrary HTML into the stream

Recap @apollo/experimental-nextjs-app-support provide optimized cache in app router Create a client instance between server components → Use React.cache Hydrate query result executed in server side to browser cache → Use ServerInsertedHTMLContext (useServerInsertedHTML )

No content