Cool, we are up and running, now what? I will try and pull data from the Riot API.
Looking through the Next.js docs I see they have a section for data fetching. They offer three unique functions that you can use to fetch data for pre-rendering.
getStaticProps(Static Generation): Fetch data at build time
getStaticPaths(Static Generation): Specify dynamic routes to pre-render based on data
getServerSideProps(Server-side Rendering): Fetch data on each request.
Refer to the link above to find out more about the different data fetching methods.
While these are great, after reading when I would need to use them none of them seem to fit my use case, for now.
My home page will have a user input their summoner name and it will route them to a new page with their summoner info. For now, I am just trying to hit the GET request from Riot to see if I can return my Summoner Name.
I created a simple fetch using JS Fetch API and guess what I get hit with. A CORS issue! Not sure what CORS is? Here is a little info on it.
Ahh, so I need to figure out a way to create a proxy to fix this issue. Luckily Next.js has a nice little example that I basically copy/pasta'd into my project; I just changed the proxy target, query string, and installed some node packages.
So most of the code looks like normal stuff but there was something new that I just encountered. A hook called
useSWR was implemented in the example.
This deserves its own blog post but I will put some info here for now. SWR is a react hook for client-side data fetching built by the devs at Vercel. From Vercel: "The name 'SWR' is derived from
stale-while-revalidate, an HTTP cache invalidation strategy popularized by HTTP RFC 5861. SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally, come with the up-to-date data."
Now we know what
useSWR is and what it does!
- Created a very rough home page
- Fetched data from Riot's API
- Returned my summoner name
- Created a proxy server for development so I can fetch data from Riot's API
- Create a rough layout of User Info Page
- Pass the user summoner name input from HomePage to UserInfoPage
- Fetch more data that:
- Return user info (name, level)
- Return match history
- Return Rank
- Return W/L ratio
- Return Trati Stats
- Return Unit Stats