title: Correct way to get state value from inside getServerSideProps getState() or useSelector()?
body: <p>So I have been trying to use <code>next-redux-wrapper</code> and make request to my api endpoint to fetch blogs with <code>redux-saga</code>. I'm able to fetch data to the state. My only doubt here is, what is the correct way to get a particular value from the state; I know the two solutions are using <code>store.getState()</code> inside <code>getServerSideProps()</code> or using <code>useSelector()</code> hook in the function component?</p>
  <p><strong>As far as I understand</strong>, using <code>useSelector()</code> would go against server-side rendering as it calls the data in the client side, i think. Is it correct?</p>
  <p>My code using <code>useSelector()</code>:</p>
  <pre><code>export default function BlogsList(){
      const blogs = useSelector(state =&gt; state.blogReducer.blogReducer.blog);
  
      return(
          &lt;div className=&quot;mainCon&quot;&gt;
              &lt;ul&gt;
                  {blogs.map((item) =&gt; (
                      &lt;li key={item.author}&gt;
                          &lt;span&gt;{item.author}&lt;/span&gt;&lt;br/&gt;
                          &lt;span&gt;{item.title}&lt;/span&gt;
                          &lt;h4&gt;{item.body_delta}&lt;/h4&gt;
                          &lt;p&gt;{item.body_html}&lt;/p&gt;
                          &lt;p&gt;{item.created_on}&lt;/p&gt;
                      &lt;/li&gt;
                  ))}
              &lt;/ul&gt;
          &lt;/div&gt;
      );
  }
  
  export const getServerSideProps = wrapper.getServerSideProps( async ({store, req}) =&gt;{
      store.dispatch({type: FETCH_BLOG_LIST});
      store.dispatch(END);
      await store.sagaTask.toPromise();
  });
  </code></pre>
  <p>My code using <code>store.getState()</code>:</p>
  <pre><code>export default function BlogsList({blogs}){
      return(
          &lt;div className=&quot;mainCon&quot;&gt;
              &lt;ul&gt;
                  {blogs.map((item) =&gt; (
                      &lt;li key={item.author}&gt;
                          &lt;span&gt;{item.author}&lt;/span&gt;&lt;br/&gt;
                          &lt;span&gt;{item.title}&lt;/span&gt;
                          &lt;h4&gt;{item.body_delta}&lt;/h4&gt;
                          &lt;p&gt;{item.body_html}&lt;/p&gt;
                          &lt;p&gt;{item.created_on}&lt;/p&gt;
                      &lt;/li&gt;
                  ))}
              &lt;/ul&gt;
          &lt;/div&gt;
      );
  }
  
  
  export const getServerSideProps = wrapper.getServerSideProps( async ({store, req}) =&gt;{
      store.dispatch({type: FETCH_BLOG_LIST});
      store.dispatch(END);
      await store.sagaTask.toPromise();
  
      const blog = store.getState();
      const blogs = blog.blogReducer.blog;
        
      return { props: {blogs}, };
  });
  </code></pre>
  <p>Which approach properly follows server-side rendering logic?</p>