動作するように作る話をします。することに数年前から取り組んでいます。SSRをやる上での注意点と対策について紹介します。向上するため)にやっています。ここでは説明しません。ダウンロードされてからになるので、遅れてしまいます。ユーザーの環境は様々で、潤沢なwifi環境が揃っていて、最新のマシンが使えて高速という環境ばかりではありません。古いマシンを使って、インターネット環境が整備されてない状況ではJavaScriptをダウンロードする時間もJavaScriptをダウンロードしてから実行する時間も遅くなります。向上することで、表示されるまでの時間の短縮を行っています。TTI乖離が長ければ長いほど「見えてるのに操作できない時間」が長くなり、ユーザーのストレスになります。呼ばれる前処理をする必要があります。時間までインジケーターを出してユーザーに処理中であることを表示するのも有効です。巨大なライブラリに依存していると全体で読み込まれるJavaScriptがgzip後で数100kbを超えることも珍しくなく、限界があります。してしまうと、「見えるまでの時間」と「操作するまでの時間」のギャップはなくなります。この場合、人間としては「見えて(認知して)から操作する」ので、ユーザーにとって最適な時間にはなりません。読み込まれる前でも操作できるようにするそこで、今取り組んでるのが、いくつかのページではJavaScriptが読み込まれる前でも普通にウェブアプリケーションとして操作できるようにしています。動くように作らなければいけません。した状態でどこまでちゃんと動作するかを確認しながら作る必要があります。使って遷移させることが多いです。遷移先のURLを定義します。タグでの遷移として動作します。e.target.href);})この辺りはSSRを作る上ではライブラリに頼ることも多いと思うので、ライブラリが提供してくれる機能でも動作します。ライブラリも同様の機能を提供します。受け付けられるエンドポイントを用意する必要があります。属性もきちんと指定する必要があります。リクエストになってしまったり、ボタンをsubmitにしてなかったために、きちんと送信されないケースも散見されます。対策もしてあげる必要があることです。呼ばれるセッションに紐づくランダムな値を設定しないといけません。ときにpreflightチェックのリクエストが飛ぶこともないので、準備が必要です。対してmethodを指定する。</div></form>ログインのような典型的なフォームの場合はユーザーが何をするべきかが表示された段階ではわかっている事が多いため、操作するまでの時間を短縮することで、効果も大きくなります。検索画面のようなフォームも入力項目が少ないため、ユーザーは表示された瞬間に迷わずにクエリーを打ち込みに行きます。このときにクエリーパラメータでURLが変わったとしても動くように作ってあげる必要があります。このアプローチのメリットとデメリットアプローチの内容はわかったところで、メリットとデメリットについて紹介します。メリットまずは性能的な面でメリットがあります。やめて、SSRでのみReactを採用した、という記事がありましたが、そこでもパフォーマンスの改善事例として紹介されていました。アプローチとしてはほぼ一緒です。ダウンロードされてなくても動作させる方が効果的です。しても効果があります。HTMLを書く必要に迫られます。いった属性もきちんと書かないといけません。することで、矯正ギブスのような役割を果たしてもらえます。デメリット一言で言うと、「実装するのが大変」というところです。オフでも動くようなアプリケーションにすることは実装の観点から見るとやってやれなくはないものの、大変です。動作するアプリと同じUXを提供することは不可能です。属性にマッチしてるかどうかしか出すことができません。細かく入力値をチェックできます。属性で正規表現で書いたとしても、「パターンにマッチしたかどうか」だけしかチェックされません。「記号が抜けてる」、「8文字以下」という細かくメッセージで何が満たせてないかを表示させることで入力を補助させることができます。した状態で動作させるようにするのはやはり難しいと言わざるを得ません。オンじゃないと動かない旨を出してあげるくらいでしょうか。最後にどうしようもないところですが、解析系のタグが動作する前に動いてしまうので、ユーザーのトラッキングはできない可能性があります。この手の解析系がちゃんと動かないとNGのところも多いので、注意してください。動作するアプリを作ることに関しての紹介をしました。読み込まれる前でも動作させることで解消しています。すべてのページでできているわけではなく、トップページに近いような場所でのみ、部分的に動作させています。することで以下のような効果を狙っています。オフのユーザーであってもある程度は利用できるようにするすべてのUXをJSオフの状態で提供することは不可能なので、必要なページではJSがダウンロードされるまで動作しないように作るこうすることで、SPAのUXも提供しつつ、潤沢なインターネット環境を持っていないユーザーであってもある程度高速に表示され、動作するように作っています。(2)リンクヘルプはてなブログお知らせはてなブログをはじめよう!yosuke_furukawaさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。