I have a simple article page. I should have an infinite scroll implementation, meaning once a user has reached the bottom of the page, I should load the next article.

How can I render a component after an axios request? I think the good approach is to use a placeholder. I am a rookie on Sitecore JSS, I searched in the doc but I can't find the missing key.

class ArticleContainer extends Component {
    constructor(props) {
        this.state = {
            component: null

    componentDidMount() {

    getNextArticle() {
        const fetchOptions = {
            layoutServiceConfig: { host: config.sitecoreApiHost },
            querystringParams: { sc_lang: 'en', sc_apikey: config.sitecoreApiKey },
            fetcher: dataFetcher

        dataApi.fetchRouteData('/next-article', fetchOptions).then(route => {
                component: route

    render() {
        return (
                {/* This is where I want the new article to be append dynamically */}
                <section>{<Placeholder name="jss-next-article" rendering={this.state.component} />}</section>

data.yml - next article

id: next-article
  pageTitle: Welcome to Article Sitecore JSS
  - componentName: ArticleContainer
      title: title of the article

  • Everything in a placeholder is in one Sitecore request (exception if there are personalization rules e.t.c) so it is not lazy loading at Sitecore site, but you can still lazy load on client side, but if there many articles, I assume that this is not what you are looking for? what is your next article? what is the way you want to configure this?, store the data? Jun 3, 2019 at 14:14
  • By default I have one article using the <ArticleContainer /> component render on page load. The next-article request send the same component than <ArticleContainer />. So this is the same components, I just want to load them one by one. I retrieve the next article correctly, I just don't know how to dynamically render a component via a placeholder. Jun 3, 2019 at 14:27
  • This seems like something that you should be loading and scrolling with a GraphQL query, not Layout Service output. Sep 1, 2021 at 21:47

1 Answer 1


Don't use placeholder for pages, just have a placeholder for the articlecontainer. In articlecontainer just draw all the fetched articles using normal React practices.

Something like.

{this.state.articles.map((a)=><Article key={a.id} data={a})>)}
  • articles in this case could be fetched with a GraphQL query Sep 1, 2021 at 21:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.