반응형

React에서 구현하기 어려웠던 부분을

 

NextJS에서 간단하게 처리가 가능하다.

 

각 병렬처리할 컴포넌트를 만들어 준다.

 

import { API_URL } from "../app/(Home)/page";

async function getMovies(id: string) {
  await new Promise((resolve) => setTimeout(resolve, 2000));
  return fetch(`${API_URL}/${id}`).then((response) => response.json());
}

export default async function MovieInfo({ id }: { id: string }) {
  const movies = await getMovies(id);
  return <h6>{JSON.stringify(movies)}</h6>;
}

 

Movie정보를 가져오는 첫번째 컴포넌트 (MoiveInfo)

 

그리고

import { API_URL } from "../app/(Home)/page";

async function getVideos(id: string) {
  await new Promise((resolve) => setTimeout(resolve, 4000));
  return fetch(`${API_URL}/${id}/videos`).then((response) => response.json());
}

export default async function MovieVideos({ id }: { id: string }) {
  const videos = await getVideos(id);
  return <h6>{JSON.stringify(videos)}</h6>;
}

 

Movie Video를 가지고 오는 2번째 컴포넌트 (MovieVideos)

 

이렇게 만든 컴포넌트를 가지고 

 

원하는 페이지에서 <Suspense> 를 구성하여 코드를 작성하면

import { Suspense } from "react";
import MovieInfo from "../../../../Components/movie-info";
import MovieVideos from "../../../../Components/movie-videos";

export default async function MovieDetail({
  params: { id },
}: {
  params: { id: string };
}) {
  return (
    <div>
      <Suspense fallback={<h1>Loading movie info</h1>}>
        <MovieInfo id={id} />
      </Suspense>
      <Suspense fallback={<h1>Loading movie videos</h1>}>
        <MovieVideos id={id} />
      </Suspense>
    </div>
  );
}

 

이렇게 작성하면 await 동안에는 fallback이 작용하여

 

Loading movie info 와 Loading movie videos가 동시에 나타났다가,

 

fetch가 끝난 거 부터 병렬적으로 Json 데이터를 받아올 수 있다.

 

이 모든 병렬프로그래밍을 서버에서 진행한다는게 미쳤다..

 

 

반응형
저작자표시

'Front-End > NextJS' 카테고리의 다른 글

[NextJS] VsCode에 NextJS 설치 및 초기설정  (1) 2024.09.13
반응형

1. 폴더 만들기

mkdir <폴더명>

 

2. 폴더 들어가기

cd <폴더명>

 

3. 해당폴더 Visual Studio Code에서 열기

code . 

visual studio code 창 열리면 해당 terminal에서

npm init -y

 

4. Package.json 변경

Pakage.json 내용 변경.

 

5. Next, React, React-Dom 최신 버전 설치

npm install react@latest next@latest react-dom@latest

 

NextJS는 프레임 워크라 명명 규칙을 잘 따라야 한다.

 

APP 폴더안에 Page가 있어야 그것을 찾아서 렌더링을 해준다.

 

page는 page.tsx or page.jsx로 만들어 주면 초기 세팅은 끝이다.

 

6. page 작성

export default function Home() {
  return <div>Home</div>;
}

 

7. 실행하기

npm run dev

 

 

실행하면 알아서 TypeScript가 필요하다고 설치해주고

 

layout.tsx가 없다고 설치까지 해준다.

 

NextJS 프레임워크 👍

 

layout.tsx 에 들어가면 아래와 같이 설정되어있는데,

 

전체적인 페이지의 레이아웃을 설정해주는 곳이라고 보면 된다.

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

metadata에서 title을 '개발일지'로 변경하면

 

react에서 Helmet 이라는 라이브러리를 사용했었는데, 

 

NextJS는 그냥 layout에서 변경하면 알아서 반영해준다.

 

 

안쓸이유가 없어보이는 NextJS....

반응형
저작자표시

'Front-End > NextJS' 카테고리의 다른 글

[NextJS] async 서버 컴포넌트 단위로 병렬 처리  (0) 2024.09.13

+ Recent posts

티스토리툴바