Stock

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' は、クライアントサイドのコードから呼び出せる、サーバサイドの関数をマークします。

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

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

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

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

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

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

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

ソフトウエア・アーキテクトは、すべてを手にすることはできないということがわかっていなければなりません。

学びて思わざれば則ちくらし、思いて学ばざれば則ちあやうし

Everything is a trade-off

Software engineering is all about choosing the right trade-off. No matter it is designing software architecture or writing code. Everything is a trade-off. There is no perfect solution. You always need to pick the right trade-off in your day-to-day routine.

静的ファイルを配信する際は圧縮を利用するため、バンドルサイズの差は 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.