React Server Components を使うためのミニマムなフレームワーク Waku

2024/03/02 13 users ミニマム localhost React コンポーネント

http://localhost:3000/ にアクセスすると、Waku のデフォルトのページが表示されます。 React Server Components 冒頭で述べたように、Waku は React Server Components に対応しています。React Server Components は React の新しいパラダイムであり、サーバー上でのみ実行されるコンポーネントを提供します。サーバ... 続きを読む

Backend エンジニア視点からの GraphQL / GraphQL from a perspective of backend engineer

2024/02/08 103 users GraphQL companies Rails LayerX

"LayerX、スタディサプリ、SHEと考える　GraphQLが向いている現場とは？運用実践LT" で登壇した資料です。 引用した資料 [Rails アプリに RESTful API のレールを敷いて生産性が大きく上がった話 | Wantedly Engineer Blog](https://www.wantedly.com/companies/wantedly/post_articles/85098) [React Server Components... 続きを読む

React Server Components と GraphQL のアナロジー

2023/12/25 65 users アナロジー RSC GraphQL App Router 案件

Next.js の App Router が安定版となり、React Server Components (以下 RSC) を実際に試す環境が整ってきた。 実際、今年はやれどこそこのプロダクトが Next.js を採用しただのやっぱり捨てだのといった話題が尽きなかったように思う。 かくいう自分自身も、今年は App Router の案件に取り組んで RSC と格闘する日々を... 続きを読む

Kuma UI はどのように React Server Components をサポートしているのか

2023/12/20 6 users Kuma UI メンテナ Emotion ReadyFor

はじめに こんにちは。READYFOR でフロントエンドエンジニアとして働いている菅原（@kotarella1110）です！ 私は OSS が大好きで、React Hook Form や Kuma UI のメンテナとしても活動しています。 弊社のプロダクトでは CSS ライブラリとして Emotion を採用していますが、ランタイムでのパフォーマンス上の問題や App ... 続きを読む

Storybook v8 の React Server Components サポート

2023/12/09 7 users StorYBook サーバーサイド 動作 オプション

Storybook v8 の React Server Components サポート 2023.12.09 Storybook v8 では `experimentalNextRSC` オプションにより React Server Components をサポートしています。しかし、このオプションは React Server Components としての動作を再現しているわけではありません。サーバーサイドで Storybook が動作してる... 続きを読む

React Server Components のテスト手法

2023/11/26 51 users テスト手法 コンポーネント Testing Library

React Server Components のテスト手法 2023.11.26 現代におけるコンポーネントのテストは Testing Library を用いてテストを行うことが一般的です。しかし、2023 年　11 月現在、Testing Library はまだ Server Components のテストを十分にサポートしていません。そのため、Server Components のテストを行うには、別... 続きを読む

GitHub - alvarlagerlof/rsc-parser: A parser for the React Server components when sent over the network

2023/08/19 10 users GitHub

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. 続きを読む

React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ - エンジニアHub｜Webエンジニアのキャリアを考える！

2023/07/14 127 users Suspense 群雄割拠 フレームワーク エンジニアHub

エンジニアHub > 記事一覧 > React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ 群雄割拠のフロントエンドフレームワーク界でも、一歩抜きん... 続きを読む

Next.jsから学ぶWebレンダリング ~React誕生以前からApp Router with RSCまでの流れ~

2023/06/14 140 users why 箇条書き How What RSC

最近話題のReact Server ComponentsやIslands Architectureが何を解決しようとしてるか知るまでの簡単なWebレンダリングの流れを記載しました。 社内勉強会のために作成した資料となるため箇条書きになっておりますが、なるべくHowやWhatではなくWhyやトレードオフを記述するようにしています。（読みにくい or 誤った記... 続きを読む

React Server Components, Next.js App Router and examples

2023/05/07 6 users There were May 6

React Server Components, Next.js App Router and examples May 6, 2023 There were recently a number of discussions in the React community around the state of Server Components, the Next.js App Router and the future of tooling and rendering approaches. Here's my attempt at a brief summary of concept... 続きを読む

一言で理解するReact Server Components

2023/05/06 111 users 一言

この記事はReact公式の内容を翻訳・紹介するものではありません。筆者の解釈や理解を伝えるものであり、Reactの公式見解と一致しているとは限りません。あらかじめご了承ください。 皆さんこんにちは。最近Next.js 13.4がリリースされ、App Routerがstable扱いになりました。App RouterはReact Server Component (RSC) ... 続きを読む

React Server ComponentsとGraphQLは競合するか - cockscomblog?

2023/01/10 16 users cockscomblog GraphQL RFC 重要度 魅力

Next.jsのapp directoryについて話していて、GraphQLを使う場面ではServer Componentsの魅力がいくらか落ちるよな、と思った。裏を返せば、Server Componentsが活用されるような時代ではGraphQLの重要度が下がるかもしれない。 現にServer ComponentsのRFCの「Credits and Prior Art」を見ると次のように書いてある。 Re... 続きを読む

React Server Componentsの仕組み：詳細ガイド | POSTD

2022/07/27 99 users POSTD RSC React バンドルサイズ ビルダー

React Server Components（RSC）は、ページの読み込みパフォーマンスやバンドルサイズのほか、Reactアプリケーションの書き方に近い将来大きな影響を与えることになる、素晴らしい新機能です。 Plasmicでは、Reactのビジュアルビルダーを開発しており、Reactのパフォーマンスには大きな関心を持もっています。 当社のク... 続きを読む

(Next.js 12 コラム追加版)2021年からReactを始めるなら React Server Components 一択ではないか？

2021/10/28 29 users React おまえたち SWC ミドルウェア コラ

さすが 約113億円を資金調達 したVercel。Rust製コンパイラ（swc）を採用してビルドを高速化したり、ミドルウェア（エッジ関数等）導入でIaaSらしいことをしたりと目が離せません。「おまえたちはフロントに集中しろ！それ以外は俺たちがやってやる」って感じでしょうか。 Next.js 12 について 先にNext12についてのコラ... 続きを読む

React Server Components 総まとめ

2021/02/11 75 users コンポーネン サーバーサイド Reactコンポーネント デモ

先日、React Server Componentsについてまとめる機会がありました。 この記事では、React Server Componentsの概要と、デモを触る中で感じたことについてご紹介します。 React Server Componentsとは React Server Componentsは、Reactコンポーネントをサーバーサイドでレンダーする新しい技術です。 一部のコンポーネン... 続きを読む

React Server Componentsは再びIsormorphicの夢を見るか - vtecx

2021/01/08 12 users

室見川“Web フロントエンド”の悲しみと明るい未来という記事を読みました。 これについては全く同感です。 next.js が vercel を提供して CDNからサーバーサイドでの処理までをワンストップに提供しているとか、 firebase がクライアントサイドでの SDK と Cloud Functions をなるべく一貫した体験で提供しようとしてい... 続きを読む

React Server Componentsに感じたフロントエンドの消失

2021/01/05 137 users 消失 フロントエンド

はじめに 新年早々に面白そうな記事を見つけました。ReactでのAPI呼出しを最適化するために「部分的にサーバサイドで実行するコンポーネントを作る」というもののようです。 あるいは去年の記事ですが気になってたものとしてBlitz.jsでReactベースのFWであるnext.jsに永続化層を持たせてRailsのようなFWにしようというア... 続きを読む

React Server Components はウェブ開発を変えるゲームチェンジングな技術である

2021/01/03 291 users Facebook React ウェブ開発 激震 ツッコミ

去年末に Facebook の人達が出した React Server Components というものが、React 界隈に激震を及ぼしていますが、速報以外でこの技術について言及している国内のブログが見当たらないため、この記事で解説してみます。間違いや分かりづらい部分があればぜひツッコミをお願いします。 React Server Components は、ただ... 続きを読む

React界隈で話題になっている「React Server Components」についてまとめました！ | Developers.IO

2020/12/22 224 users React界隈 Developers.IO https 話題

React界隈で話題になっている「React Server Components」についてまとめました！ どうもReact大好きCX事業部の片岡です！ 今回はReact界隈で話題になっている「React Server Components」についての内容を意訳してみました。 元ネタ 話題になっているこちらの記事が元ネタです。 https://reactjs.org/blog/2020/12/21/d... 続きを読む

2020-12-22のJS: lighthouse 7.0.0、React Server Components、Micro Frontends Architecture Patterns - JSer.info

2020/12/22 7 users JSer.info スクリ Nightly アクセシビリティ

JSer.info #519 - Lighthouse 7.0.0がリリースされました。 Release v7.0.0 · GoogleChrome/lighthouse Node.js 10のサポート終了、PWAカテゴリの変更、アクセシビリティのテストに使うaxe-coreのアップデート、nightlyをlighthouse@nextとしてインストールできるようになるといった変更が含まれています。 また、スクリ... 続きを読む