Client-Side Fetching

Just like server-side fetching, you have to use services. But for client-side, you do not have to touch getInitialProps() of a page-level component.

Fetch Component

NextWeb.js comes with a <Fetch /> component which makes client-side data fetching super easy. It lets you focus on the data instead of handling loading and error status.

Here are available props of the <Fetch /> component:

Name	Description
service	A service function that returns a promise
onError	A callback function to handle an error
preloader	React Component / Element to render while loading

Page Component

import { Fetch } from '@lib/api'

import * as ArticleService from '@features/article/services'

function ArticleDetailPage() {
  return (
    <div>
      <Fetch service={() => ArticleService.getArticles({ limit: 10 }))}>
        {({ data }) => <ArticleLatest data={data} />}
      </Fetch>
    </div>
  )
}

UI Component

function ArticleLatest({ data }) {
  return (
    <section>
      <h2>Latest Articles</h2>
      <div>
        {data.map(article => (
          <article key={article.id}>
            <h3>
              <Link route="article-detail" params={{ id: data.id }}>
                <a>{data.title}</a>
              </Link>
            </h3>
            <div dangerouslySetInnerHTML={{ __html: data.excerpt }} />
          </article>
        ))}
      </div>
    </section>
  )
}