Next.js Discord

Discord Forum

Quick question about SSG & the app router

Unanswered
Polar bear posted this in #help-forum
Open in Discord
Polar bearOP
I'm playing around with the app router and server components for the first time & i'm wondering if the following code will statically generate this page.

don't mind the naming too much as i'm just trying to learn this new way to statically generate haha

import Link from "next/link"

type Posts = {
  userId: string;
  id: number;
  title: string;
  body: string;
}

export default async function Blog() {
  const blogsRes = await fetch('https://jsonplaceholder.typicode.com/posts')
  const blogs = (await blogsRes.json()) as Posts[]

  return (
  <>
    <header>
      <h1 className='text-2xl'>
        Blog
      </h1>

      {blogs.map((post)=><div key={post.id}>
        <Link href={`/blog/${post.id}`}>
          Blog {post.id}
        </Link>
      </div>)
      }
      
    </header>
  </>
  )
}


thanks!

7 Replies

at a glance it will build statically as its static by default, but i dont have enough information
Polar bearOP
 ✓ Creating an optimized production build
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
 ✓ Generating static pages (9/9)
 ✓ Collecting build traces
 ✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ○ /                                    158 B          80.5 kB
├ ○ /_not-found                          0 B                0 B
├ ○ /blog                                176 B          87.5 kB
├ λ /blog/[name]                         158 B          80.5 kB
├ ○ /contact                             158 B          80.5 kB
├ ○ /info                                158 B          80.5 kB
â”” â—‹ /work                                158 B          80.5 kB
+ First Load JS shared by all            80.4 kB
  ├ chunks/472-f3d8bf8bafe439be.js       27.5 kB
  ├ chunks/fd9d1056-c3c6b17c8c4bbfa4.js  50.9 kB
  ├ chunks/main-app-a70aa1a834c1f3a2.js  232 B
  â”” chunks/webpack-87d147c8991fb99e.js   1.73 kB


λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
â—‹  (Static)  automatically rendered as static HTML (uses no initial props)
aardani
so that means /blog is static
Polar bearOP
sounds good
thanks for your help!
aardani
no worries