Development

Errors can be divided into two categories: expected errors and uncaught exceptions.

Expected errors are those that can occur during the normal operation of the application, such as those from server-side form validation or failed requests. These errors should be handled explicitly and returned to the client.

You can use the useActionState hook to handle expected errors in Server Functions. For these errors, avoid using try/catch blocks and throw errors. Instead, model expected errors as return values.

Uncaught exceptions are unexpected errors that indicate bugs or issues that should not occur during the normal flow of your application. These should be handled by throwing errors, which will then be caught by error boundaries.

Errors will bubble up to the nearest parent error boundary. This allows for granular error handling by placing error.tsx files at different levels in the route hierarchy.

Error boundaries don’t catch errors inside event handlers. They’re designed to catch errors during rendering to show a fallback UI instead of crashing the whole app.

A Server Function is an asynchronous function that runs on the server. They can be called from client through a network request, which is why they must be asynchronous. In an action or mutation context, they are also called Server Actions.

npmなどでは--ignore-scriptsが同様のオプションだが、npmなどは特定のパッケージのみを許可することが難しいので、pnpm以外では実際には運用するのは難しいと思う。

If you want to pass data from the backend to the frontend (as a <script> tag), you need to 'use client'. If you want to pass data from the frontend to the backend (as an API call), you need to 'use server'. Otherwise, you don’t need either directive—you just use import as usual and stay in the current world.

'use server' は、クライアントサイドのコードから呼び出せる、サーバサイドの関数をマークします。

サーバ関数への引数は、完全にクライアントで制御されるものです。セキュリティのため、入力は常に信頼できないものとして扱い、引数の検証やエスケープを適切に行ってください。

サーバ関数とはサーバ側の公開エンドポイントとなるため、クライアントコードのどこからでも呼び出すことができます。

そのファイル内のすべてのエクスポートが、クライアントコードでインポートされる場合も含み、あらゆる場所で使用できるサーバアクションとしてマークされます。

サーバ関数は、サーバ側の状態を書き換える、更新目的のために設計されています。データの取得には推奨されません。

サーバ関数はトランジションの中で呼び出すようにしてください。

サーバ関数への引数は常に信頼できない入力として扱い、あらゆるデータ書き換えを検証してください。

その関数がクライアントから実行可能であるとマーク

クライアント上でサーバ関数を呼び出すと、渡された引数のシリアライズされたコピーを含んだネットワークリクエストがサーバに送信されます。

静的ファイルを配信する際は圧縮を利用するため、バンドルサイズの差は gzip された単位で比較することが重要になります。最近では gzip よりも圧縮率のいい、brotil を利用することも増えてきているようです。

圧縮前のサイズはブラウザが JavaScript を解析、コンパイル、実行するのにかかる時間に影響します。これらはコードサイズに比例する傾向があります。

JavaScriptのDOM構造の偽コピーを一般的に「仮想DOM」と呼びます。

Reactが「レンダリング」と呼ぶのは、仮想DOMの計算処理です。

Together, these directives let you express the client/server boundary within the module system. They let you model a client/server application as a single program spanning the two machines without losing sight of the reality of the network and serialization gap. That, in turn, allows seamless composition across the network.

'use server' exports server functions to the client.

Your DOM can easily change so having your tests depend on your DOM structure can lead to failing tests.

To make tests resilient, we recommend prioritizing user-facing attributes and explicit contracts.

Use @typescript-eslint/no-floating-promises ESLint rule to make sure there are no missing awaits before the asynchronous calls to the Playwright API.

LLMは非決定的な抽象化を導入しているため、プロンプトをgitに保存しても、毎回同じ振る舞いが返ってくるとは限りません。同僚のBirgittaが言うように、私たちは抽象化のレベルを上げているだけでなく、同時に非決定性という横方向にも進んでいるのです。