Created
August 15, 2021 11:18
-
-
Save guydumais/d2fd201739e84a004a5929c616a5fe08 to your computer and use it in GitHub Desktop.
Next.js Server Side Rendering (SSR)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Next.js libraries | |
| import Head from 'next/head' | |
| // Custom Components | |
| import BackToHome from 'components/BackToHome' | |
| // Page component | |
| export default function ServerSideRendering({ jsonData }) { | |
| return ( | |
| <> | |
| <Head> | |
| <title>Server-Side Rendering (SSR) • Guy Dumais</title> | |
| <meta name="description" content="Example page using Server-Side Rendering (SSR) with Next.js 11 and React 17"/> | |
| <meta name="viewport" content="initial-scale=1.0, width=device-width" /> | |
| </Head> | |
| <BackToHome/> | |
| <h1>Server-Side Rendering (SSR)</h1> | |
| <p>Data fetched on the server-side at <b>each</b> request before sending to the client.</p> | |
| <ul> | |
| { | |
| jsonData.data.map((e) => ( | |
| <li key={e.id}>{e.email}</li> | |
| )) | |
| } | |
| </ul> | |
| </> | |
| ) | |
| } | |
| export async function getServerSideProps() { | |
| const res = await fetch('https://reqres.in/api/users?page=2') | |
| const jsonData = await res.json() | |
| return { | |
| props: { | |
| jsonData, // will be passed to the page component as props | |
| }, | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment