Next.js と Server-side Rendering をプロダクト環境で3年運用してきた知見と率直な所感 | MEDLEY Developer Portal
2024-07-23Next.js と Server-side Rendering をプロダクト環境で3年運用してきた知見と率直な所感こんにちは、医療プラットフォーム本部・プロダクト開発室・第1開発グループ所属の加藤です。 オンライン診療・オンライン服薬指導アプリ「CLINICS」の開発を担当しています。 今回は CLINICS で採用している Next.js と Server-side Rendering (SSR) についてお話ししたいと思います。 Next.js は昨今注目を集めている React ベースの Web フレームワークです。 これから Web フロントエンドの開発を始めるにあたって採用を検討している方も多いのではないでしょうか。 Next.js といえば React コンポーネントをサーバー上で実行して HTML を返す SSR に対応しているのが大きな特徴です。 SSR
次世代Web BandlerのFarmが熱そう
はじめに 昨今、ビルドツールは様々なものが開発され、いかに高速化するか、開発者体験を上げられるかが注目されているように思います。2024年6月にState of JSが公開され、その中でBuild Toolsはwebpackが最も使用されており、次いでViteがランキングしています。 Viteの伸びがすごいですね...🔥 ビルドツールも様々ありますが、2024年4月にFarmというWeb Bandlerのv1.0がリリースされました。 気になってドキュメントサイトを覗いてみるとなんだか良さげな雰囲気を感じたので、Farmの特長と推せるポイントをまとめてみようと思います。 やること、やらないこと やること Farmの紹介 Farmの特長とおすすめポイントの紹介 やらないこと Farmの導入方法や詳細について （ドキュメントがわかりやすい） Farmとは？ Farmは、webpackやVit
An extremely fast, production-grade web bundler based on Rust. Mako is a new web bundler for Web App, Library, and Framework. It's designed to be fast, reliable, and easy to use. It has been used in hundreds of projects in production by Ant Group, and other companies. If you are looking for a modern web bundler, Mako is the right choice. Getting Started $ npm create mako Why Mako Mako has a lot of
一定の規模以上のWebアプリケーションにおいて、JavaScriptを開発時のままの形で配信することは滅多にありません。webpackやRollupなどのバンドラを使用して、ファイルをまとめた上で配信することが一般的です。 ESModulesが普及しバンドル工程なしでも主要ブラウザがJavaScriptのモジュールを直接解釈できるようにはなりましたが、我々は依然としてバンドラを使用してWebアプリケーションを開発しています。一体なぜでしょうか？ いくつか理由はありますが、その内の1つに importのコストが高い ことがあげられます。 これはv8チームが公開しているベンチマーク測定を見ても明らかです。モジュールの読み込みに時間がかかると当然ページの読み込み速度が遅くなり、ユーザー体験が悪化します。 出典： ES Module loading importのコストを削減するためにエコシステム
Apple シリコンの macOS で “Docker Desktop vs OrbStack” を検証してみた - PLAY DEVELOPERS BLOG
こんにちは。今年の4月に入社したプラットフォーム技術部の杉森です。データ分析基盤の構築を行っております。 弊社のとあるアプリケーションの開発環境として Docker を使用しているのですが、 Apple シリコンの macOS での開発環境の立ち上げに多くの時間がかかっており、その問題を改善できないか調査したのでご紹介します。 問題 原因 解決策 “Rosetta 2 の使用” Docker Desktop “Rosetta for Linux” OrbStack 試してみる Docker Desktop “Rosetta for Linux” OrbStack 結論 “Docker Desktop vs OrbStack” おわりに 問題 開発環境の立ち上げプロセスにおいて現在最も時間がかかっているのは webpack によるフロントエンドアプリケーションのビルドです。 Apple シリ
package.json dependencies メンテの仕方 最短ルート | フューチャー技術ブログ
本記事は「珠玉のアドベントカレンダー記事をリバイバル公開します」企画のために、以前Qiitaに投稿した記事をブラッシュアップし、フューチャー技術ブログに転載したものになります。Qiita側の元記事もアップデートしています。 はじめにpackage.json の dependencies をメンテナンスするにはどこから手を付ければいいか、を解説します。 Node.js を使っている人にはおなじみ package.json。 package.json の中で一番よく更新されるのが dependencies（個人の感想、次点で scripts）。 そして、依存パッケージが着々とバージョンアップしていくにも関わらず放置されてしまって後々問題になりがちなのも dependencies 。 「npm install で追加したっきり。パッケージのアップデートなんて考えたことなかった」という人や「Git
Rspack
Announcing Rspack v1.0 Alpha# June 29, 2024 Rspack 1.0 alpha is now available on npm! Before releasing Rspack 1.0 stable version, we will test for 1~2 months to improve the API stability and reliability of v1.0 and to verify its impact on downstream projects. Rspack 1.0 stable version is expected to be released this August. This is a significant milestone as it means that Rspack has implemented th
JSer.info #700 - Vitest 2.0.0がリリースされました。 Release v2.0.0 · vitest-dev/vitest 非推奨のオプションを削除、一部オプションのデフォルト値の変更などの破壊的な変更が含まれています。 マイグレーションガイドも合わせて公開されています。 Migration Guide | Guide | Vitest Browser Mode改善、expect.pollの追加、test.forの追加などが行われています。 Browser Modeについては、次のページに詳しい説明が公開されています。 Vitest Browser Mode · vitest-dev/vitest · Discussion #5828 Node.js v22.5.0がリリースされました Node.js — Node v22.5.0 (Current) コアモジュ
これは何 今回、webpackのツリーシェイキングが意図せずうまくできていなかった部分を発見し、修正をしました。それにより、バンドルサイズを約30%削減することができました。 (Parsed Size 約890KB->約610KB) 今回、再exportをする際の注意点について学びがあったので、どのような問題が起きていたのかを説明します。 どのような実装になっていたか 私達のプロジェクトでは、Feature-Sliced Designという設計を用いています。Feature-Sliced Designではレイヤーを分けて依存方向を制限します。 このFeature-Sliced Designには「Pulic API」というルールがあります。 これは各モジュールのエントリーポイントを制限することで、内部実装への依存を防ぎ、変更に強くする狙いがあります。 具体的には、以下のように公開する機能を再
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mako - Extremely fast, Production-grade web bundler
ESModules プラットフォームとエコシステムの狭間で | poteboy
2024-07-18のJS: #700 - Vitest 2.0.0、Node.js 22.5.0(sqlite)、Private Browsing Mode
再exportの修正をしてバンドルサイズを約30%削減した - Qiita