title: Is there any method to overcome the error of hydration UI in next.js while using use-sse?
body: <p>I am using use-sse (server side rendering hook) in my next.js application but i am getting an error of &quot;There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.&quot;
  The code is all similar to the link <a href="https://github.com/kmoskwiak/useSSE" rel="nofollow noreferrer">https://github.com/kmoskwiak/useSSE</a>. Unfortunately, I am unable to predict the error of hydration in next.js application. What's the issue in it?
  Here's is the code:</p>
  <pre><code>import { useSSE } from &quot;use-sse&quot;;
  import React from 'react';
  
  interface Todo {
    userId: number;
    id: number;
    title: string;
    completed: boolean;
  }
  
  export default function Todo() {
      const [todos, error] = useSSE(() : Promise&lt;Todo[]&gt;=&gt; {
        
          return fetch(&quot;https://jsonplaceholder.typicode.com/todos&quot;).then(
            (response: Response) =&gt; response.json()
          );
         
        }, []);
        console.log(todos);
        if (error) return &lt;div&gt;{error.message}&lt;/div&gt;;
      
        if (!todos?.length) return &lt;span&gt;Todo is Loading...&lt;/span&gt;;
      
        return (
          &lt;section&gt;
            &lt;h1&gt;Todo List&lt;/h1&gt;
            &lt;ul&gt;
              {todos.map((todo: Todo) =&gt; {
                return (
                  &lt;li key={todo.id}&gt;
                    &lt;h6&gt;{todo.title}&lt;/h6&gt;
                  &lt;/li&gt;
                );
              })}
            &lt;/ul&gt;
          &lt;/section&gt;
        );
  }
  </code></pre>
  <p>Its not even detecting the use-sse package now. Is there any other method to use this hook i.e use-sse?</p>