SEO for Dynamic URL

Using Preloaded Data

You can Preload the Data from routes in following way:

const routes = [
  {
    path: "/blog",
    exact: true,
    layout: DefaultLayout,
    component: BlogListing,
    preLoadData: async ({ api }) => {
      return api.fetch("https://www.atyantik.com/wp-json/wp/v2/posts", { swcache: 20000 });
    },
  },
  {
    path: "/blog/:id",
    layout: DefaultLayout,
    component: BlogPost,
    preLoadData: async ({match, api}) => {
      const { params } = match;
      return api.fetch(`https://www.atyantik.com/wp-json/wp/v2/posts/${params.id}`, { swcache: 20000 });
    },
  }
];

export default routes;

in the above image you can see that the data from the api request has been provided to the component as preLoadedData. You can then use it in your component using: this.props.preLoadedData

Why PreLoadedData is required ?

The scenario is very common, I need to show a blog post suppose with id 123 and we need to call Async API to do that. When it is rendered via server we receive blank details as API is still executing. To solve this issue we use PreLoadedData. It is mainly used to get the data indexed for SEO when data to be SEO'd is dynamic and depends on URL. The PreLoadedData fetches the data before the component loads, hence when the search engine crawlers crawl the page, the components have the data present with them which can be used on componentDidMount.