title: Why does NextJS not throw an error on the first render?
body: <p>In NextJS, I wrote the code below and placed <code>localStorage</code> outside of <code>useEffect</code>. This was obviously a mistake and I modified the starred code below. However, I didn't notice this error at first because NextJS rendered and served the page correctly on the first request.
  This doesn't make sense to me -- doesn't NextJS run the code server-side to know what HTML to serve on the initial render and how to hydrate the page with event listeners on the first client-side re-render? Why does NextJS only notice that <code>localStorage</code> is undefined when the page is re-rendered instead of when it is first pre-rendering the page server-side?</p>
  <pre class="lang-js prettyprint-override"><code>function ClassSearch() {
    ***const [isDeclared, setIsDeclared] = useState(localStorage.getItem(&quot;isDeclared&quot;));
    const [major, setMajor] = useState(localStorage.getItem(&quot;major&quot;));***
  
    useEffect(
      (isDeclared) =&gt; {
        localStorage.setItem(&quot;isDeclared&quot;, isDeclared);
      },
      [isDeclared]
    );
  
    useEffect(
      (major) =&gt; {
        localStorage.setItem(&quot;major&quot;, major);
      },
      [major]
    );
  }
  </code></pre>