Skip to content

Commit

Permalink
docs: minor fixes in the ISR doc (#70401)
Browse files Browse the repository at this point in the history 
- Fix `id`  to be a string
- Use `const` instead of `let` as common ESLint rules would complain
otherwise
- Add types to tsx files and remove some from jsx

Co-authored-by: JJ Kasper <jj@jjsweb.site>
  • Loading branch information
@vicb @ijjk
vicb and ijjk committed Sep 24, 2024
1 parent 7f798ca commit 3fb0d87
Showing 1 changed file with 25 additions and 21 deletions.
46 changes: 25 additions & 21 deletions ...ilding-your-application/02-data-fetching/04-incremental-static-regeneration.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,16 +40,16 @@ export const revalidate = 60
export const dynamicParams = true // or false, to 404 on unknown paths

export async function generateStaticParams() {
let posts: Post[] = await fetch('https://api.vercel.app/blog').then((res) =>
const posts: Post[] = await fetch('https://api.vercel.app/blog').then((res) =>
res.json()
)
return posts.map((post) => ({
id: post.id,
id: String(post.id),
}))
}

export default async function Page({ params }: { params: { id: string } }) {
let post = await fetch(`https://api.vercel.app/blog/${params.id}`).then(
const post = await fetch(`https://api.vercel.app/blog/${params.id}`).then(
(res) => res.json()
)
return (
Expand All @@ -72,14 +72,14 @@ export const revalidate = 60;
export const dynamicParams = true // or false, to 404 on unknown paths

export async function generateStaticParams() {
let posts: Post[] = await fetch('https://api.vercel.app/blog').then((res) => res.json());
const posts: Post[] = await fetch('https://api.vercel.app/blog').then((res) => res.json());
return posts.map((post) => ({
id: post.id,
id: String(post.id),
}));
}

export default async function Page({ params }: { params: { id: string } }) {
let post = await fetch(`https://api.vercel.app/blog/${params.id}`).then((res) => res.json());
export default async function Page({ params }) {
const post = await fetch(`https://api.vercel.app/blog/${params.id}`).then((res) => res.json());
return (
<main>
<h1>{post.title}</h1>
Expand Down Expand Up @@ -107,11 +107,11 @@ interface Props {
}

export const getStaticPaths: GetStaticPaths = async () => {
let posts = await fetch('https://api.vercel.app/blog').then((res) =>
const posts = await fetch('https://api.vercel.app/blog').then((res) =>
res.json()
)
let paths = posts.map((post: Post) => ({
params: { id: post.id },
const paths = posts.map((post: Post) => ({
params: { id: String(post.id) },
}))

// We'll prerender only these paths at build time.
Expand All @@ -120,7 +120,11 @@ export const getStaticPaths: GetStaticPaths = async () => {
return { paths, fallback: false }
}

export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {
export const getStaticProps: GetStaticProps<Props> = async ({
params,
}: {
params: { id: string }
}) => {
let post = await fetch(`https://api.vercel.app/blog/${params.id}`).then(
(res) => res.json()
)
Expand All @@ -145,10 +149,10 @@ export default function Page({ post }: Props) {

```jsx filename="pages/blog/[id].jsx" switcher
export async function getStaticPaths() {
let posts = await fetch('https://api.vercel.app/blog').then((res) =>
const posts = await fetch('https://api.vercel.app/blog').then((res) =>
res.json()
)
let paths = posts.map((post) => ({
const paths = posts.map((post) => ({
params: { id: post.id },
}))

Expand All @@ -158,7 +162,7 @@ export async function getStaticPaths() {
}

export async function getStaticProps({ params }) {
let post = await fetch(`https://api.vercel.app/blog/${params.id}`).then(
const post = await fetch(`https://api.vercel.app/blog/${params.id}`).then(
(res) => res.json()
)

Expand Down Expand Up @@ -228,8 +232,8 @@ This fetches and displays a list of blog posts on `/blog`. After an hour, the ca
export const revalidate = 3600 // invalidate every hour

export default async function Page() {
let data = await fetch('https://api.vercel.app/blog')
let posts = await data.json()
const data = await fetch('https://api.vercel.app/blog')
const posts = await data.json()
return (
<main>
<h1>Blog Posts</h1>
Expand Down Expand Up @@ -270,10 +274,10 @@ For most use cases, prefer revalidating entire paths. If you need more granular

```jsx
export default async function Page() {
let data = await fetch('https://api.vercel.app/blog', {
const data = await fetch('https://api.vercel.app/blog', {
next: { tags: ['posts'] },
})
let posts = await data.json()
const posts = await data.json()
// ...
}
```
Expand All @@ -293,7 +297,7 @@ const getCachedPosts = unstable_cache(
)

export default async function Page() {
let posts = getCachedPosts()
const posts = getCachedPosts()
// ...
}
```
Expand Down Expand Up @@ -367,8 +371,8 @@ export async function getStaticProps({ params }) {
// If this request throws an uncaught error, Next.js will
// not invalidate the currently shown page and
// retry getStaticProps on the next request.
let res = await fetch(`https://api.vercel.app/blog/${params.id}`)
let posts = await res.json()
const res = await fetch(`https://api.vercel.app/blog/${params.id}`)
const posts = await res.json()

if (!res.ok) {
// If there is a server error, you might want to
Expand Down

0 comments on commit 3fb0d87

Please sign in to comment.