Lighthouse 만점으로 증명하는 Next.js SEO 전략 (feat. 서버 컴포넌트)

Route (app)                                         Size  First Load JS
┌ ○ /                                              804 B         111 kB
├ ○ /_not-found                                     1 kB         102 kB
├ ○ /about                                       2.16 kB         109 kB
├ ƒ /api/[...nextauth]                             153 B         102 kB
├ ƒ /api/comments                                  153 B         102 kB
├ ƒ /api/og                                        153 B         102 kB
├ ○ /apple-icon.png                                  0 B            0 B
├ ƒ /atom                                          153 B         102 kB
├ ƒ /feed                                          153 B         102 kB
├ ○ /icon.png                                        0 B            0 B
├ ○ /manifest.webmanifest                          153 B         102 kB
├ ƒ /post                                        3.37 kB         155 kB
├ ● /post/[postSlug]                             4.42 kB         151 kB
├   ├ /post/seo-optimization-with-lighthouse
├   ├ /post/separating-ui-and-domain-components
├   ├ /post/ios-popup-policy-and-window-open
├   └ [+4 more paths]
├ ○ /robots.txt                                    153 B         102 kB
├ ƒ /rss                                           153 B         102 kB
└ ○ /sitemap.xml                                   153 B         102 kB
+ First Load JS shared by all                     101 kB
  ├ chunks/4bd1b696-cc729d47eba2cee4.js          54.1 kB
  ├ chunks/5964-b14196516283122f.js                44 kB
  └ other shared chunks (total)                  3.39 kB
 
 
○  (Static)   prerendered as static content
●  (SSG)      prerendered as static HTML (uses generateStaticParams)

// rss 생성 코드
{
  title: post.title,
  id: post.slug,
  link,
  description: post.description,
  content: [...post.content].slice(0, RSS_CONTENT_SIZE).join(''),
  author: [master],
  contributor: [master],
  date: new Date(post.date),
  category: post.tags?.map((tag) => {
    return {
      name: tag,
      domain: siteConfig.url,
      scheme: siteConfig.url,
      term: tag,
    };
  }),
  image: post.image || undefined,
}

// sitemap.ts 일부
[
  {
    url: getHref(pathsConfig.home),
    lastModified: new Date(),
    changeFrequency: Frequency.WEEKLY,
    priority: 1,
  },
  {
    url: getHref(pathsConfig.about),
    lastModified: new Date(),
    changeFrequency: Frequency.MONTHLY,
    priority: 0.8,
  },
  {
    url: getHref(pathsConfig.post),
    lastModified: new Date(),
    changeFrequency: Frequency.WEEKLY,
    priority: 0.7,
  },
  ...postSiteMaps,
];

<section>
  <h3>게시글</h3>
  <!-- 디자인을 위한 구역 -->
  <div>
    <ul>
      <li>
        <article>게시글 상세</article>
      </li>
      <li>...</li>
      <li>...</li>
    </ul>
  </div>
</section>

// PostList.tsx
 
/**
 * titleProps?: {
    as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; // 모든것을 허용하지 말고 용도에 맞게 제한하기
  };
**/
{posts.map((post) => {
  return <PostItem key={post.id} post={post} variant={variant} titleProps={{ as: 'h3' }} {...rest} />;
})}
 

'use client';
import dynamic from 'next/dynamic';
import { Size } from '@/constants/size'
 
// 기존 Mermaid의 구현 코드는 MermaidContent로 이동합니다.
// ssr: false로 설정하여 클라이언트에서만 로드되도록 처리
const MermaidContent = dynamic(() => import('./MermaidContent'), {
  ssr: false,
  loading: () => <Loading size={Size.Lg} />,
});
 
export default function Mermaid({ chart }: { chart: string }) {
  return <MermaidContent chart={chart} />;
}