Je souhaite utiliser une bibliothèque stencil dans mon projet nuxt .
J'ai pu le faire fonctionner, mais pendant le rendu des composants vue côté serveur, je ne pouvais faire que le composant du stencil pour le rendre côté client.
Je pense que le plus gros problème est que defineCustomElement a besoin de la window comme paramètre.
Je sais que stencil.js a ce "prerender" qui est fondamentalement SSR dans ma compréhension, je voulais l'utiliser aussi bien que Nuxt.js SSR. < / p>
Ma question est donc la suivante: comment configurer un projet nuxt pour prendre en charge le rendu côté serveur pour stencil.js ?
3 Réponses :
et il est dit ici que le prerender se produit au moment de la construction, donc ce ne sera pas possible: / dommage
En effet, vous avez une solution de contournement
Pour plus d'informations sur l'ajout d'une ressource externe à votre projet nuxt, veuillez lire: https: // nuxtjs. org / faq / -> Comment utiliser les ressources externes
Acclamations
désolé, mais cette méthode fonctionne-t-elle avec le rendu côté serveur? est-il livré au client de manière pré-rendue?
Mise à jour: je développe actuellement un module Nuxt à intégrer aux bibliothèques basées sur stencil.js.
https://github.com/Gomah/nuxt-stencil
Ce qu'il fait:
Il crée deux hooks pour les applications basées sur SSR (universel ou au moment de la construction) en utilisant le render: route & generate: page , il rendra le pochoir composants avant de renvoyer la demande au navigateur.
Il injecte un plugin pour CSR pour définir les éléments personnalisés de votre bibliothèque de pochoirs, comme décrit ici < / a>.
⚠️ Remarque: Vue génère quelques erreurs lors de l'hydratation de la RSE, c'est probablement dû aux commentaires que le moteur de rendu injecte lors du rendu des composants du pochoir
Commentaire obsolète, avant Stencil V1:
Il semble que Stencil v1 pourrait résoudre le SSR, d'après ce commentaire :
Stencil One utilisera la cible de sortie dist-hydrate-script pour générer un script de nœud qui peut être utilisé pour hydrater vos scripts. Puis le le script généré dist / hydrate / index.js est quelque chose que vous pouvez réutiliser nombreux emplacements (Angular Universal, Express Middleware, personnalisé pré-rendu, etc.).
Si vous faites un pré-rendu, vous pourrez simplement ajouter le --prerender flag à votre composition de pochoir, et il gérera tout cela pour vous. Nous y travaillons toujours activement et espérons pouvoir l'expédier bientôt. Merci
Problèmes liés à Github:
vous ne pouvez pas. La prise en charge de SSR est quelque chose qui devrait être fait au niveau de la bibliothèque. Donc, stencil.js prend en charge ssr ou ne prend pas en charge. S'il repose sur window - il ne prend pas en charge ssr.
voir github.com/jagreehal/stencil-ssr-example