Data Fetching is no doubt the most important part of React App, because React is data-driven. There are three types of Data Fetching:<ol><li>Static Generation</li><li>Server-side Rendering</li><li>Client-side Rendering</li></ol><figure class="image"><img src="https://images.unsplash.com/photo-1515524738708-327f6b0037a7?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExODA5M30"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@markusspiske?utm_source=unsplash-chrome-extension&amp;utm_medium=referral">Markus Spiske</a></figcaption></figure><h3>Static Generation</h3>Static Generation means the data is fetched at build time. For Next.js versions 9.3 and up, &nbsp;there are two unique functions, getStaticProps and getStaticPaths, which are running at build time to generate &nbsp;data saved in .next/static folder by default. And then those data (HTML and JSON files) will be directly loaded when the page loads, which will certainly increase the performance. &nbsp;The getStaticPaths is used to specify dynamic routes, and define a list of paths that have to be rendered to HTML at build time. &nbsp;We don't use getStaticPaths in DeNiApps, so let's skip this for now, and focus on getStaticProps. &nbsp;To use it, we can simply add the function like below:<pre><code class="language-javascript">export async function getStaticProps() {
 let data = null;
 try {
 const res = await fetch("https://api.tvmaze.com/search/shows?q=nba");
 data = await res.json();
 } catch (err) {
 console.log(err);
 }

 return {
 props: {
 shows: data ? data.map((entry) =&gt; entry.show) : [],
 },
 };
}</code></pre>Then the data retrieved from API will be passed to the page component as props.&nbsp;<h3>Server-side Rendering</h3>Server-side Rendering means the data is fetched on each request before rendering the page. In the React's early day, somewhere in 2015, &nbsp;people called this Universal Rendering:<blockquote>With the help of server side rendering the first rendering is never empty and performance is better.</blockquote>At that time, people used ReduxAsyncConnect, later ReductConnect, and then another popular one named <a target="_blank" rel="noopener noreferrer" href="https://github.com/markdalgleish/redial">redial</a>, and more. But none of them is as easy as NextJS. With NextJS, you only need to add getServerSideProps function into your pages, &nbsp;the function looks the same as getStaticProps. For example:<pre><code class="language-javascript">export async function getServerSideProps() {
 let posts = [];
 try {
 const result = await getPublicPosts();
 posts = result.data.data;
 } catch (error) {
 console.log(error);
 }

 return {
 props: { posts: posts }
 };
}</code></pre><h3>Client-side Rendering</h3>Client-side Rendering means the data is fetched after the page mounted. This is very common in React App when people don't care about Server-side Rendering. Also, in some cases, you may not be able to do Server-side, for example, when the data is only available to the user session, and the user session is saved on the client-side only, like using LocalStorage. In the Object-Oriented way, we can do the data fetching inside, ComponentDidMount, and in a functional way, since React.hook is available after 16.8, we can use useEffect, For example:<pre><code class="language-javascript">async componentDidMount() {
 const ret = await getTags(this.props.accessToken);

 const allTags = ret.data.data;
 const tagsInputOptions = allTags.map((item) =&gt; ({
 value: item.slug,
 text: item.name,
 key: item._id,
 }));

 const newAllOptions = {
 ...this.state.allOptions,
 tags: tagsInputOptions,
 };

 this.setState({ allOptions: newAllOptions });
 }</code></pre>Or:<pre><code class="language-javascript"> useEffect(() =&gt; {
 fetchList();
 setTimeout(() =&gt; {
 setMessage("");
 }, 3000);
 }, []);</code></pre><h3>Final Notes</h3><ul><li>getStaticProps /getServerSideProps has to be used in the page level, not in the component level. &nbsp;So you should use it in any pages (i.e., under pages folder in NextJS.)</li><li>In DEV env, (i.e., npm run dev) the getStaticProps is executing like getServerSideProps.</li><li>getStaticProps is only executed at build time, so it may not work for you, your page is dynamically changed, for example, in DeNiApps, the blog list page have to use getServerSideProps instead of getStaticProps, because we don't want to rebuild the website every time we publish a new post.</li><li>both <a target="_blank" rel="noopener noreferrer" href="https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation">getStaticProps</a>/<a target="_blank" rel="noopener noreferrer" href="https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering">getServerSideProps</a> get context parameter pass in, which includes ‘params’, ‘query’, etc. information, which you may need for the data fetching. Click the links to view details.</li><li>In NextJS 9.2 or older, we can use getInitialProps for server-side rendering. We can still use getInitialProps in NextJS9.3 or newer, especially, if you want to do server-side data fetching in _app.js, because we cannot do getStaticProps or getServerSideProps in _app.js.</li></ul><h3>Bonus Note</h3>The parameter for getInitailProps is different depending on whether we call it in page level or in _app.js, as the example below:<pre><code class="language-javascript">//in pages/home.js
Home.getInitialProps = async ({ req }) =&gt; {
 const md = new MobileDetect(req.headers["user-agent"]);
 const isMobileFromSSR = !!md.mobile();

 return {
 isMobileFromSSR,
 deviceInfo: {
 mobile: md.mobile(),
 tablet: md.tablet(),
 os: md.os(),
 userAgent: md.userAgent(),
 },
 };
};
//in pages/_app.js
deniApp.getInitialProps = async (appContext) =&gt; {
 const agent = appContext.ctx.req
 ? appContext.ctx.req.headers["user-agent"]
 : "";
 const md = new MobileDetect(agent);
 const isMobileFromSSR = !!md.mobile();
 return { isMobileFromSSR };
};</code></pre>As you see in page level, it's context.req, but in _app.js, it's appContex.ctr.req.&nbsp;

In this article, we introduce different ways to do the Data Fetching in a React App, especially with NextJS. You will learn something like, Static generation, Server-side rendering, and Client-side rendering.

Data Fetching In React App with NextJS

<figure class="image"><img src="https://images.unsplash.com/photo-1551867120-1d573ec3f1dd?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExODA5M30"><figcaption>Photo By; <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@arashasghari?utm_source=unsplash-chrome-extension&amp;utm_medium=referral">Arash Asghari</a></figcaption></figure>CORS error is very common when your application is using cross-domain APIs. The error message shown in your browser console is like below:<blockquote>Access to fetch at ‘https://your-api.com" from origin “https://your-site.com” has been blocked by CORS policy: No ’Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response servers your needs, set the request's mode to ‘no-cors’ to fetch the resource with CORS disabled.</blockquote>The key part of this message is: No ’Access-Control-Allow-Origin' header is present on the requested resource. To know if you have this issue, check out these two questions:<ol><li>Are the requesting site and the requested resource (i.e. API server) Cross-Origin? Which includes the different protocols (ex: http vs https) and/or the different domains and or the different ports.</li><li>Does the requested resource send the “Access-Control-Allow-Origin” header in the response?</li></ol>If you say yes to the first question, but say no to the second one, then you would need to fix this by setting up the CORS option in your response header. The solution could be different based on what API server you are using. For example, with the Apollo server, you can have options like below:<pre><code class="language-javascript">const options = {
 cors: {
 origin: *,
 credentials: true,
 methods: 'POST, GET, OPTIONS',
 allowedHeaders: [
 'Content-Type',
 'X-Amz-Date',
 'Authorization',
 'X-Api-Key',
 'X-Amz-Security-Token'
 ]
 }
};</code></pre>If you say yes to both questions, then very likely you're okay, and the CORS error is just a false alarm. &nbsp;In this case, you need to check the request and response header of your API (XHR) call, which can be found at the ‘Network’ tab of the browser's Inspect tool.&nbsp;You might see some Request Headers like:<pre><code class="language-plaintext">Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site</code></pre>This means the request is made by cross-site with ‘cors’ mode, so the browser will look for ‘Access-Control-Allow-Origin’ header in the response to make sure the request is allowed under CORS policy. When the header is not present, the browser will throw the error with the Eye-catching word “CORS”. It would be very confusing if you believe that you have CORS set up already, either open to everyone (with ‘*’) or to the whitelist of domains.Most likely, there are some other issues of your API server, for example, database connection issue or network issue, which causes “500” internal error, but the response headers of status 500 do not include “Access-Control-Allow-Origin”, so the browser throws the error no matter what.Worth to mention that the second part of the error message is even confusing:<blockquote>If an opaque response servers your needs, set the request's mode to ‘no-cors’ to fetch the resource with CORS disabled.</blockquote>You should know that setting “no-cors” as the request's mode does not help you to get cross-domain resource at all. Basically, it tells the browser that “Please don't show me any ‘cors' resource. ” I am 99.99% sure that it is not what you wanted. So just forget it. If you really wanted to know what it's like I did. Try to read <a target="_blank" rel="noopener noreferrer" href="https://stackoverflow.com/questions/39109789/what-limitations-apply-to-opaque-responses/39109790#39109790">this resource</a> 10 times. &nbsp;Be honest, I am still not very sure why we need “no-cors”.

CORS error is very common when your application is using cross-domain APIs. Sometimes it could be a false alarm. When there are some other issues of your API server, for example, database connection issue or network issue, which causes “500” internal error, but the response headers of status 500 do not include “Access-Control-Allow-Origin”, so then the browser throws the error no matter what.

All Posts In Data Fetching