| @@ -1,29 +1,26 @@ | ||
| 1 | -function resolveAfter2Seconds(x) { | |
| 2 | - return new Promise((resolve) => { | |
| 3 | - setTimeout(() => { | |
| 4 | - resolve(x); | |
| 5 | - }, 2000); | |
| 6 | - }); | |
| 1 | +// posts will be populated at build time by getStaticProps() | |
| 2 | +function Blog({ posts }) { | |
| 3 | + return ( | |
| 4 | + <ul> | |
| 5 | + {posts.map((post) => ( | |
| 6 | + <li>{post.title}</li> | |
| 7 | + ))} | |
| 8 | + </ul> | |
| 9 | + ) | |
| 7 | 10 | } |
| 8 | 11 | |
| 9 | -// async function expression assigned to a variable | |
| 10 | -const add = async function (x) { | |
| 11 | - const a = await resolveAfter2Seconds(20); | |
| 12 | - const b = await resolveAfter2Seconds(30); | |
| 13 | - return x + a + b; | |
| 14 | -}; | |
| 12 | +// This function gets called at build time on server-side. | |
| 13 | +export async function getStaticProps() { | |
| 14 | + const res = await fetch('https://.../posts') | |
| 15 | + const posts = await res.json() | |
| 15 | 16 | |
| 16 | -add(10).then((v) => { | |
| 17 | - console.log(v); // prints 60 after 4 seconds. | |
| 18 | -}); | |
| 17 | + return { | |
| 18 | + props: { | |
| 19 | + posts | |
| 20 | + } | |
| 21 | + } | |
| 22 | +} | |
| 19 | 23 | |
| 20 | -// async function expression used as an IIFE | |
| 21 | -(async function (x) { | |
| 22 | - const p1 = resolveAfter2Seconds(20); | |
| 23 | - const p2 = resolveAfter2Seconds(30); | |
| 24 | - return x + (await p1) + (await p2); | |
| 25 | -})(10).then((v) => { | |
| 26 | - console.log(v); // prints 60 after 2 seconds. | |
| 27 | -}); | |
| 24 | +export default Blog | |
| 28 | 25 | |
| 29 | -// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/async_function | |
| 26 | +// From https://nextjs.org/docs/basic-features/data-fetching | |