タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Next.jsから学ぶWebレンダリング ~React誕生以前からApp Router with RSCまでの流れ~
最近話題のReact Server ComponentsやIslands Architectureが何を解決しようとしてるか知るまでの簡単なWebレンダリングの流れを記載しました。 社内勉強会のために作成した資料となるため箇条書きになっておりますが、なるべくHowやWhatではなくWhyやトレードオフを記述するようにしています。（読みにくい or 誤った記載あったらFB頂けたら幸いです） React 誕生までの Web iPhone と Ajax がリードした Web 2.0 時代 Webにおいて Ajax という技術が注目され始める 2005~ Google mapsやGmailといったサービスがリード jQueryの誕生が 2006~ iPhone登場 2007~ スマホアプリの登場によりソフトウェアのUXに求められる質的変化 mobile safariが時代のリードをした Flash
mytweetsという自分の Twitter/Bluesky の自己ポストの全部検索サービスをNext.js App Router(RSC)で書きなおしました。 mytweets は Twitter のアーカイブや Bluesky の API を使って自分のポストを S3 に保存しておき、 S3 Selectを使って全文検索ができる自分専用の Twilog のようなサービスです。 自分の Tweets をインクリメンタル検索できるサービス作成キット と Tweets をまとめて削除するツールを書いた | Web Scratch 過去の Tweets を全文検索できる mytweets を Bluesky に対応した。自分用 Twilog みたいなもの | Web Scratch 最初は CloudFront + Lambda@Edge + Next.js Pages Router で動かし
This post is about why we need a coroutine package for Go, and what it would look like. But first, what are coroutines? Every programmer today is familiar with function calls (subroutines): F calls G, which stops F and runs G. G does its work, potentially calling and waiting for other functions, and eventually returns. When G returns, G is gone and F continues running. In this pattern, only one fu
Tamaguiチームから、Webとネイティブアプリを単一コードベースで開発するReactフレームワーク「One」が発表されました。 近年ではWebとネイティブを単一ソースコードで開発するスタックのことはUniversal Appと呼ばれ、徐々に注目を集めています。例えばユニバーサルなスタイルフレームワークであるTamaguiは、ExpoとMetro、Next.jsを使ったボイラープレートを提供してきました。 OneはReact NativeのビルドツールであるMetroの代わりに、Viteプラグラインとして動作します。また、WebサーバーとしてHonoを採用しています。 ドキュメントを一通り読んでみて、これはネイティブアプリにおけるReact Server Components（以下RSC）実装の未来を示したフレームワークではないかと思ったので、紹介&考察記事を書こうと思いました。 One
Next.js App Router / React Server Components(RSC)を紐解いてみた - estie inside blog
デザインエンジニアの表(@HirokiOmote)です。 Next.jsでApp Routerがリリースされて、1年が過ぎました。 弊社では、@hiroppyさんを技術顧問に迎え、Frontendを中心とした長期的な技術選定にご協力いただきました。 本日は、そこで得た学びをご紹介したいと思います。 App Routerについて 2023年5月にNext.js 13.4がstableとしてリリースされ、App Routerが登場しました。 ツリー構造でのファイル配置が基本となりました。 ディレクトリ構成とルーティング page単位・feature(機能)ごとに切り分けたディレクトリ構成が可能になったため、より直感的で再利用性の高い構造が実現しました。 // App Router . ├── dashboard │ ├── components │ │ ├── button.tsx │ │ └
Posted on Monday, April 1, 2024. Updated Wednesday, April 3, 2024. Over a period of over two years, an attacker using the name “Jia Tan” worked as a diligent, effective contributor to the xz compression library, eventually being granted commit access and maintainership. Using that access, they installed a very subtle, carefully hidden backdoor into liblzma, a part of xz that also happens to be a d
React NativeとExpo RouterのRSC導入に向けたアップデートが来そう - laiso
Expo Routerとは Expo Routerは、React NativeおよびWebアプリケーション用に設計されたファイルベースのルーティングライブラリ。 docs.expo.dev RSCを活用してサーバー側でコンポーネントレンダリングとストリーミングを行う新しいSDUIの構想 "Fetch Once, Render Everywhere: React Server Components in Expo Router"はReact Summit 2024におけるExpo作者のひとりEvan Baconによる講演。 gitnation.com ここでExpoを使った新しいSDUIの構想が発表され、Reactネイティブアプリにおけるサーバー側のコンポーネントレンダリングとストリーミングが提案されてXのタイムラインが盛り上がっていた。 今クライアントがWeb APIで取得して画面に適用し
RSC From Scratch. Part 1: Server Components · reactwg/server-components · Discussion #5
RSC From Scratch. Part 1: Server Components In this technical deep dive, we'll implement a very simplified version of React Server Components (RSC) from scratch. This deep dive will be published in several parts: Part 1: Server Components (this page) Part 2: Client Components (not written yet) Part 3: TBD (not written yet) Seriously, this is a deep dive! This deep dive doesn't explain the benefits
Posted on Tuesday, April 2, 2024. Updated Wednesday, April 3, 2024. Introduction Andres Freund published the existence of the xz attack on 2024-03-29 to the public oss-security@openwall mailing list. The day before, he alerted Debian security and the (private) distros@openwall list. In his mail, he says that he dug into this after “observing a few odd symptoms around liblzma (part of the xz packag
A decision that arises over and over when designing concurrent programs is whether to represent program state in control flow or as data. This post is about what that decision means and how to approach it. Done well, taking program state stored in data and storing it instead in control flow can make programs much clearer and more maintainable than they otherwise would be. Before saying much more,
Previous slideNext slideToggle fullscreenOpen presenter view Remix は RSC にどう対応するのか @mizchi Remix Tokyo 2024/09/25 About https://x.com/mizchi Node.js とフロントエンドの専門家 100万円*達成率で御社のフロントエンドの高速化をやります Remix は cloudflare-pages で動くから好き そろそろ Remix で RSC したくない？ export default async function MyPage() { const data = await fetch('/api/data') return <div>{JSON.stringify(data, null, 2)}</div> } 非同期関数コンポーネントで非同期データ解
GitHub - alvarlagerlof/rsc-parser: A parser for the React Server components when sent over the network
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. Dismiss alert
research!rsc: The Principles of Versioning in Go (Go & Versioning, Part 11)
This blog post is about how we added package versioning to Go, in the form of Go modules, and the reasons we made the choices we did. It is adapted and updated from a talk I gave at GopherCon Singapore in 2018. Why Versions? To start, let’s make sure we’re all on the same page, by taking a look at the ways the GOPATH-based go get breaks. Suppose we have a fresh Go installation and we want to write
[弦潤滑剤] Rock house RSC-1 ストリングケア ってFINGER EASEみたいに使えるの？ | ギターいじリストのおうち
生涯5000本以上のギターをいじり続けたきた管理人が実測データを交え世界一詳しいギターレビューやギターパーツ情報をお届け！
![[弦潤滑剤] Rock house RSC-1 ストリングケア ってFINGER EASEみたいに使えるの？ | ギターいじリストのおうち](https://cdn-ak-scissors.b.st-hatena.com/image/square/53812a94bca8b328f1401e74354a35fec3e20d83/height=288;version=1;width=512/https%3A%2F%2Fguitar-ijiri.com%2Fwp-content%2Fuploads%2F2022%2F02%2FDSC_20220211-169-sub.jpg)
research!rsc: Hardware Memory Models (Memory Models, Part 1)
Introduction: A Fairy Tale, Ending A long time ago, when everyone wrote single-threaded programs, one of the most effective ways to make a program run faster was to sit back and do nothing. Optimizations in the next generation of hardware and the next generation of compilers would make the program run exactly as before, just faster. During this fairy-tale period, there was an easy test for whether
I opened GopherCon Australia in early November with the talk “Go Testing By Example”. Being the first talk, there were some A/V issues, so I re-recorded it at home and have posted it here: Here are the 20 tips from the talk: Make it easy to add new test cases. Use test coverage to find untested code. Coverage is no substitute for thought. Write exhaustive tests. Separate test cases from test logic
はじめに Next.jsにApp Routerが導入されたことで、開発者にとって便利な機能が増えた一方、App Routerを前提とした設計のベストプラクティスがまだ確立されておらず、設計時にさまざまな検討が必要になっています。 特に大規模プロジェクトでは、開発が進むにつれてコードが肥大化し、メンテナンス性が損なわれる可能性があります。そのため、コードを細分化して管理し、将来的な保守や拡張を容易にするアプリケーション設計が求められます。 今回の記事の項目 本記事では、App Routerの機能を最大限に活用するための設計について考察します。 特に以下の項目に焦点を当て、長期にわたってメンテナンス性の高いプロジェクトを構築するための方法を探ります。 App Routerを活用した効率的なディレクトリ設計戦略 レイアウトコンポーネントの効果的な利用 RSCの活用 サーバーコンポーネントとクライ
research!rsc: Updating the Go Memory Model (Memory Models, Part 3)
The current Go language memory model was written in 2009, with minor updates since. It is clear that there are at least a few details that we should add to the current memory model, among them an explicit endorsement of race detectors and a clear statement of how the APIs in sync/atomic synchronize programs. This post restates Go’s overall philosophy and the current memory model and then outlines
research!rsc: What NPM Should Do Today To Stop A New Colors Attack Tomorrow
What NPM Should Do Today To Stop A New Colors Attack Tomorrow Over the weekend, a developer named Marak Squires intentionally sabotaged his popular NPM package colors and his less popular package faker. As I write this, NPM claims 18,971 direct dependents for colors and 2,751 for faker. Open Source Insights counts at least 42,000 more indirect dependents for colors. Many popular NPM packages depen
React Server Components【RSC】とは？ - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
RSCとは？ 利点 サーバーとクライアントのコンポーネント分割と仕組み 適用ルール SSRとの違い 最後に RSCとは？ ※ RSCはまだReactチームにより開発中であり、本番環境にはまだ推奨されていないことに注意してください。 つまり、実験段階にあるためこの機能の実装の詳細は今後変更される可能性があります。 React Labs: 私たちが取り組んでいること – 2022 年 6 月 React-Server-Components（RSC）は、Reactアプリのパフォーマンスを向上させるために開発された方法であり、サーバー側でレンダリングされるReactコンポーネントを作成することができます。 ただし、RSCはサーバーサイドレンダリング（SSR）ではなく、SSRの代替手段でもありません。 これらの名前には両方に「サーバー」という言葉が含まれているため、混同されることがありますが、実際に
research!rsc: Transparent Telemetry for Open-Source Projects (Transparent Telemetry, Part 1)
How do software developers understand which parts of their software are being used and whether they are performing as expected? The modern answer is telemetry, which means software sending data to answer those questions back to a collection server. This post is about why I believe telemetry is important for open-source projects, and what it might look like to approach telemetry in an open-source-f
概要 React Server Components のブラウザ拡張機能がリリースされたので、紹介します。 この拡張機能は、主にNext.jsのApp Router機能を開発時にデバッグすることができるようです。 インストールはこちらから 実験と機能紹介 起動 これをApp Router機能のVercel公式レポジトリ"Next.js App Router Playground"で使用してみました。 拡張機能をインストール後、上記レポジトリを開発モードで起動します。 ブラウザで起動したアプリのURLを開き、開発者モードを開き、"RSC Devtools"を選択すると、以下の画像の画面が表示されます。 右の"Start recording"ボタンを押し、アプリ内の適当なページを開きます。すると、ロードしたページのRSC情報が表示されました。 ここからわかること ロードしたRSCは3つのチャン
research!rsc: Programming Language Memory Models (Memory Models, Part 2)
Programming language memory models answer the question of what behaviors parallel programs can rely on to share memory between their threads. For example, consider this program in a C-like language, where both x and done start out zeroed. // Thread 1 // Thread 2 x = 1; while(done == 0) { /* loop */ } done = 1; print(x); The program attempts to send a message in x from thread 1 to thread 2, using d
Next.js 13 Next.js 13では試験的(beta)な試みとして、appフォルダに置いたReactコンポーネントをデフォルトでServer Componentsとして扱います。 All components inside the app directory are React Server Components by default, including special files and colocated components. This allows you to automatically adopt Server Components with no extra work, and achieve great performance out of the box. https://beta.nextjs.org/docs/rendering/server-and-cl
ギターいじリストのおうち中の人🧠💦（低浮上） on Twitter: "誰も使っていなさそうなギター型弦潤滑剤を試してみました👍 FINGER EASEよりもFAST-FRETに近い成分ですが、内容量が想像を絶するほどに少ないです🤣 [弦潤滑剤] Rock house RSC-1 ストリングケア… https://t.co/QeqEJquvlD"
誰も使っていなさそうなギター型弦潤滑剤を試してみました👍 FINGER EASEよりもFAST-FRETに近い成分ですが、内容量が想像を絶するほどに少ないです🤣 [弦潤滑剤] Rock house RSC-1 ストリングケア… https://t.co/QeqEJquvlD
![ギターいじリストのおうち中の人🧠💦（低浮上） on Twitter: "誰も使っていなさそうなギター型弦潤滑剤を試してみました👍 FINGER EASEよりもFAST-FRETに近い成分ですが、内容量が想像を絶するほどに少ないです🤣 [弦潤滑剤] Rock house RSC-1 ストリングケア… https://t.co/QeqEJquvlD"](https://cdn-ak-scissors.b.st-hatena.com/image/square/3efaf1e72f63567e0d994079cd1880b819265ed2/height=288;version=1;width=512/https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F1380508162210467842%2FX5XSGdKl.jpg)
rf command - rsc.io/rf - Go Packages
Rf refactors Go programs. Usage: rf [-diff] script Rf applies a script of refactoring commands to the package in the current directory. For example, to unexport a field in a struct by renaming it: rf 'mv T.Field T.field' By default, rf writes changes back to the disk. The -diff flag causes rf to print a diff of the intended changes instead. A script is a sequence of commands, one per line. Comment
These are the posts in the February 2023 “Transparent Telemetry” series: “Transparent Telemetry for Open-Source Projects” [PDF]. “The Design of Transparent Telemetry” [PDF]. “Use Cases for Transparent Telemetry” [PDF]. A (now closed) GitHub discussion about adding transparent telemetry to Go is at https://go.dev/s/telemetry-discussion. Note that at the start of the discussion the design was opt-ou
These are the posts in the “Memory Models” series that began in June 2021: “Hardware Memory Models” [PDF]. “Programming Language Memory Models” [PDF]. “Updating the Go Memory Model” [PDF].
Every once in a while someone notices the first commit in the Go repo is dated 1972: % git log --reverse --stat commit 7d7c6a97f815e9279d08cfaea7d5efb5e90695a8 Author: Brian Kernighan <bwk> AuthorDate: Tue Jul 18 19:05:45 1972 -0500 Commit: Brian Kernighan <bwk> CommitDate: Tue Jul 18 19:05:45 1972 -0500 hello, world R=ken DELTA=7 (7 added, 0 deleted, 0 changed) src/pkg/debug/macho/testdata/hello.
はじめに 最近、「App Routerで開発すること多いけど、RSCを最大限活用できていないのでは？」と思ったので、MVCアーキテクチャからRSCにかけてのレンダリングの変遷を調べ、どのようにしたら、RSCにおける良い実装ができるかを学習したので、その内容をまとめたいと思います。 本記事では、MVC〜RSCの変遷を記述しているのですが、具体的には、以下の順で解説しています。 1.MVC 2.SPA 3.SSR 4.RSC これらのレンダリングの変遷を見ていき、RSCでどのように実装したら、よりパフォーマンスの良いフロントエンドを開発できるかを解説しようと思います。 MVCアーキテクチャ まず、MVCではどのようにレンダリングしていたかを解説します。 図にすると以下のようになるかと思います。 MVCでは以下の順で処理を行っていました。 1.クライアントからリクエスト 2.Routingに基づ
GitHub - rsc/unix: Old Unix programs running on modern computers.
rsc.io/unix holds programs for running old Unix programs on modern computers. pdp11 is a PDP-11 simulator. v6unix is a Research Unix Sixth Edition (V6) simulator. It is a port of the V6 kernel logic to Go, using the PDP11 simulator to run user programs. For the most part the kernel is a faithful simulation of the V6 kernel, but it is written to use in-memory data structures and other simplifying a
There is a paper making the rounds, with a slick accompanying web site, in which the authors describe a software supply chain attack they call “Trojan Source: Invisible Vulnerabilities”. In short, if you use comments containing Unicode LTR and RTL code points, which control whether text is rendered left-to-right or right-to-left, you can make code look different in a standard Unicode rendering tha
【RSC-300JPWH】UV除菌、パワフルな吸引力、軽量スリム。レイコップ コードレスUVスティッククリーナー。感想・レビュー・比較。 - 楽天ブログ 【これへき】：楽天ブログ
2021.04.13 【RSC-300JPWH】UV除菌、パワフルな吸引力、軽量スリム。レイコップ コードレスUVスティッククリーナー。感想・レビュー・比較。 テーマ：★つ・ぶ・や・き★(538590) カテゴリ：掃除機 RSC-300JPWH、レイコップから発売されている人気の充電型スティック掃除機。「RSC-300JPWH」は、殺菌もウイルスもUVのチカラで徹底除去し、ハウスダストもしっかり吸引できるコードレスUVスティッククリーナーです。 取扱店：レイコップ公式ストア楽天市場店 細菌もウイルスもUVの力で徹底除去。 ハウスダストもしっかり吸引して、家中のキレイを保ちます。 楽天市場全店で検索比較 UV除菌、パワフルな吸引力、軽量スリム。 レイコップ コードレスUVスティッククリーナー RSC-300JPWH 【主な特徴】 UVランプとたたきのWパワー UVランプを搭載した「UVヘッド
*]:prose-blockquote:content-none prose-pre:whitespace-pre-wrap [&>*.footnotes]:mt-12 [&>*.footnotes]:border-t [&>*.footnotes>h2]:hidden [&>*.footnotes]:text-sm"> React Server Component, or RSC, was first introduced over three years ago, but is still confusing a lot of us web developers. We know React. We know server. We know component. But somehow putting them together isn’t what React Server Comp
関連キーワード データ | データ分析 | サーバ Meta Platforms（旧Facebook）は人工知能（AI）システム向けスーパーコンピュータ「AI Research SuperCluster」（RSC）を開発し、自社のサービス強化に取り組んでいる。 これまでMetaが使用していたシステムは、従来型のGPU（画像処理装置）クラスタを採用していた。GPUクラスタは、GPUを搭載したコンピュータ群から成るクラスタだ。「RSCによって、同社は大規模な次世代GPUクラスタを手に入れることになる」と、調査会社Gartnerでアナリストを務めるチラーグ・デケイト氏は指摘する。 MetaのAIスパコン「RSC」を構成するサーバ、ネットワーク、ストレージ製品 併せて読みたいお薦め記事 連載：Metaが手掛けるスパコン開発 第1回：Meta（旧Facebook）が“AIスパコン”を独自開発 その目
research!rsc: Hash-Based Bisect Debugging in Compilers and Runtimes
Setting the Stage Does this sound familar? You make a change to a library to optimize its performance or clean up technical debt or fix a bug, only to get a bug report: some very large, incomprehensibly opaque test is now failing. Or you add a new compiler optimization with a similar result. Now you have a major debugging job in an unfamiliar code base. What if I told you that a magic wand exists
AppRouter(RSC)で簡単にグローバルステートを導入して、SCでもCCでもServerActionsでも横断的に状態を共有する方法
VTeacher所属のSatokoです。 フロントエンドエンジニアとバックエンドエンジニアを兼任しています。 王道なテクノロジーと少しだけGeekなテクノロジーを組み合わせた選定が好みです🤤 Next.js AppRouter (React Server Components) を採用する企業が増えていますね！ 今回は弊社でやっている、サーバーコンポーネント(SC)、クライアントコンポーネント(CC)、そしてServerActionsを問わず、横断的に状態を共有する方法をご紹介します！ こんな感じで、 AppRouter (RSC) 環境下で、ある枝の末端にあるクライアントコンポーネントから、別の枝にあるサーバーコンポーネントへ状態を共有したい場合を想定しています。 バケツリレー（親から子への連鎖的な受け渡し）を避けたいときです。 （それでも・・・わたしはバケツリレー推奨派です・・・）
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Twitter/Blueskyの自己ポストの全文検索サービスをNext.js App Router(RSC)で書きなおした方法/設計/感想
research!rsc: Coroutines for Go
Webとネイティブを融合させてRemixのようなデータ取得ができるフレームワーク”One”と、RSCの未来
research!rsc: Timeline of the xz open source attack
research!rsc: The xz attack shell script
research!rsc: Storing Data in Control Flow
Remix は RSC にどう対応するのか
research!rsc: Go Testing By Example
【Next.js】App RouterとRSCによるアーキテクチャ設計
React Server Componentsのブラウザ拡張機能"RSC Devtools"の紹介
Next.js 13 の React Server Components(RSC) とデータフェッチ
research!rsc: Transparent Telemetry
research!rsc: Memory Models
research!rsc: Go’s Version Control History
【Next.js】RSCから見るレンダリングの変遷（MVC〜RSC）
research!rsc: On “Trojan Source” Attacks
RSC is React Server + Component | bobae kang
英国王立化学会（RSC）、オランダ・SURFmarketコンソーシアムとの間で”Read & Publish”契約を締結
Meta（旧Facebook）の自前スパコン「RSC」は何のハードを使っているのか？
news.yahoo.co.jp
www.nippon-foundation.or.jp
digital.asahi.com
www.utachan.com
news.yahoo.co.jp
joseikin-now.jp