title: How does Next JS server side rendering works when result hits client?
body: <p>I am having a problem in NextJS app.</p>
  
  <p>In the <code>_app.js</code> file I instantiate a <code>Context</code> (which in turns instantiates a <code>State</code>)</p>
  
  <p>In my page <code>ContextTest</code> I declare a <code>getServerSideProps()</code>.</p>
  
  <p>This returns some data from an API, that is passed to the <code>_app.js</code> and saved into <code>Context's state</code>.</p>
  
  <p>So far, I have the data that I need.</p>
  
  <p>Then it goes to the target page component, the component reads the context's state and sets a variable.
  The component successfully outputs my variable, which is in the form </p>
  
  <pre><code>let userName = userState.username ? userState.username : 'Guest' 
  </code></pre>
  
  <p>When page loads, I inspect the HTML from the request and indeed I have <code>userState.username</code> value.</p>
  
  <p>But then the shown HTML in the browser has <code>Guest</code>.</p>
  
  <p>There are two things to note:</p>
  
  <p>1) The server side renders as expected
  2) The App is executed again in the client for that page (so why did I render the app server side then?). The result is that this page doesn't have the result of <code>getServerSideProps()</code> so my state is empty and I get a warning in console.
  3) The HTML displayed in the browser is the one resulting of client execution of React app. (Why?)</p>
  
  <p>__app.js</p>
  
  <pre><code>import React, {useContext} from "react";
  import {UserContext} from "../lib/Context/UserContext"
  
  export default function RankerApp({Component, pageProps}) {
      const [userState, setUserState] = useContext(UserContext)();
      const [listState, setListState] = useContext(ListContext)();
  
      if (pageProps.serverContext &amp;&amp; pageProps.serverContext.user) {
          setUserState({...userState, ...pageProps.serverContext.user})
      }
      delete pageProps['serverContext'];
  
      return (
          &lt;ListContext.Provider value={[listState, setListState]}&gt;
              &lt;UserContext.Provider value={[userState, setUserState]}&gt;
                  &lt;Component {...pageProps} /&gt;
              &lt;/UserContext.Provider&gt;
          &lt;/ListContext.Provider&gt;
      );
  }
  </code></pre>
  
  <p>pages/contextTest.js</p>
  
  <pre><code>import React, {useContext} from 'react';
  import {UserContext} from "../lib/Context/UserContext";
  import Link from "next/link";
  import UserContextSeeder from "../lib/User/UserContextSeeder";
  
  export default function ContextPage1(props) {
  
      let [userState, setUserState] = useContext(UserContext);
  
      const currentLoggedInUserData = userState.loggedInUserId ? userState.users[userState.loggedInUserId] : null;
      const currentLoggedInUserName = currentLoggedInUserData ? currentLoggedInUserData.userName : 'Guest';
  
      return (
          &lt;div&gt;
              &lt;h1&gt;Page 1&lt;/h1&gt;
              &lt;Link href="contextTest2"&gt;
                  &lt;a&gt;Page 2&lt;/a&gt;
              &lt;/Link&gt;
              &lt;h1&gt;Current Logged In User: {currentLoggedInUserName}&lt;/h1&gt;
          &lt;/div&gt;
      );
  }
  
  export async function getServerSideProps(context) {
      let userContext = {};
      // await UserContextSeeder(context).then(context =&gt; {userContext = context}); commented for simplicty
      userContext = {loggedInUserId: 222, users: {222: {userName: "Jorge"}}; // suppose this is the result 
      return {
          props: {
              serverContext: {
                  user: {...userContext}
              }
          },
      }
  }
  </code></pre>
  
  <p>More context: <a href="https://github.com/zeit/next.js/discussions/11871" rel="nofollow noreferrer">https://github.com/zeit/next.js/discussions/11871</a></p>
  
  <p><a href="https://i.stack.imgur.com/BGg7p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BGg7p.png" alt="1"></a></p>