title: Next.js data fetching useSWR or regular fetch/axios with useEffect?
body: <p>I'm learning Next.js and want to show data depending on the query that a user inputs.
  I want to make use of the features of Next but I'm not sure if useSWR is the correct way of handling this because I couldn't find any examples of what I'm trying to do.</p>
  <p>My code looks like this:</p>
  <pre><code>export default function SearchBar() {
    const [query, setQuery] = useState(&quot;&quot;);
    const [address, setAddress] = useState(&quot;&quot;);
    const fetcher = async (url) =&gt; await axios.get(url).then((res) =&gt; res.data);
    const { data, error } = useSWR(address, fetcher);
  
    const handleSubmit = (e) =&gt; {
      setAddress(`https://jsonplaceholder.typicode.com/todos/${query}`);
      e.preventDefault();
    };
  
    if (error) return &lt;div&gt;ERROR&lt;/div&gt;;
  
    return (
      &lt;&gt;
        &lt;Form onSubmit={handleSubmit}&gt;
          &lt;Input
            type=&quot;text&quot;
            onChange={(e) =&gt; setQuery(e.target.value)}
            value={query}
          /&gt;
          &lt;SearchButton type=&quot;submit&quot;&gt;Search&lt;/SearchButton&gt;
        &lt;/Form&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>Is this correct usage of useSWR or should I just use a normal fetch with useEffect?</p>