SSR
Next.js는 SSR을 쉽게 구현할 수 있는 프레임워크다. Next.js에서 SSR을 구현하기 위해서는 다음과 같은 작업이 필요하다.
라우팅 파일(pages 폴더)
pages 폴더는 Next.js에서 라우팅을 설정하는 곳이다. pages 폴더에 파일을 생성하면 해당 파일명으로 라우팅이 된다.
CSR-routes 폴더에 있는 파일들을 이곳으로 옮겨준다.
- pages 폴더 안에 파일이 아닌 폴더가 있는 경우, 해당 폴더는 동적 라우팅(Dynamic Routing)을 구현하기 위한 것이다.
- 동적 라우팅은 URL의 경로 일부를 변수로 사용하는 경우에 사용된다.
예를 들어, 게시글 상세 페이지를 구현하는 경우, 페이지 경로에 게시글 ID를 포함시키고 싶을 수 있다. 이 경우, 동적 라우팅을 사용하여 게시글 ID를 변수로 처리할 수 있다.
-
동적 라우팅을 구현하기 위해서는 해당 폴더 내부에 [변수명].tsx 파일을 생성해야 한다.
-
파일 이름에 대괄호[]로 감싼 변수명을 포함시켜야 한다. 예를 들어, pages/notes/[category].tsx 파일은 pages/notes/1과 같은 경로로 접근했을 때, id 변수에 1이 할당되도록 동적 라우팅을 구현한다.
-
변수를 여러가지를 넣고싶다면 /write/[...slug]/tsx와 같이 [...변수명]으로 작성한다.
-
동적 라우팅을 사용하는 페이지에서는 getStaticProps() 함수를 함께 구현해야 한다.
-
getStaticProps() 함수에서는 라우팅 변수 값을 이용하여 해당 페이지에 필요한 데이터를 불러온다.
컴포넌트 파일(components 폴더)
components 폴더는 재사용이 가능한 컴포넌트를 모아놓는 곳이다. pages 폴더에서 해당 컴포넌트를 불러와 사용할 수 있다.
동적인 컴포넌트(_app.tsx)
_app.tsx 파일은 Next.js에서 제공하는 공통 레이아웃 파일이다. 모든 페이지에서 공통으로 사용되는 컴포넌트, 예를 들어 header, footer 등을 여기에서 구현할 수 있다.
import React from 'react';
import { AppProps } from 'next/app';
import { ChakraProvider } from '@chakra-ui/react';
import { DefaultSeo } from 'next-seo';
import Header from '../components/Header';
import Footer from '../components/Footer';
function MyApp({ Component, pageProps }: AppProps) {
return (
<ChakraProvider>
<DefaultSeo {...SEO} />
<Header />
<Component {...pageProps} />
<Footer />
</ChakraProvider>
);
}
export default MyApp;
이렇게 SSR을 구현하면 초기 로딩 속도가 빨라지고 SEO를 개선할 수 있다.
CSR => SSR 속도문제
Firebase의 getDocs나 onSnapshot 등과 같은 기능들을 모두 서버 사이드 렌더링으로 변경했지만, 그 결과로 속도가 매우 느려졌다... 서버 사이드 렌더링으로 변경하기 전에는 보이지 않았던 문제들이 나타나기 시작했다. 이러한 문제들을 직접 겪어보면서 어떻게 개선해 나갈 수 있는지를 파악하고자 했다.
-
SEO에 정보를 보내야 하는 페이지인 Entry 페이지와 같은 페이지들은 전부 서버 사이드 렌더링으로 구현했다. 하지만, 모든 글들을 보여주는 페이지인 Notes 페이지와 같은 페이지들은 일부만 서버 사이드 렌더링으로 구현하고, 나머지 firestore Database 글들은 클라이언트 사이드 렌더링으로 구현했다.
-
글 전부를 보여주지 않고 페이지를 넘길 수 있는 형식으로 만들어서 첫 페이지 진입시의 속도를 개선했다. 이를 통해 사용자가 빠르게 페이지에 접근할 수 있도록 했다.
-
스켈레톤 카드를 만들어서, firestore Database가 로딩되기전에 보여준다.
-
일부 문제를 해결하고 사용자 경험을 개선할 수 있었다. 추후에도 더욱 효율적인 속도 개선 방법을 찾아나가고자 노력하고 있다.
SEO
SEO(Search Engine Optimization)는 웹사이트가 검색 엔진에서 잘 노출되고 검색 결과에서 상위에 노출될 수 있도록 최적화하는 작업이다. Next.js에서는 next-seo라는 패키지를 이용하여 SEO를 설정할 수 있다.
next-seo 패키지 설치하기
먼저, next-seo 패키지를 설치한다. 아래 명령어를 터미널에서 실행한다.
npm install next-seoSEO 컴포넌트 생성하기
SEO 컴포넌트를 생성한다. components 폴더 안에 SEO.tsx 파일을 생성하고, 아래 코드를 작성한다.
import Head from "next/head";
import { DefaultSeo } from "next-seo";
type SEOProps = {
title?: string;
description?: string;
ogImage?: {
url: string;
width: number;
height: number;
};
};
const SEO: React.FC<SEOProps> = ({ title, description, ogImage }) => {
const siteTitle = "My Website"; // 사이트 제목
const siteDescription = "This is my website"; // 사이트 설명
const siteUrl = "https://www.mywebsite.com"; // 사이트 URL
const defaultOgImage = {
url: `${siteUrl}/og-image.png`,
width: 1200,
height: 630,
};
return (
<>
<DefaultSeo
title={title ? `${title} | ${siteTitle}` : siteTitle}
description={description || siteDescription}
canonical={siteUrl}
openGraph={{
url: siteUrl,
title: title || siteTitle,
description: description || siteDescription,
images: ogImage ? [ogImage] : [defaultOgImage],
site_name: siteTitle,
}}
/>
<Head>
{/* 추가적인 head 설정 */}
</Head>
</>
);
};
export default SEO;SEO 컴포넌트는 title, des cription, ogImage를 props로 받습니다. title은 페이지 제목, description은 페이지 설명, ogImage는 페이지의 OG(Open Graph) 이미지 정보이다. SEO 컴포넌트 내에서는 next-seo의 DefaultSeo 컴포넌트를 이용하여 title, description, og:image 등을 설정한다. 또한 Head 컴포넌트를 이용하여 추가적인 head 설정을 할 수 있다.
페이지에 SEO 적용하기
페이지 컴포넌트에서 SEO 컴포넌트를 불러와 사용한다. 예를 들어, pages/index.tsx 파일에서는 아래와 같이 SEO 컴포넌트를 사용할 수 있다.
import SEO from "../components/SEO";
const HomePage = () => {
return (
<>
<SEO />
{/* 페이지 내용 */}
</>
);
};
export default HomePage;
완성
카톡에서 OG를 확인할수있다.
