NextJS rendering loading state on the SSR and not the actual content

[SoorajChandran]

I'm new to Next js and was playing around with SSR. I have the following component. When I checked the source of the page, I don't see the actual content but the loading state.

Is getServerSideProps a must use, to render everything at the SSR completely?

The problem I see is that I won't be able to use hooks (especially apollo ones with getServerSideProps)

Is there a nice way around this?

const UserProfilePage: React.FunctionComponent = () => {
  const router = useRouter()

  const { data, loading, error } = useQuery(USER_QUERY, {
    variables: { userName: router.query.userId },
  })

  if (loading || error) {
    return (
      <Layout title="Social bookmarking and curated lists of everything | Sav.to">
        <div className="mt-4">
          <PageLoading />
        </div>
      </Layout>
    )
  }

  if (data) {
    const user: User = data.user
    return (
      <Layout title={`${user ? user.name : ''} | Sav.to`}>
        {user && <UserDetail user={user} />}
      </Layout>
    )
  }

  return null
}

[mjm]

I don't think hooks are the issue here exactly. Other approaches would produce the same issue.

The reason you're seeing this is because server-side rendering, by default, is only going to do a single pass of a render of your application. The first time you render, useQuery isn't going to have fetched any data for your app, so it renders the loading state and starts fetching. But that rendered loading state is what the server is going to return.

Before getServerSideProps, the way you would solve this in Next.js is by implementing getInitialProps on your page or your App component. This implementation would detect if it was on the server, and if it was, it would render the page to trigger the fetches, then wait for the data to be loaded (both Apollo and Relay have ways to do this), render again and return the records in the props. Then the store on the client would get initialized with those records from the initial props, so it also rendered with the content already loaded.

I'm not sure what the right way to do this with getServerSideProps is exactly for GraphQL, but in general, you will need special handling when rendering on the server to get it to wait for data to load and render that data.

I hope this at least helps make sense of what's happening here.

[SoorajChandran]

@mjm I currently made it work with the following code. Not sure if it is the best solution, but it works.

type Props = User

const UserProfilePage: React.FunctionComponent<Props> = (props) => {
  const router = useRouter()
  // This fetches data for client side rendering
  const { data, loading, error } = useQuery(USER_QUERY, {
    variables: { userName: router.query.userId },
  })

  if (error) {
    return (
      <Layout title="Social bookmarking and curated lists of everything | Sav.to">
        <div className="mt-4">
          <PageLoading />
        </div>
      </Layout>
    )
  }

  if (loading) {
    const user: User = props

    return (
      <Layout
        title={`${user ? user.name : ''}'s profile on Sav.to`}
        description={`${user ? user.about : ''}`}
      >
        {user && <UserDetail user={user} />}
      </Layout>
    )
  }

  if (data) {
    const user: User = data.user
    return (
      <Layout
        title={`${user ? user.name : ''}'s profile on Sav.to`}
        description={`${user ? user.about : ''}`}
      >
        {user && <UserDetail user={user} />}
      </Layout>
    )
  }

  return null
}

// This fetches data for server side rendering
export const getServerSideProps: GetServerSideProps = async (context) => {
  const apolloClient = clientFn()

  const response = await apolloClient.query({
    query: USER_QUERY,
    variables: { userName: context.params?.userId },
  })

  const userFromServer = response.data.user
  return { props: userFromServer }
}

export default UserProfilePage

I also had to make some changes to the apollo-client.
This is what it looks like

export const clientFn = ({ initialState, ctx } = {}) =>
  new ApolloClient({
    link: createHttpLink({
      fetch,
      uri: GRAPHQL_URL,
      headers: {
        authorization: ctx ? `Bearer ${nextCookie(ctx).token}` : `Bearer ${token}`,
      },
    }),
    cache: new InMemoryCache()
      //  rehydrate the cache using the initial data passed from the server:
      .restore(initialState || {}),
  })

export default withApollo(clientFn)

The problem I have now is that all the pages are being SSR even if I don't use getServerSideProps. I'm guessing this is a different issue altogether though. Like probably 'next-with-apollo' using getInitialProps internally.

[eric-burel]

It works for sure but you lose all the benefits of Apollo hooks in the first place, one them being tying data fetching to components instead of pages.

[eric-burel]

Hi, I can reproduce a similar issue with the withApollo example, despite getDataFromTree being called. The hook is not run during this call and therefore the Apollo cache is never updated. So when the actual server render happens, it's empty and I get a loading state.