Next.jsにおけるデータ処理モデルの選択

import { cache } from 'react';
import { cookies } from 'next/headers';
 
// キャッシュされたヘルパーメソッドを使用すると、手動で渡すことなく、
// 多くの場所で同じ値を簡単に取得できます。
// これにより、サーバーコンポーネントからサーバーコンポーネントに渡すことがなくなり、
// クライアントコンポーネントに渡すリスクが最小限に抑えられます。
export const getCurrentUser = cache(async () => {
  const token = cookies().get('AUTH_TOKEN');
  const decodedToken = await decryptAndValidate(token);
  // 機密トークンやプライベート情報をパブリックフィールドとして含めないでください。
  // クラスを使用して、誤ってオブジェクト全体をクライアントに渡さないようにします。
  return new User(decodedToken.id);
});

import 'server-only';
import { getCurrentUser } from './auth';
 
function canSeeUsername(viewer: User) {
  // 現時点では公開情報ですが、変更される可能性があります
  return true;
}
 
function canSeePhoneNumber(viewer: User, team: string) {
  // プライバシールール
  return viewer.isAdmin || team === viewer.team;
}
 
export async function getProfileDTO(slug: string) {
  // 値を渡さず、キャッシュされた値を読み戻し、コンテキストも解決し、遅延を容易にします
 
  // クエリの安全なテンプレート化をサポートするデータベースAPIを使用します
  const [rows] = await sql`SELECT * FROM user WHERE slug = ${slug}`;
  const userData = rows[0];
 
  const currentUser = await getCurrentUser();
 
  // すべてではなく、このクエリに関連するデータのみを返します
  // <https://www.w3.org/2001/tag/doc/APIMinimization>
  return {
    username: canSeeUsername(currentUser) ? userData.username : null,
    phonenumber: canSeePhoneNumber(currentUser, userData.team)
      ? userData.phonenumber
      : null,
  };
}

import {getProfile} from '../../data/user'
export async function Page({ params: { slug } }) {
  // このページは、機密情報が含まれていないことがわかっているため、
  // このプロファイルを安全に渡すことができます
  const profile = await getProfile(slug);
  ...
}

import Profile from './components/profile.tsx';
 
export async function Page({ params: { slug } }) {
  const [rows] = await sql`SELECT * FROM user WHERE slug = ${slug}`;
  const userData = rows[0];
  // サーバーコンポーネントからクライアントにデータを渡すため、
  // userDataのすべてのフィールドがクライアントに公開されます。
  // これは、`getServerSideProps`で`userData`を返すことと似ています。
  return <Profile user={userData} />;
}

'use client';
// これは、クライアントコンポーネントが必要とするよりもはるかに多くのデータを受け取り、
// サーバーコンポーネントがすべてのデータを渡すことを奨励するため、
// 不適切なpropsインターフェイスです。
// より良い解決策は、プロファイルのレンダリングに必要なフィールドだけを持つ
// 限定されたオブジェクトを受け入れることです。
export default async function Profile({ user }: { user: User }) {
  return (
    <div>
      <h1>{user.name}</h1>
      ...
    </div>
  );
}