NetLify Edge Manustres

Processeur Netlify Edge Accès précoce: Redéfinir Jamstack

Les processeurs Netlify Edge sont actuellement en phase d'accès précoce (vous pouvez demander l'accès), mais leur puissance vaut maintenant une plongée profonde. Je pense que cela changera la nature et la possibilité de Jamstack.

Vous comprenez CDN (Network de distribution de contenu). Ils sont mondiaux et peuvent placer géographiquement les ressources à proximité des utilisateurs, accélérant ainsi le site Web. Netlify fournit des services CDN pour tous les contenus. Plus vous pouvez déployer de contenu sur un CDN, mieux c'est. Jamstack défend la mise en place de ressources et le contenu pré-rendu sur les CDN mondiaux, la vitesse étant son principal avantage.

Traditionnellement, la mentalité de Jamstack et CDN est la suivante: nous devons peser les avantages et les inconvénients. Pour obtenir l'avantage de vitesse de CDN, nous avons fait plus de travail lors de la construction, pas lors du rendu. Mais ce faisant, nous perdons également une partie de la capacité dynamique d'utiliser le serveur. Ou, nous faisons toujours des choses dynamiques, mais comme nous devons le faire, nous ne pouvons le faire que lorsque le client rendit.

Cet état d'esprit change. Les processeurs Edge montrent que vous n'avez plus besoin de faire ce compromis. Vous pouvez effectuer des opérations côté serveur dynamique et rester sur le CDN global. Voici un exemple:

1. Votre site Web dispose d'une section /blog que vous souhaitez retourner les derniers articles de blog stockés dans une base de données cloud. Ce processeur Edge n'a besoin que d'exécuter en /blog , vous configurez donc le processeur Edge pour s'exécuter uniquement sur cette URL.
2. Vous écrivez un fichier JavaScript pour obtenir ces articles et les placer dans /edge-handlers/getBlogPosts.js .
3. Maintenant, lorsque vous construisez et déploiez, ce code ne s'exécutera que sur cette URL et effectuera son travail.

Alors, quel type de code javascript écrivez-vous? C'est très concentré. Je pense que 95% des cas où vous remplacez directement la réponse d'origine. Par exemple, le code HTML pour /blog sur votre site Web pourrait être:

<meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0" name="viewport"><title> Tester les fonctions Edge Netlify</title><div></div>

Avec un processeur Edge, il n'est pas particulièrement difficile d'obtenir la réponse d'origine, de passer des appels de données cloud et de remplacer le contenu par un article de blog.

 Fonction d'exportation OnRequest (événement) {
  event.replaceResponse (async () => {
    // Obtenez la réponse originale HTML
    const OriginalRequest = attendre fetch (event.request);
    const OriginalBody = Await OriginalRequest.Text ();

    // Obtenez des données const cloudRequest = attendre fetch (
      `https: // css-tricks.com / wp-json / wp / v2 / poteaux`
    ));
    const data = attendre cloudRequest.json ();

    // Remplacez le div vide par un nouveau contenu
    // pour une plus grande robustesse, vous pouvez utiliser Cheerio ou d'autres outils similaires const ManipuledResponse = OriginalBody.replace (
      '<div></div> `,
      '
        <h2>
          <a href="https://www.php.cn/link/441ba8b924a353d6ec1ac4bff30df801">$ {data [0] .Title.rendered}</a>
        </h2>
        $ {data [0] .excerpt.rendered}
      '
    ));

    Soit la réponse = nouvelle réponse (ManipuledResponse, {{
      En-têtes: {
        "contenu-type": "texte / html",
      },
      Statut: 200,
    });

    réponse de retour;
  });
}

(J'utilise l'API REST du site Web comme exemple de stockage de données cloud.)

Cela ressemble beaucoup à la récupération du client, sauf qu'il ne fonctionne pas le DOM après avoir demandé certaines données, mais se produit plutôt avant l'arrivée de la réponse pour la première fois dans le navigateur. Le code s'exécute sur le CDN lui-même ("Edge").

Eh bien, c'est certainement plus lent que le contenu CDN pré-rendu, car il nécessite des demandes de réseau supplémentaires avant de répondre, non? Il y a en effet des frais généraux, mais c'est plus rapide que vous ne le pensez. Les demandes de réseau se produisent sur le réseau lui-même, donc en utilisant des ordinateurs superfas sur des réseaux superfastes. Cela ne peut prendre que quelques millisecondes. Dans tous les cas, ils n'autorisent que 50 millisecondes de temps d'exécution.

J'ai réussi à exécuter tout cela sur mon compte approuvé. Ce qui est génial, c'est que vous puissiez les tester localement en utilisant la commande suivante:

 Netlify Dev --trafficMesh

Cela fonctionne bien dans le développement et le déploiement.

Tout ce que vous publiez dans console.log() peut être défini dans le tableau de bord Netlify.

Voici un lien de référentiel contenant mon processeur de bord de fonction de fonctionnement normal: [lien de référentiel] (le lien réel référentiel doit être inséré ici)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!