Remixメモ

脱フロントよわよわ
Remix調べてたらNextにも他にも派生するあるある

こういったケースでは、SSRでHTML全体を作り直すよりも、クライアント側で動的に <Outlet /> 内を画面遷移して、 useLoaderData() の内部で非同期処理を行なってJSONデータだけをフェッチしてきたほうが、ネットワークの通信量を節約できます。

こまきち

rel="noopener noreferrer"

noopener
役割: noopenerは、リンク先のページがリンク元のページにアクセスすることを防ぎます。
詳細: target="_blank"を使うと、新しいタブでリンク先ページが開きますが、これによりリンク先ページのJavaScriptからwindow.openerオブジェクトを通じてリンク元ページにアクセスが可能になります。このアクセスを遮断するのがnoopenerの役割です。
利点: リンク元のページにアクセスを防ぐことで、リンク先ページが悪意のあるスクリプトを持っている場合に、リンク元のページを操作したりリダイレクトさせたりするリスクを防ぎます。
noreferrer
役割: noreferrerは、リンク先ページにリファラーヘッダーを送らないようにします。
詳細: 通常、リンクをクリックした際、リンク元のURL情報がリンク先ページに「リファラーヘッダー」として送信されます。しかし、noreferrerを指定すると、この情報が送信されなくなります。
利点: リファラーヘッダーを送らないことで、リンク先ページにリンク元の情報が知られることがなくなり、プライバシー保護の観点で有効です。また、noopenerがサポートされていないブラウザでも、noreferrerがあるとwindow.openerへのアクセスが防がれます。
by chatGPT 4o

Hydration、参照透過性

Resumable

camelCaseとPascalCase

やりたいことはこれに近い

クライアント側の水和って表現良いな

あの現象FOUCっていうんだ

マジで知らん単語ばっかり

Cumulative Layout Shift (CLS)

こまきち

すげえなと言うしかない

こまきち

Routeは必読(Routeもが正しいだろうけど)

こまきち

うおーなるほどね

app/
├── routes/
│ ├── ($lang)._index.tsx
│ ├── ( $lang).$ productId.tsx
│ └── ($lang).categories.tsx
└── root.tsx

こまきち

これもすげえな

app/
├── routes/
│ ├── _landing._index/
│ │ ├── route.tsx
│ │ └── scroll-experience.tsx
│ ├── _landing.about/
│ │ ├── employee-profile-card.tsx
│ │ ├── get-employee-data.server.ts
│ │ ├── route.tsx
│ │ └── team-photo.jpg
│ ├── _landing/
│ │ ├── footer.tsx
│ │ ├── header.tsx
│ │ └── route.tsx
│ ├── app.index/
│ │ ├── route.tsx
│ │ └── stats.tsx
│ ├── app.projects/
│ │ ├── get-projects.server.ts
│ │ ├── project-buttons.tsx
│ │ ├── project-card.tsx
│ │ └── route.tsx
│ ├── app/
│ │ ├── footer.tsx
│ │ ├── primary-nav.tsx
│ │ └── route.tsx
│ ├── app.projects.$id.roadmap/
│ │ ├── chart.tsx
│ │ ├── route.tsx
│ │ └── update-timeline.server.ts
│ └── contact-us.tsx
└── root.tsx

こまきち

この辺もねー

こまきち

テスト