Maison > Article > développement back-end > Architecture de rendu hybride utilisant Astro et Go Fiber

Architecture de rendu hybride utilisant Astro et Go Fiber

WBOYoriginal: 2024-07-17 00:16:10347parcourir

Hybrid Rendering Architecture using Astro and Go Fiber

Dans cette architecture, Astro est responsable de la génération de sites statiques et de l'optimisation des actifs, en créant des fichiers HTML, CSS et JavaScript pré-rendus pour des performances élevées et une livraison efficace. Go Fiber gère le traitement dynamique des données, l'intégration d'API et le service des fichiers statiques, fournissant des mises à jour de données en temps réel et une gestion efficace du routage et du middleware côté serveur. Cette combinaison exploite les atouts des deux technologies pour créer une application Web performante et évolutive.

Exemple complet d'architecture de rendu hybride utilisant Astro et Go Fiber

Voici un guide étape par étape pour créer une application Web à l'aide de l'architecture de rendu hybride avec Astro et Go Fiber.

1. Configurer le projet Astro

Installez Astro et créez un nouveau projet :

   npm create astro@latest
   cd my-astro-site

Créer une page dans Astro :

Créez src/pages/index.astro :

   ---
   export const prerender = true;
   ---

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{Astro.props.title}</title>
     <link rel="stylesheet" href="/assets/style.css">
   </head>
   <body>
     <h1>{Astro.props.title}</h1>
     <p>{Astro.props.message}</p>
     <script src="/assets/script.js"></script>
   </body>
   </html>

Ajouter des fichiers CSS et JS :

Créez src/assets/style.css :

   body {
     font-family: Arial, sans-serif;
     background-color: #f0f0f0;
     margin: 0;
     padding: 20px;
   }

Créez src/assets/script.js :

   document.addEventListener('DOMContentLoaded', () => {
     console.log('Astro and Go Fiber working together!');
   });

Construire le projet Astro :

   npm run build

2. Configurer le projet Go Fiber

Créez un nouveau projet Go et installez les dépendances :

   go mod init mysite
   go get github.com/gofiber/fiber/v2

Créez le fichier Go principal :

Créer main.go :

   package main

   import (
       "log"
       "github.com/gofiber/fiber/v2"
       "path/filepath"
       "encoding/json"
       "io/ioutil"
       "bytes"
       "os/exec"
       "net/http"
   )

   // Function to render Astro template
   func renderAstroTemplate(templatePath string, data map[string]interface{}) (string, error) {
       cmd := exec.Command("astro", "build", "--input", templatePath)

       // Pass data to template via stdin
       jsonData, err := json.Marshal(data)
       if err != nil {
           return "", err
       }
       cmd.Stdin = bytes.NewBuffer(jsonData)

       output, err := cmd.CombinedOutput()
       if err != nil {
           return "", fmt.Errorf("failed to execute astro build: %s", string(output))
       }

       // Read generated file
       outputPath := filepath.Join("dist", "index.html")
       content, err := ioutil.ReadFile(outputPath)
       if err != nil {
           return "", err
       }

       return string(content), nil
   }

   func main() {
       app := fiber.New()

       // Serve static files from the dist directory
       app.Static("/", "./my-astro-site/dist")

       app.Get("/", func(c *fiber.Ctx) error {
           data := map[string]interface{}{
               "title":   "My Astro Site",
               "message": "Welcome to my site built with Astro and Go Fiber!",
           }

           htmlContent, err := renderAstroTemplate("./my-astro-site/src/pages/index.astro", data)
           if err != nil {
               return c.Status(http.StatusInternalServerError).SendString(err.Error())
           }

           return c.Type("html").SendString(htmlContent)
       })

       log.Fatal(app.Listen(":3000"))
   }

3. Exécutez l'application

Démarrez le serveur Go Fibre :

   go run main.go

Accéder au site Internet :

Ouvrez votre navigateur et accédez à http://localhost:3000.

Résumé

Dans cet exemple, Astro gère la génération de sites statiques, créant des fichiers HTML, CSS et JavaScript optimisés. Go Fiber sert ces fichiers statiques et injecte dynamiquement des données dans les modèles, permettant des mises à jour des données en temps réel. Cette architecture de rendu hybride exploite les atouts des deux technologies pour créer une application Web performante et évolutive.

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!

JavaScript css html Static for using JS this http Access

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Réponse Apache. Flexibilité. Réaction. Extension.Article suivant：Réponse Apache. Flexibilité. Réaction. Extension.

Articles Liés

Voir plus