[Next.js]Parallel Routesパラレルルートとは

パラレルルート
パラレルルートでは、同じレイアウト内で1つまたは複数のページを同時に、または条件付きでレンダリングできます。ダッシュボードやソーシャルサイトのフィードなど、アプリの非常に動的なセクションに便利です。

例えば、ダッシュボードを考えると、パラレルルートを使ってチームページとアナリティクスページを同時にレンダリングすることができます：

Twitterのログイン画面を例にすると一番最初のホーム画面からログイン画面へと移動はするが後ろの背景にログイン画面が残っている状態のようなもの

Intercepting RoutesとParallel Routesをかつようするとできること

Next.jsにおける「Intercepting Routes」と「Parallel Routes」の利用は、ウェブアプリケーションのルーティングの柔軟性とユーザーエクスペリエンスを向上させるために重要です。ただし、Next.jsの公式ドキュメントや標準機能の中で、これらの用語が直接的に使われているわけではありません。しかし、これらの概念を応用することで、特定のシナリオで有用な機能を実装することが可能です。

Intercepting Routes（ルートの傍受）

• 定義：特定の条件下でルート（URL）の変更を傍受し、カスタムのロジックを実行するプロセス。

• 用途：

  • 認証：ユーザーが特定のページにアクセスする前に、認証ステータスを確認し、必要に応じてログインページにリダイレクト。

  • データフェッチング：ページにアクセスする前に、必要なデータを事前に取得し、ページのレンダリング時にデータを利用。

  • 条件付きルーティング：アプリケーションの状態やユーザーの選択に基づいて、動的にルートを変更。

Parallel Routes（並行ルート）

• 定義：複数のルート（またはコンポーネント）が並行して存在し、同時にレンダリングされること。

• 用途：

  • モーダルやオーバーレイの管理：ベースとなるページの内容を保持しながら、モーダルやオーバーレイウィンドウを表示。

  • タブやサイドバーのコンテンツの同時表示：メインコンテンツエリアとは独立して、サイドバー内の情報やタブの内容を切り替え。

  • ページ遷移時のスムーズなアニメーション：新しいページコンテンツのロードと並行して、ページ遷移のアニメーションを表示。

実装

Next.jsでは、これらの機能はカスタムフック、高階コンポーネント、またはAPIルートを使って実装することが可能です。例えば、getServerSideProps や getStaticProps を利用してデータをフェッチする、useEffect フックを使ってルートの変更を監視する、コンテキストAPIを使用してアプリケーションの状態を管理するなどが考えられます。
Next.jsの強力なルーティングシステムを活用することで、これらの高度なルーティング機能を実現し、よりリッチでインタラクティブなウェブアプリケーションを構築することができます。

Parallel Routes패랠 라우터의듯은 하나 패이지랑 또 하나 패이지를 둘 동시에 보여주는 거다.문제는 폴더가 서로 다른 층에 있다면 같은 폴더에 가져와야한다(이동 시켜야 )

서버 컴포넌트는 클라이언트 컴포넌트를 임포트해도 되는데 클라이언트 컴포넌트는 서버 컴포넌트를 임포트하면 안됩니다
React에서 서버 컴포넌트와 클라이언트 컴포넌트의 관계에 대해 설명하겠습니다.

서버 컴포넌트

• 서버 컴포넌트는 서버에서만 렌더링되며, 최종적으로 클라이언트로 전송되는 HTML을 생성합니다. 이 컴포넌트들은 서버의 데이터를 직접적으로 접근할 수 있고, 서버의 리소스를 이용하여 렌더링에 필요한 데이터를 준비할 수 있습니다.

클라이언트 컴포넌트

• 클라이언트 컴포넌트는 브라우저에서 실행되며, 동적인 상호작용을 처리합니다. 이 컴포넌트들은 사용자의 입력을 처리하거나, 클라이언트 사이드에서만 사용 가능한 API를 호출하는 등의 작업을 수행합니다.

임포트 규칙

• 서버 컴포넌트는 클라이언트 컴포넌트를 임포트할 수 있습니다. 이는 서버 컴포넌트가 렌더링 과정에서 클라이언트 컴포넌트를 포함하여 최종적인 HTML을 생성할 수 있음을 의미합니다. 예를 들어, 서버 컴포넌트가 데이터를 준비하고, 그 데이터를 기반으로 클라이언트 컴포넌트를 통해 동적인 UI를 구성할 수 있습니다.

• 반면에, 클라이언트 컴포넌트는 서버 컴포넌트를 임포트해서는 안 됩니다. 클라이언트 컴포넌트는 브라우저에서 실행되기 때문에, 서버에서만 사용할 수 있는 리소스나 데이터에 직접 접근할 수 없습니다. 서버 컴포넌트를 클라이언트 컴포넌트에서 임포트하려고 하면, 서버에서만 실행될 수 있는 코드가 클라이언트 사이드에서 실행되려고 시도할 때 에러가 발생할 수 있습니다.

이러한 규칙은 서버와 클라이언트 간의 책임 분리를 명확히 하고, 애플리케이션의 구조를 더욱 효율적으로 관리하기 위한 것입니다. 서버 컴포넌트와 클라이언트 컴포넌트를 적절히 구분하여 사용함으로써, 개발자는 더욱 강력하고 유지보수가 용이한 웹 애플리케이션을 구축할 수 있습니다.