1. Next.js 동작원리

• Next.js는 SSR(서버사이드 렌더링)이기 때문에 서버에서 HTML을 먼저 그리기 때문에 초기 로딩속도가 빠르다

2. 이유

• HTML을 그리고 CSS를 입히는거 같은데 그래서 새로고침을 하면 페이지가 CSS 입히기전 깨끗한 상태가 렌더링된후
• CSS를 입혀지기 때문에 새로고침을 하면 CSS가 입혀지지 않은걸 보여지게됨

3. 해결방법

• 다른 블로그들을 찾아보니 bable을 사용하여 많이 해결하던데 나는 다른방법을 사용하고자한다
• styled-components와 함께 SSR을 설정하기 위한 방법으로 useServerInsertedHTML Hook이란걸 사용하면됨
• 일단 StyledComponents.tsx 파일을 하나만든후 아래 코드를 붙여넣기하고

"use client";
import { useServerInsertedHTML } from "next/navigation";
import React from "react";
import { ReactNode, useState } from "react";
import { ServerStyleSheet, StyleSheetManager } from "styled-components";
export function StyledComponents({ children }: { children: ReactNode }) {
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement(); styledComponentsStyleSheet.instance.clearTag();
    return <>{styles}</>;
  });
  if (typeof window !== "undefined") return <>{children}</>;
  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
      {children}
    </StyleSheetManager>
  );
}

• 위의 컴포넌트를 import 해온후 body를 감싼다