question: server rendering for seo

[albsa]

Hey @adamsoffer,

Thanks for this great package, however got a question, what about server side rendering as you actually don't run get inital props when using the gql tags and useQuery hooks for data fetching.

How is this handled from SSR? because if I refresh the page it's still loading on page load and there is delay, no instant showing of the data.

[albsa]

Sorry, I made a mistake by only wrapping the _app.js with withData instead of each page component. If the page component is wrapped also with the HOC the expected result is given.

[adamsoffer]

@albsa ah yeah I should definitely make that more clear in the docs that the HOC is meant to be used on pages only. Thanks for the feedback.

[albsa]

@adamsoffer that would be great and more clear! However, still is something not clear for me, do we need to do something with _app.js?

Because now _app.js is wrapped with ApolloProvider

import React from 'react'
import App from 'next/app'
import { ApolloProvider } from '@apollo/react-hooks';
import withData from '../lib/apollo-config';
....

class MyApp extends App {


  render () {
    const { Component, pageProps, apolloClient } = this.props
    return (
      <ApolloProvider client={apolloClient}>
        <LayoutWrapper>
          <Component {...pageProps} />
        </LayoutWrapper>
      </ApolloProvider>
    )
  }
}

export default withData(MyApp);

Or should we only wrap the page components and do nothing with the _app.js?

[adamsoffer]

You should only wrap the page components. You don't have to touch _app.js.

[albsa]

@adamsoffer clear, thanks for the quick answers and enjoy your weekend!!

[albsa]

hey @adamsoffer here I am again.
Got a confusing thing here.

I am using the catch all route to render certain components depending on the outcome of the graphql data.
However, it seems that the components are not rendering server side, and also nog the catch-all page component.

For example.

I have this [...path].js file in my pages folder.
This file is matched to routes of no specific folder or file exists for it in the pages folder.

So if [...patch].js is reached, the graphql call will check wether the URL path is a product type, category type of static page.

Based on that it will fetch the data from Magento 2 for example.
Therefore it will render the category, product or page component.

However, this is not rendering on the server side, but only client side.

Als in my menu component, I render the menu items based on the category items that are fetched by graphql from Magento 2, also this is not a page component so the withData has no effect here, the menu is rendering on the client side only.

Hopefully you understand what I mean.

Do you know what solution would fit here to realize the server side rendering?