Image

Lazy Loading

이미지 사이즈 최적화

placeholder

사용하기 위한 조건

• 왜? 리모트 이미지의 경우 Next.js 서버에서 이미지를 가지고 있는 리모트 서버에 직접 요청을 하기 때문에 **모든 url에 대한 접근을 허용할 경우 악의를 가진 사용자에 의해 공격을 받을 가능성이 있다. ** 이를 방지하기 위해 이미지를 서빙하는 서버가 안전한 서버라는 것을 Next.js에 알려줘야 하기 때문에, next.config.js 파일에 CDN의 host를 명시해야 한다.

javascript
1const nextConfig = {
2  reactStrictMode: true,
3  images: {
4    domains: ["imagedelivery.net"],
5  },
6};

MiddleWare

사용 방법

javascript
1import type { NextRequest } from 'next/server'
2
3export function middleware(request: NextRequest) {
4  
5  if (request.nextUrl.pathname.startsWith('/about')) {
6    // This logic is only applied to /about
7    // sessionName에서 cookie를 가져옴
8 	if(request.cookies.has("sessionName")){console.log("ok")}
9    
10  }
11
12  if (request.nextUrl.pathname.startsWith('/dashboard')) {
13    // This logic is only applied to /dashboard
14  }
15}

Dynamic Imports

javascript
1const com = dynamic(() => import("components/com"), {ssr:false});

javascript
1const big = dynamic(() => import("components/com"), {
2  ssr: false,
3  loading: () => <span>Loading...</span>,
4});

document

Script Component

1. strategy beforeInteractive: 페이지가 interactive 되기 전에 로드 afterInteractive: (기본값) 페이지가 interactive 된 후에 로드 lazyOnload: 다른 모든 데이터나 소스를 불러온 후에 로드 worker: (실험적인) web worker에 로드

javascript
1<Script src="~" strategy="lazyOnLoad" />

2. onLoad 만약 script가 불러져왔다면 실행할 함수

javascript
1<Script src="~" onLoad={() => console.log("done")} />

getServerSideProps

그럼 캐시 데이터를 미리 제공해서 둘 다 사용해 보자

javascript
1// 안에 useSWR로 데이터를 받아오고 있음
2const Home: NextPage = () =>{...}
3
4const Page: NextPage<{products:ProductsWithCount[]}>= ({products}) => {
5   return (
6      <SWRConfig value={{
7         fallback:{
8            "/api/home" :{ ok:true, products}
9         }
10      }}>
11      <Home/>
12      </SWRConfig>
13   )
14}
15
16export ssr fun ~~~
17
18// wrapping 한 페이지를 export
19export default Page

getStaticProps (SSG)

정적인 라우트

javascript
1export async function getStaticProps() {
2  const posts = readdirSync("./posts").map((file) => {
3    return readFileSync(`./posts/${file}`, "utf-8");
4  });
5  return {
6    props: { posts },
7  };
8}

동적인 라우트 (getStaticPaths 사용)

javascript
1export async function getStaticPaths() {
2  const res = await AllPostId();
3
4  const paths = res?.map((post: any) => ({
5    params: {
6      id: post.id.toString(),
7    },
8  }));
9  return { paths, fallback: "blocking" };
10}

1. 404 반환하지 않고 getStaticProps 함수를 이용한 값으로 HTML파일과 JSON파일을 만들어낸다.
2. 백그라운드에서 작업이 끝나면 요청된 path에 해당하는 JSON 파일을 받아 새롭게 페이지를 렌더링함
3. 새롭게 생성된 페이지를 기존 빌드시 프리렌더링된 페이지 리스트에 추가. 같은 path로 온 이후 요청들에 대해서는 처음 생성한 페이지를 반환함

1. true일 때와 비슷하게 동작하지만 최초 만들어 놓지 않은 path에 대한 요청이 들어온 경우 fallback 상태를 보여주지 않고 SSR처럼 동작한다.

javascript
1const router = useRouter();
2router.isFallback; // fallback이 렌더링되고 있다면 true

ISR이란

javascript
1export async function getStaticProps() {
2  const res = await fetch("https://.../posts");
3  const posts = await res.json();
4
5  return {
6    props: {
7      posts,
8    },
9    revalidate: 10,
10  };
11}

그럼 revalidate가 뭔가

ODR On-demand Revalidation

javascript
1await res.revalidate("api url");