什么是static網站生成？

Question

我知道 static 網站生成的想法，這里的問題是，如果 SSG 在構建時獲取數據，在我的下一個應用程序中，我使用事件處理程序根據搜索關鍵字獲取一些數據，它是如何工作的。

這是我的代碼： 下面是下一個天氣應用程序中輸入組件的代碼，我使用handleSubmit事件處理程序，它從 API 端點獲取天氣數據。

import React, { useState } from "react";
import PropTypes from "prop-types";
import axios from "axios";

function Input({ onInput }) {
  const [inputText, setInputText] = useState();
  const [placeholder, setPlaceholder] = useState("أخل اسم البلد أو المنطقة...");

  return (
    <form className="hstack gap-3" onSubmit={handleSubmit}>
      <input
        type="text"
        className="form-control me-auto"
        placeholder={placeholder}
        value={inputText || ""}
        onChange={handleInput}
        onFocus={handleFocus}
        onBlur={handleBlur}
      />
      <button type="submit">ابحث</button>

      <style jsx>{`
        input {
          height: 50px;
          border-radius: 10px;
          color: var(--input-color);
          font-weight: 500;
          font-size: 1.1em;
          direction: rtl;
        }
        input:focus-visible {
          color: var(--input-color);
          font-weight: 500;
          font-size: 1.1em;
        }
        input:focus {
          box-shadow: 0 0 0 0.25rem var(--input-shadow-color);
        }
        input::placeholder {
          color: var(--input-placeholder-color);
          font-weight: 500;
          opacity: 0.7;
        }
        button {
          padding: 0.60em 1.3em;
          background-color: var(--search-btn-background-color);
          color: #fff;
          font-weight: 500;
          border: 5px solid var(--search-btn-border-color);
          background-color: var(--search-btn-background-color);
          border-radius: 12px;
          transition: 0.5s;
        }
        button:hover {
          color: #fff;
          background-color: var(--btn-hover-color);
        }
        button:focus {
          box-shadow: 0 0 0 0.25rem var(--search-btn-shadow-color);
        }
      `}</style>
    </form>
  );

  function handleFocus() {
    setPlaceholder("");
  }

  function handleBlur() {
    setPlaceholder("أخل اسم البلد أو المنطقة...");
  }

  function handleInput(event) {
    setInputText(event.target.value);
  }

  function handleSubmit(event) {
    event.preventDefault();
    axios
      .get(
        `https://api.openweathermap.org/data/2.5/weather?q=${inputText}&units=metric&appid=5a60c3e5c70d9f4ad304b2b115b3bf72&lang=ar`
      )
      .then((response) => {
        onInput(response.data);
      })
      .catch((error) => {
        console.log(error);
        onInput(0);
      });

    setInputText("");
  }
}

Input.propTypes = {
  onInput: PropTypes.func.isRequired,
};

export default Input;

Answer 1

NextJS 中的 SSG 僅發生在getStaticProps function 內的查詢中。

在您的示例中，您的查詢在組件內部，因此在構建時不執行任何查詢，但在運行時像往常一樣執行，因此您的搜索功能按預期工作。