Server-Side Fetching
When you want to fetch some data, you have to communicate with API via services. For server-side, just call the service inside getInitialProps()
of a page-level component.
Page Component
import * as ArticleService from '@features/article/services'
function ArticleDetailPage({ data }) {
return (
<div>
<ArticleDetail data={data} />
</div>
)
}
ArticleDetailPage.getInitialProps = async ({ query }) => {
const data = await ArticleService.getArticleById(query.id)
return { data }
}
UI Component
function ArticleDetail({ data }) {
return (
<article>
<h1>{data.title}</h1>
<div dangerouslySetInnerHTML={{ __html: data.body }} />
</article>
)
}