Fetching data on client side after routing

[iksent]

Hello! I have a similar problem to this one: https://github.com/adamsoffer/next-apollo/issues/54

Everything works just fine, when open any page at the first time - all requests are done at the server side. But when trying to navigate from page to page, the requests are done at the client side.

I tried to use requests at the root pages components - same result. And tried to wrap pages components withApollo - same result.

Some details:

1. I am using TypeScript with Codegen, so all requests are hooks (useQuery from @apollo/client), like:

const AboutPage = () => {
  const { loading, error, data } = useAboutPageQuery()
  ...
}

2. Also I wrapped _app.js component with withApollo, because I need one request's data for all pages.

3. My withApollo.ts:

import { withApollo } from 'next-apollo'
import ApolloClient from 'apollo-boost'

const API_URL = process.env.API_URL || 'http://localhost:1337'

const apolloClient = new ApolloClient({
  uri: `${API_URL}/graphql`,
})

export const withSsrApollo = (PageComponent: any) => {
  // @ts-ignore
  return withApollo(apolloClient)({ ssr: true })(PageComponent)
}

[adamsoffer]

Hey @iksent ! I'm a bit confused by the issue you're encountering. This is the intended behavior of next (first page request is rendered server side and subsequent requests are handled by client).

[iksent]

Yes, you are right: this is how getInitialProps works (Server side for the first load, then client side).

Do you know if this is OK for SEO? Google crawlers open all <Link /> elements as a new page, right?

[adamsoffer]

Yeah since every page is sever rendered it’s good for SEO. On Nov 10, 2020, 22:38 -0800, Ilya Belousov notifications@github.com, wrote:

Yes, you are right: this is how getInitialProps works (Server side for the first load, then client side). Do you know if this is OK for SEO? Google crawlers open all elements as a new page, right? — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.