Skip to content

Instantly share code, notes, and snippets.

@tmamedbekov

tmamedbekov/index.js

Last active February 5, 2021 22:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tmamedbekov/4b3cf42fdacc3cc114909808d80c6832 to your computer and use it in GitHub Desktop.
Save tmamedbekov/4b3cf42fdacc3cc114909808d80c6832 to your computer and use it in GitHub Desktop.
Download ZIP
Example of NextJS data fetching Scenarios with BoredAPI || https://ourdemo.netlify.app/
Raw
index.js
import React from "react";
import { useState, useEffect } from "react";
import axios from "axios";
import Head from "next/head";
import Footer from "../components/Footer";
import styles from "../styles/Home.module.css";
const Index = (props) => {
const [bored, getBored] = useState("");
useEffect(() => {
getBored();
}, []);
const getBored = async () => {
const res = await axios.get("https://www.boredapi.com/api/activity/");
setBored(res.data.activity);
};
return (
<div className="site">
<Head>
<title>Our Demo</title>
</Head>
<main>
<div>
<div className="relative bg-gray-50 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
<div className="absolute inset-0">
<div className="bg-white h-1/3 sm:h-2/3" />
</div>
<div className="relative max-w-7xl mx-auto">
<div className="text-center">
<h2 className="text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl">
Data Fetching Scenarios
</h2>
<p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
Below you can see difference cases, where data is fetched by
utilizing different methods, on the left on every refresh you
will see a new activity recommendation, on the right you will
see a static activity that is fetched at build time.
</p>
</div>
<div className="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none">
<div className="flex flex-col rounded-lg shadow-lg overflow-hidden">
<div className="flex-shrink-0">
<img
className="h-48 w-full object-cover"
src="https://picsum.photos/630/192"
alt="text"
/>
</div>
<div className="flex-1 bg-white p-6 flex flex-col justify-between">
<div className="flex-1">
<p className="text-sm font-medium text-indigo-600">
<a href="#" className="hover:underline">
Client Side Rendering
</a>
</p>
<a href="#" className="block mt-2">
<p className="text-xl font-semibold text-gray-900">
{bored}
</p>
<p className="mt-3 text-base text-gray-500">Show Data in the component once the page is loaded</p>
</a>
</div>
<div className="mt-6 flex items-center">
<div className="flex-shrink-0">
<a href="#">
<span className="sr-only">Roel Aufderehar</span>
<img
className="h-10 w-10 rounded-full"
src="https://media-exp1.licdn.com/dms/image/C4E03AQH2MeXbaHPimQ/profile-displayphoto-shrink_200_200/0/1588272901943?e=1614816000&v=beta&t=lFwuOkXN0w3NgopPZSmL8IfhQYZoRUW3dgYsAveBztM"
alt="text"
/>
</a>
</div>
<div className="ml-3">
<p className="text-sm font-medium text-gray-900">
<a href="#" className="hover:underline">
Patrick Coyne
</a>
</p>
<div className="flex space-x-1 text-sm text-gray-500">
<time dateTime="2020-03-16">Mar 16, 2020</time>
<span aria-hidden="true">·</span>
<span>2 min read</span>
</div>
</div>
</div>
</div>
</div>
<div className="flex flex-col rounded-lg shadow-lg overflow-hidden">
<div className="flex-shrink-0">
<img
className="h-48 w-full object-cover"
src="img/1069-630x192.jpg"
alt="text"
/>
</div>
<div className="flex-1 bg-white p-6 flex flex-col justify-between">
<div className="flex-1">
<p className="text-sm font-medium text-indigo-600">
<a href="#" className="hover:underline">
Server Side Rendering
</a>
</p>
<a href="#" className="block mt-2">
<p className="text-xl font-semibold text-gray-900">
{props.value}
</p>
<p className="mt-3 text-base text-gray-500">
Page has been SSR and delivered at build time (static)
</p>
</a>
</div>
<div className="mt-6 flex items-center">
<div className="flex-shrink-0">
<a href="#">
<span className="sr-only">Tony Mamedbekov</span>
<img
className="h-10 w-10 rounded-full"
src="https://media-exp1.licdn.com/dms/image/C4D03AQE4Ug3ia7GoBQ/profile-displayphoto-shrink_200_200/0/1516518251173?e=1614816000&v=beta&t=JHbE2jqDIs5EChSRk6Z_BvomF4qAJBulUkahxNlRqeE"
alt="text"
/>
</a>
</div>
<div className="ml-3">
<p className="text-sm font-medium text-gray-900">
<a href="#" className="hover:underline">
Tony Mamedbekov
</a>
</p>
<div className="flex space-x-1 text-sm text-gray-500">
<time dateTime="2020-03-10">Nov 02, 2020</time>
<span aria-hidden="true">·</span>
<span>1 min read</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<Footer />
</main>
<style jsx>
{`
.site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
}
`}
</style>
</div>
);
};
export const getStaticProps = async () => {
const res = await axios.get("https://www.boredapi.com/api/activity/");
return {
props: {
value: res.data.activity,
},
};
};
export default Index;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment