Rapport de recherche sur l'état de la recherche sur site dans l'enseignement supérieur avec The Chronicle of Higher Education | Télécharger le rapport
Annexe A Démo
Rapport de recherche sur l'état de la recherche sur site dans l'enseignement supérieur avec The Chronicle of Higher Education | Télécharger le rapport
Barre de menu
Fermer

6 décembre 2023

Kevin Montgomery

|

7 min de lecture

Créez une recherche de site attrayante avec SearchStax Site Search et les composants d'interface utilisateur de recherche pour React

Avec le version récente de Search UI Kit Créer une fonctionnalité de recherche de site attrayante et efficace dans une application native ou un front-end dynamique est encore plus simple. SearchStax Site Search inclut déjà API REST de recherche de site – mais notre nouveau Rechercher des composants d'interface utilisateur pour React gérez l'interaction et l'authentification du backend afin que vous puissiez commencer à créer sans avoir à implémenter une autre API.

Voyons comment reconstruire notre propre Documentation de recherche sur le site SearchStax Site web en une plateforme headless basée sur React et Drupal, incluant la recherche sur le site. Voici les différentes plateformes, frameworks et modules utilisés dans la création.

  • Recherche sur le site SearchStax – Site Search gère l'indexation et la recherche de contenu ainsi que l'API pour les composants de l'interface utilisateur de recherche
  • Drupal – Le CMS Drupal alimentera le flux de travail de gestion de contenu
  • JSON:API – Les modules JSON:API exposeront la navigation et le contenu de base du site au front-end
  • Réagir – Le front-end React gérera les demandes de navigation des utilisateurs et restituera l’interface et le contenu
  • Interface utilisateur matérielle – Les composants MUI rationalisent le développement et la thématisation de l'interface utilisateur

Vous pouvez créer votre propre environnement sans tête en clonant notre Dépôt sans tête de SearchStax DocsCe référentiel comprend un environnement Docker pour le développement Drupal et React qui est préchargé avec le front-end sans tête et l'instance Drupal avec le contenu de la documentation.

Pourquoi passer au Headless avec Drupal et React ?

React est devenu l'un des frameworks front-end les plus répandus, notamment pour offrir des expériences front-end dynamiques et engageantes. Si la création avec React peut être plus rapide et offrir des interfaces hautement interactives, il lui manque de nombreuses fonctionnalités essentielles pour fournir du contenu web statique « standard » comme celui de Drupal, WordPress, Sitecore et d'autres systèmes de gestion de contenu. Comme de nombreux frameworks front-end, React s'appuie souvent sur un back-end REST ou GraphQL qui fournit du JSON hautement structuré, contrairement au HTML entièrement formaté.

En allant sans tête avec votre CMS, cependant, peut vous offrir les fonctionnalités de publication d'un CMS sans les inconvénients de la gestion de l'état côté serveur et du rendu. Votre équipe de développement peut fournir de meilleures fonctionnalités avec une vitesse de publication plus rapide en dissociant l'édition de contenu et le déploiement des fonctionnalités front-end, afin que les deux processus puissent se dérouler à leur propre rythme.

Voyons comment Drupal et React peuvent fonctionner ensemble avec SearchStax Site Search pour un site de documentation technique interactif et facile à gérer.

Flux d'informations entre Drupal, React et SearchStax Site Search

Passer au headless signifie généralement que le front-end devra gérer l'état de l'utilisateur séparément du back-end (au lieu d'utiliser des paramètres, des cookies, des en-têtes de requête ou d'autres méthodes pour indiquer l'état de l'utilisateur lors d'une requête d'URL). L'utilisation du module JSON:API avec Drupal expose plusieurs points de terminaison pour les menus et la navigation du site, les alias d'URL et les nœuds de contenu.

Lors du chargement initial de l'application React, elle demande les différents menus de Drupal ainsi que les alias d'URL afin de créer la navigation de base du site, puis de charger le contenu correspondant à l'URL demandée. React peut ensuite demander le contenu complet de la page, traiter les balises intégrées, puis afficher et mettre à jour l'interface.

SearchStax Site Search peut indexer le contenu de Drupal via le intégration native et prend également en charge l'exploration D'autres sources de contenu et sites peuvent ainsi être inclus dans l'index. Les fonctionnalités de recherche de site peuvent être intégrées à React grâce à nos composants d'interface de recherche, ce qui permet de les utiliser et de les afficher dans toute l'application.

Découplage de Drupal – Headless avec JSON:API

Drupal est une excellente plateforme pour un site headless, car elle offre une édition et une création de menus simplifiées, ainsi qu'une haute disponibilité pour servir d'API de contenu pour votre interface utilisateur. Les éditeurs de contenu peuvent toujours accéder et modifier le contenu en toute sécurité dans Drupal, et configurer la navigation du site avec des menus dont les mises à jour sont immédiatement disponibles dans l'interface utilisateur React.

L'utilisation des API Drupal pour la configuration du contenu et du site simplifie le front-end et évite d'avoir à coder en dur des éléments tels que le texte des liens, les URL ou le contenu long.

  • Menus – La navigation principale, le pied de page et les autres menus du site peuvent être gérés et mis à jour dans Drupal. L'application React peut être configurée pour récupérer les menus appropriés aux différents composants de la page, selon les besoins.
    drupalsite.com/jsonapi/menu_link_content/menu_link_content
  • Alias d'URL L'utilisation de react-router-dom dans React permet de personnaliser la gestion et la navigation des URL afin que votre interface se comporte comme prévu lors de la requête d'une URL. Le contenu Drupal possède des identifiants Drupal internes mappés à des alias d'URL lisibles (par exemple, /blog/updates/headless).
  • Contenu de la page – Le contenu Drupal est accessible via l’ID Drupal lors de l’utilisation de l’API. L’application React devra donc rechercher l’alias d’URL pour trouver l’ID de nœud approprié, puis demander le contenu de la page.

Indexation du contenu

Recherche sur le site SearchStax s'intègre nativement à Drupal Ainsi, les index de recherche sont immédiatement mis à jour dès l'ajout ou la mise à jour de contenu. SearchStax Site Search inclut des fonctionnalités de personnalisation de la recherche, notamment la modélisation de la pertinence, la saisie semi-automatique et les suggestions de recherche associées, le facettage, le filtrage, le tri et l'analyse. Ces fonctionnalités sont directement implémentées dans le package Search UI Components for Reach et peuvent être entièrement personnalisées, stylisées et étendues dans React.

Réaction pleine de contenu

React encourage la réutilisabilité et le développement basé sur des composants, contrairement au HTML entièrement formaté rendu côté serveur, simplement injecté dans une zone d'une page web. ne permet pas de charger facilement du HTML d'une API vers un composant en raison de problèmes de sécurité ainsi que d'interférences potentielles lors du rendu ou de la réponse au DOM virtuel.

En utilisant le package html-to-react Permet d'intercepter des balises HTML spécifiques de l'API Drupal afin de les transformer en composants React. Cela résout les problèmes de code HTML mal formé et garantit que React est pleinement conscient de tous les éléments présents dans l'application.

Composants de base

Le Application React dans notre exemple suit des conventions similaires à la mise en page des blocs de Drupal : navigation principale, sous-navigation de gauche et pied de page du site enroulé autour du contenu de la page.

Application

Le composant d'application racine Il établira la présentation et le routage de base de l'application React. Il chargera les menus du site et les alias d'URL pour le rendu de base du site ou la navigation globale (par exemple, l'en-tête ou le pied de page).
				
					
    <div classname="App">
      <themeprovider theme="{theme}">
        <appbar position="fixed">
          <toolbar>
            <link to="/">
              <box
                component="img"
                src="https://demo.searchstax.com/wp-content/uploads/2022/02/logo.svg"
              />
            </Link>
            <sitenav />
            <searchbar section="{section}" />
          </toolbar>
        </appbar>
          <routes>
            <route path="/">
              <route index element="{<Docs" url="/home" navmenu="{navMenu}" section="{section}" />} />
              <route path="search" element="{<Search" />} />
              <route path="*" element="{<Docs" url="{location.pathname}" navmenu="{navMenu}" section="{section}" />} />
            </route>
          </routes>
        <footer />
      </themeprovider>
    </div>

Résultats de recherche à l'aide des composants de l'interface utilisateur de recherche

La recherche sur le site étant une fonctionnalité universelle, elle peut être affichée dans toute l'application. Les entrées de recherche peuvent être intégrées à la navigation globale ou au pied de page. Les résultats de recherche peuvent également être affichés en superposition globale, afin d'être disponibles sur chaque page.
				
					<SearchstaxWrapper searchURL={config.searchURL} suggesterURL={config.suggesterURL} trackApiKey={config.trackApiKey} searchAuth={config.searchAuth} initialized={() => {}} beforeSearch={beforeSearch} afterSearch={afterSearch} authType={config.authType} router={{ enabled: true }} language={config.language} > <Stack spacing={1}> <InputWidget /> <RelatedSearchesWidget /> <Stack direction="row"> <OverviewWidget /> <SortingWidget /> </Stack> <Stack direction="row"> <FacetsWidget /> <Stack> <ExternalPromotionsWidget /> <ResultWidget /> </Stack> </Stack> <PaginationWidget /> </Stack> </SearchstaxWrapper>

Page

Le Composant de page Il surveillera les mises à jour d'URL et trouvera l'ID de nœud approprié parmi les alias d'URL, puis demandera le contenu de la page. Si l'URL demandée n'est pas associée à une page Drupal spécifique, elle peut être ignorée ou traitée comme une requête d'URL normale (hors React). Selon la configuration du site, le front-end peut nécessiter le chargement de menus, balises, blocs, champs ou autres éléments supplémentaires.
				
					void fetchArticleFromID(drupalPath.attributes.path.replace(&#039;/node/&#039;,&#039;&#039;)).then((data: article) =&gt; { document.title = data.data[0].attributes.title; const htmlInput = data.data[0].attributes.body.value; const isValidNode = () =&gt; { return true; }; const processNodeDefinitions = ProcessNodeDefinitions(); const processingInstructions = [ { shouldProcessNode: (node: any) =&gt; { return node.name &amp;&amp; node.name === &#039;a&#039;; }, processNode: (node: any, _children: any, index: number) =&gt; { return React.createElement(React.Fragment, {key: index,}, [
          <a
            key="{index}"            href="/fr/{node.attribs.href}/"            onclick="{(e:" react.mouseevent<htmlanchorelement, mouseevent>) =&gt; { handleLink(e, node.attribs.href); }} &gt;{node.children[0].data}</a>
        ]); } }, { shouldProcessNode: () =&gt; { return true; }, processNode: processNodeDefinitions.processDefaultNode, }, ]; setReactContent(Parser().parseWithInstructions(htmlInput, isValidNode, processingInstructions)); });

Composants Drupal et React

L'utilisation de html-to-react permet au contenu et au formatage HTML de rester dans Drupal tout en assurant un rendu correct dans React. Le module html-to-react permet également d'intercepter des balises HTML spécifiques de Drupal pour les modifier dans React.

Avantages et inconvénients

Bien que les sites sans tête soient intrinsèquement plus complexes, ils offrent certains avantages que les CMS monolithiques ne peuvent pas égaler.

Avantages sans tête

  • Les fonctionnalités dynamiques peuvent être plus faciles à développer, en particulier avec des frameworks front-end comme React qui éliminent une grande partie des problèmes de gestion d'état et de compatibilité des navigateurs qui ont affecté les interfaces JavaScript et jQuery.
  • Les expériences hautement interactives peuvent répondre plus rapidement en traitant davantage de données et d’état utilisateur dans le front-end au lieu de faire une demande au back-end et d’attendre une réponse entièrement rendue.
  • Les équipes de contenu peuvent toujours utiliser les fonctionnalités du CMS telles que les brouillons, la création et les sauvegardes sans dépendre des développeurs front-end ou sans pousser de nouveau code pour les modifications de contenu.
  • Différentes conceptions ou expériences front-end (par exemple, ordinateur de bureau, mobile, écrans grand format) peuvent consommer et afficher le même contenu
  • Backend simplifié avec de meilleures performances puisque le rendu et d'autres modules personnalisés ne sont plus nécessaires pour traiter chaque requête d'URL
  • Empreinte de sécurité réduite pour Drupal
  • La recherche sur le site devient une fonctionnalité intégrale du site au lieu d'une page autonome

Inconvénients du sans tête

  • Plus de points de défaillance lorsque l'on s'appuie sur des API pour les fonctionnalités de base des applications
  • Peut avoir besoin de gérer et de maintenir plusieurs serveurs/environnements pour Drupal et React
  • Le temps de réponse initial peut être plus élevé lors du chargement de React
  • Une solution de rendu côté serveur (Drupal ou Server Side Rendering) peut encore être nécessaire pour le contenu statique et l'indexation de la recherche.

Headless est-il adapté à mon site ?

Passer au sans tête peut être déterminé par de nombreux facteurs, notamment des fonctionnalités améliorées ou une interactivité, des expériences d'application complètes, l'interaction et la consommation de données provenant de plusieurs serveurs ou sources, ainsi que la disponibilité sur de nombreux types d'écrans et d'appareils différents.

Prochaines étapes

Les composants de l'interface utilisateur de recherche pour SearchStax Site Search sont disponibles pour Réagir, Vue, Angulaire, et autres Front-end optimisé par JavaScript des frameworks pour que les développeurs puissent commencer dès aujourd'hui à tester et à créer accessible recherche de site pour les applications headless.

Qu'est-ce que React ?

React est un framework front-end basé sur JavaScript. Il permet aux développeurs front-end de créer des interfaces utilisateur dynamiques et réactives grâce à des composants réutilisables.

Que sont les composants de l’interface utilisateur de recherche ?

Rechercher des composants d'interface utilisateur sont des packages front-end pour les frameworks JavaScript, dont React. Les composants d'interface utilisateur de recherche vous permettent de créer des interfaces de recherche et des pages de résultats personnalisées pour votre application SearchStax Studio.

Dois-je utiliser Drupal avec React ?

React ne dépend d'aucun CMS spécifique et peut être utilisé avec une variété de back-ends, de DXP ou de tout autre élément capable de fournir du contenu via une API.

Par Kevin Montgomery

Ingénieur marketing produit

« ...Les équipes de contenu peuvent toujours utiliser les fonctionnalités du CMS telles que les brouillons, la création et les sauvegardes sans dépendre des développeurs front-end ou sans pousser de nouveau code pour les modifications de contenu... »

Recevez notre newsletter

The Stack est livré tous les deux mois avec des tendances du secteur, des informations, des produits et plus encore

Vous aimerez peut-être aussi :

La société d'expérience de recherche
G2 Enterprise Search Reviews for SearchStax

Produits

Tarification

Ressources

Services

Ressources

Tarification

Entreprise

Planifier une démonstration
© 2025 SearchStax, Inc. Tous droits réservés. Conditions d'utilisation | politique de confidentialité
fr_CAFrançais du Canada
en_USEnglish fr_CAFrançais du Canada