From 04be038b128108202007a369c136a474890a9b98 Mon Sep 17 00:00:00 2001 From: Alejandro Soto Date: Thu, 12 Mar 2020 18:05:10 -0300 Subject: [PATCH 1/4] Update to SSG --- examples/data-fetch/pages/index.js | 12 ++++++++---- examples/data-fetch/pages/preact.js | 12 ++++++++---- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/examples/data-fetch/pages/index.js b/examples/data-fetch/pages/index.js index b9aee6825d7dbaa..2e0e55d4319f43f 100644 --- a/examples/data-fetch/pages/index.js +++ b/examples/data-fetch/pages/index.js @@ -2,10 +2,10 @@ import React from 'react' import Link from 'next/link' import fetch from 'isomorphic-unfetch' -function Index(props) { +function Index({stars}) { return (
-

Next.js has {props.stars} ⭐️

+

Next.js has {stars} ⭐️

How about preact? @@ -13,10 +13,14 @@ function Index(props) { ) } -Index.getInitialProps = async () => { +export async function getStaticProps() { const res = await fetch('https://api.github.com/repos/zeit/next.js') const json = await res.json() // better use it inside try .. catch - return { stars: json.stargazers_count } + return { + props: { + stars: json.stargazers_count + } + } } export default Index diff --git a/examples/data-fetch/pages/preact.js b/examples/data-fetch/pages/preact.js index 1a9d707863297f0..8ee020e83168f9b 100644 --- a/examples/data-fetch/pages/preact.js +++ b/examples/data-fetch/pages/preact.js @@ -2,10 +2,10 @@ import React from 'react' import Link from 'next/link' import fetch from 'isomorphic-unfetch' -function Preact(props) { +function Preact({stars}) { return (
-

Preact has {props.stars} ⭐

+

Preact has {stars} ⭐

I bet Next.js has more stars (?) @@ -13,10 +13,14 @@ function Preact(props) { ) } -Preact.getInitialProps = async () => { +export async function getStaticProps() { const res = await fetch('https://api.github.com/repos/developit/preact') const json = await res.json() // better use it inside try .. catch - return { stars: json.stargazers_count } + return { + props: { + stars: json.stargazers_count + } + } } export default Preact From 411dddf744754c76c793a70a8dfc8c24b2ce1c90 Mon Sep 17 00:00:00 2001 From: Alejandro Soto Date: Thu, 12 Mar 2020 18:32:33 -0300 Subject: [PATCH 2/4] Change to getServerSideProps --- examples/data-fetch/README.md | 2 +- examples/data-fetch/package.json | 2 +- examples/data-fetch/pages/index.js | 4 ++-- examples/data-fetch/pages/preact.js | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/examples/data-fetch/README.md b/examples/data-fetch/README.md index bbbd445a5fba318..d503072bd32c8f2 100644 --- a/examples/data-fetch/README.md +++ b/examples/data-fetch/README.md @@ -3,7 +3,7 @@ Next.js was conceived to make it easy to create universal apps. That's why fetching data on the server and the client when necessary is so easy with Next. -Using `getInitialProps` fetches data on the server for SSR and then on the client when the component is re-mounted (not on the first paint). +Using `getServerSideProps` always fetches data on the server from a page, Next.js will render this page on each request (SSR). ## Deploy your own diff --git a/examples/data-fetch/package.json b/examples/data-fetch/package.json index ce6b96d2187181f..55d94b79a3ea614 100644 --- a/examples/data-fetch/package.json +++ b/examples/data-fetch/package.json @@ -7,8 +7,8 @@ "start": "next start" }, "dependencies": { - "isomorphic-unfetch": "^3.0.0", "next": "latest", + "node-fetch": "^2.6.0", "react": "^16.8.4", "react-dom": "^16.8.4" }, diff --git a/examples/data-fetch/pages/index.js b/examples/data-fetch/pages/index.js index 2e0e55d4319f43f..1142508fd74fff7 100644 --- a/examples/data-fetch/pages/index.js +++ b/examples/data-fetch/pages/index.js @@ -1,6 +1,6 @@ import React from 'react' import Link from 'next/link' -import fetch from 'isomorphic-unfetch' +import fetch from 'node-fetch' function Index({stars}) { return ( @@ -13,7 +13,7 @@ function Index({stars}) { ) } -export async function getStaticProps() { +export async function getServerSideProps() { const res = await fetch('https://api.github.com/repos/zeit/next.js') const json = await res.json() // better use it inside try .. catch return { diff --git a/examples/data-fetch/pages/preact.js b/examples/data-fetch/pages/preact.js index 8ee020e83168f9b..d55e061f79cdbf3 100644 --- a/examples/data-fetch/pages/preact.js +++ b/examples/data-fetch/pages/preact.js @@ -1,6 +1,6 @@ import React from 'react' import Link from 'next/link' -import fetch from 'isomorphic-unfetch' +import fetch from 'node-fetch' function Preact({stars}) { return ( @@ -13,7 +13,7 @@ function Preact({stars}) { ) } -export async function getStaticProps() { +export async function getServerSideProps() { const res = await fetch('https://api.github.com/repos/developit/preact') const json = await res.json() // better use it inside try .. catch return { From a7b7b2154746f212ed653742979f1abcb842d577 Mon Sep 17 00:00:00 2001 From: Alejandro Soto Date: Thu, 12 Mar 2020 18:47:40 -0300 Subject: [PATCH 3/4] Fix lint --- examples/data-fetch/pages/index.js | 6 +++--- examples/data-fetch/pages/preact.js | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/examples/data-fetch/pages/index.js b/examples/data-fetch/pages/index.js index 1142508fd74fff7..c5981b2582cc50e 100644 --- a/examples/data-fetch/pages/index.js +++ b/examples/data-fetch/pages/index.js @@ -2,7 +2,7 @@ import React from 'react' import Link from 'next/link' import fetch from 'node-fetch' -function Index({stars}) { +function Index({ stars }) { return (

Next.js has {stars} ⭐️

@@ -18,8 +18,8 @@ export async function getServerSideProps() { const json = await res.json() // better use it inside try .. catch return { props: { - stars: json.stargazers_count - } + stars: json.stargazers_count, + }, } } diff --git a/examples/data-fetch/pages/preact.js b/examples/data-fetch/pages/preact.js index d55e061f79cdbf3..930a43731726e49 100644 --- a/examples/data-fetch/pages/preact.js +++ b/examples/data-fetch/pages/preact.js @@ -2,7 +2,7 @@ import React from 'react' import Link from 'next/link' import fetch from 'node-fetch' -function Preact({stars}) { +function Preact({ stars }) { return (

Preact has {stars} ⭐

@@ -18,8 +18,8 @@ export async function getServerSideProps() { const json = await res.json() // better use it inside try .. catch return { props: { - stars: json.stargazers_count - } + stars: json.stargazers_count, + }, } } From 142a42bc49e3e454e5d78304f2cd64abcd1d5f30 Mon Sep 17 00:00:00 2001 From: Alejandro Soto Date: Thu, 12 Mar 2020 19:02:52 -0300 Subject: [PATCH 4/4] Update --- examples/data-fetch/README.md | 2 +- examples/data-fetch/pages/index.js | 2 +- examples/data-fetch/pages/preact.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/data-fetch/README.md b/examples/data-fetch/README.md index d503072bd32c8f2..272091d25d99443 100644 --- a/examples/data-fetch/README.md +++ b/examples/data-fetch/README.md @@ -3,7 +3,7 @@ Next.js was conceived to make it easy to create universal apps. That's why fetching data on the server and the client when necessary is so easy with Next. -Using `getServerSideProps` always fetches data on the server from a page, Next.js will render this page on each request (SSR). +Using `getStaticProps` fetches data at built time from a page, Next.js will pre-render this page at build time. ## Deploy your own diff --git a/examples/data-fetch/pages/index.js b/examples/data-fetch/pages/index.js index c5981b2582cc50e..a6d2c2b2edba0e8 100644 --- a/examples/data-fetch/pages/index.js +++ b/examples/data-fetch/pages/index.js @@ -13,7 +13,7 @@ function Index({ stars }) { ) } -export async function getServerSideProps() { +export async function getStaticProps() { const res = await fetch('https://api.github.com/repos/zeit/next.js') const json = await res.json() // better use it inside try .. catch return { diff --git a/examples/data-fetch/pages/preact.js b/examples/data-fetch/pages/preact.js index 930a43731726e49..9c4df30454e8bee 100644 --- a/examples/data-fetch/pages/preact.js +++ b/examples/data-fetch/pages/preact.js @@ -13,7 +13,7 @@ function Preact({ stars }) { ) } -export async function getServerSideProps() { +export async function getStaticProps() { const res = await fetch('https://api.github.com/repos/developit/preact') const json = await res.json() // better use it inside try .. catch return {