2

我正在开发一个 Gridsome 应用程序（使用 Vue 构建的 SSG）。我添加了一个搜索页面，并使用自动完成小部件实现了 Algolia 即时搜索。

默认情况下，Gridsome 会延迟加载路由并在服务器端呈现页面，并且由于我使用的即时搜索组件不支持 SSR，因此我将其包装在一个<ClientOnly>组件中。

问题

当我导航到/search它需要一段时间才能渲染组件时，这是因为我立即导航到页面，执行获取内容的脚本会阻塞渲染直到完成。导致糟糕的用户体验。

编码

 <div class="search-page-container">
      <div class="search-field-container">
        <h2><label for="search-field">Search</label></h2>

        <ClientOnly>
          <ais-instant-search :search-client="searchClient" :index-name="INDEX_NAME">
            <ais-autocomplete>
              <div slot-scope="{ currentRefinement, indices, refine }">
                <input id="search-field" type="search" :value="currentRefinement" placeholder="what topic are you looking for?" @input="refine($event.currentTarget.value)" autocomplete="off" />
                <div v-if="currentRefinement">
                  <h4>Articles</h4>
                  <div class="hits">
                    <ul v-for="index in indices" :key="index.label">
                    <li v-show="index.hits.length == 0"><em>No matches...</em></li>
                    <li>
                      <ul>
                        <li v-for="hit in index.hits" :key="hit.objectID">
                          <div>
                            <g-link :to="hit.slug"><ais-highlight attribute="title" :hit="hit"/></g-link>
                            <br>
                            <small class="post-description"><ais-highlight attribute="description" :hit="hit"/></small>
                            <!-- <hr> -->
                          </div>
                        </li>
                      </ul>
                    </li>
                  </ul>
                  </div>
                </div>
                <div class="space-top" v-else> <p> Type in the box to search for articles.. </p></div>
              </div>
            </ais-autocomplete>
          </ais-instant-search>
        </ClientOnly>

      </div>

我想要的是

我希望仅在用户开始输入时进行查询，这样就不会阻止渲染。

4

0 回答 0