Server Component

はじめに DMM TV Webで抱えていたCSSの課題 代替ライブラリの比較 移行のステップ フェーズ分け デグレ発生時の備え 現在のステータス コード例(Emotion) コード例(Tailwind CSS) パフォーマンス検証 さいごに PR はじめに この記事はDMM グループ Advent Calendar 2024の18日目の記事です。 こんにちは。DMM.comプレミアムプロダクト開発部でWebフロントエンジニアをしている渡辺 (@shikachii) です。 普段はWebブラウザ向けDMM TVの開発・保守・運用をしています。（これ以降Webブラウザ向けDMM TVをDMM TV…

こんにちは。ソーシャル経済メディア「NewsPicks」NewsPicks Stage. 事業のエンジニアをしています、林です。 業務では Next.js / Rust / Go などを用いて、経済・ビジネス情報に特化した動画配信サービスである NewsPicks Stage. の開発・運用を行っています。 概要 NewsPicks Stage.（以下Stage.）では去年末ごろから Next.js のフロントエンドを App Router へ段階的移行を進めてきました。 tech.uzabase.com 1年ほどで 半分以上のページが App Router 化 され、知見や感想が溜まってきた…

はじめに こんにちは、Pay IDのフロントエンドエンジニアのnojiです。 普段はPay ID あと払いやPay IDのアカウント周りのフロントエンド開発を担当しています。 10月にPay IDのアカウント編集画面（こちら）をリニューアルしました。この記事では、そのリニューアルプロジェクトでNext.jsのApp Router / Server Actionを活用し、便利だと感じた点をご紹介します。 使用技術 Next.js 14（リリース当時のもの。現在は15になっています） React 18（リリース当時のもの。現在は19になっています） リニューアルの背景 今回のリニューアルは、PAY…

www.publickey1.jp www.publickey1.jp ⇧ シンプルにしようとしてくれるのは素晴らしいんですが、破壊的変更が無いのが利用者にとっては嬉しい気がしますな、自分はRuby on Railsを利用していませんが... Next.jsのPages RouterとApp Routerと React単独での利用が非推奨っぽいので、Next.jsを利用せざるを得ないことになったので、Next.jsを利用しようとしたところ、どうも、Next.jsの端境期に遭遇したようで、 Pages Router App Router の切り替えの時期に、Next.jsの入門をすることになった…

こんにちは！プロダクトエンジニアのshiraです。 2024年6月にリリースした採用管理機能の開発をしています。 support.smarthr.jp 採用管理機能ではNext.jsのApp Routerを採用しています。SmartHRではこれまでApp Routerを使ったプロダクトがない状態だったので、技術選定時は採用するか迷いました。 この記事ではApp Routerを採用するまでの経緯と採用してみてどうだったかについて紹介させていただきます。 Pages RouterとApp Routerについて まずはじめにPages RouterとApp Routerについて軽く説明します。ご存知…

JavaScriptフレームワークを取り巻く状況は、常に変化を続けています。近年では、サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）のバランスは、重要な検討事項です。 ChatGPTのRemix採用 2024年9月、ChatGPTがNext.jsからRemixに移行したことが明らかになりました。この出来事は、Remixの母体であるReact Router系のコミュニティで大きな話題となり、移行の理由について様々な憶測を呼びました。 JavaScriptエキスパートのWes Bos氏（学習動画教材とかを作っている人）は、ChatGPTのフロントエンドのソースコード…

だいぶ日が空いてしまいましたが、参加ブログになります。聞いたトークのメモはCosenseにあります。 builderscon.io scrapbox.io とくに以下のトークが印象に残りました。本人確認システムの構築や、最新フロントエンド技術、Linux on Browserといった、なかなか首を突っ込む機会がない話が聞けて刺激になりました。最近は尖った技術のことをあまり考えられていないな、という焦りすら思い出させてくれます。 法律に準拠した本人確認システムを0から作った話 〜家計簿プリカB/43でのeKYC開発実例〜 by 三谷 昌平 | トーク | builderscon 2024 #bu…

マルチプロダクト戦略を掲げてプロダクトを急速に増やし続けている SmartHR のフロントエンド領域について、2018年から SmartHR に参加しているフロントエンドエンジニアの nabeliwo と技術顧問の koba04 が、これまでの振り返りと今後の展望を話しました。 SmartHR のフロントエンドでどんな技術が使われてきてどんな課題と向き合ってきたのか、そして今現在取り組んでいる課題や SmartHR ではどんなフロントエンドエンジニアが求められるのかなど、幅広いテーマが出てきました。 この記事ではその模様をお届けします。 目次 フロントエンドの Rails からの脱却とフロント…

React / Next.js / Remixに見られる、この頃のアーキテクチャの変化をキャッチアップすべく、横断的なトピックを紹介する本連載。第3回はここ数年で起きたNext.jsとRemixのルーティングの変化を見ながら、現在のルーティングアーキテクチャについて学んでいきます。 コンテンツ ・Next.jsとRemixそれぞれのルーティングの変化・Next.jsのルーティング・Remixのルーティング・Next.jsとRemixのルーティングに関する考え方の違い・マイグレーションのサポートが便利 Next.jsとRemixそれぞれのルーティングの変化 昔、Reactを使ったSPA（Sing…

8/10で浦和で開催されたbuilderscon 2024に参加してきたので感想ブログ書きます。 テーマの「知らなかった、を聞く」の通り、めちゃめちゃ楽しく、エンジニア心に突き刺さる話が多かったです！ぜひ来年の開催も期待してます！！ 自分がトークした自前構築した本人確認システムのトーク内容と、他の方のトークの感想をまとめます！

2024/08/10 (土) に「builderscon 2024」に参加してきました。 fortee.jp 発表 ありがたいことに「React Server Components の疑問を解き明かす」という題で発表させて頂くことができました。 speakerdeck.com React Server Component (RSC) は、サーバーサイド上でレンダリングされる React コンポーネントです。React Server Component を用いると、コンポーネントの中から DB にアクセスしたり、ファイルシステムにアクセスしたりできます。 一方で、今までにも erb や pug …

はじめに こんにちは、Tochiです。 今日はServer Actionについて調べたことをまとめていきます。 Server Actionってなに。 ドキュメントには以下のように記載されています。 サーバー アクションを使用すると、クライアント コンポーネントはサーバー上で実行される非同期関数を呼び出すことができます。 あまりピンときませんが、平たく言えば 「Server Actionなるものを利用すると、クライアント側でデータの管理をせずに済み、サーバ上でデータの登録や更新できるようになる」といったもののようです。 react.dev ただし、ここで注意しなければならないのが、Server …