Architecture de rendu hybride utilisant Astro et Go Fiber-Golang-php.cn

Architecture de rendu hybride utilisant Astro et Go Fiber

WBOY

Libérer： 2024-07-17 00:16:10

original

278 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

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;
   }

Copier après la connexion

Créez src/assets/script.js :

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

Copier après la connexion

Construire le projet Astro :

   npm run build

Copier après la connexion

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

Copier après la connexion

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"))
   }

Copier après la connexion

3. Exécutez l'application

Démarrez le serveur Go Fibre :

   go run main.go

Copier après la connexion

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!